0

我试图在没有 gui 的情况下复制Serge Insas 的这个例子。

var vPanel = app.createVerticalPanel();
vPanel.add(createGrid(1,1).setId(grid1);
vPanel.add(createGrid(1,1).setId(grid2);
var handler0 = app.createClientHandler()
   .forTargets(grid1).setVisible(true)
   .forTargets(grid2).setVisible(false);
 var handler1 = app.createClientHandler()
   .forTargets(grid1).setVisible(false)
   .forTargets(grid2).setVisible(true);

处理程序正确设置可见性。

与示例不同，grid2 不对齐到顶部，而是位于不可见的 grid1 下方。我如何证明顶部？

注意：这仅适用于 chrome、firefox 和 explorer justify to top。

谢谢，

斯科特

编辑：添加了完整的代码

    function doGet(e) {
//create app
var app = UiApp.createApplication().setTitle('testCrawl');

// create components
var searchPanel = app.createVerticalPanel().setId('searchPanel').setWidth('100%');
var searchMenu = app.createMenuBar().setId('searchMenu').setWidth('100%');
var searchGrid = app.createVerticalPanel().setId('searchGrid').setWidth('100%')
                    .setHeight('100px').setVisible(false)
                    .setStyleAttribute("border","2px solid #C0C0C0")
var basicGrid = app.createGrid(1,1).setId('basicGrid').setWidth('100%').setVisible(false)
                basicGrid.setWidget(0,0, app.createLabel('Basic'));
var advancedGrid = app.createGrid(1,1).setId('advancedGrid').setWidth('100%').setVisible(false);
                advancedGrid.setWidget(0,0, app.createLabel('Advanced'));
var mapGrid = app.createGrid(1,1).setId('mapGrid').setWidth('100%').setVisible(false);
     mapGrid.setWidget(0,0, app.createLabel('Map'));
var archiveGrid = app.createGrid(1,1).setId('archiveGrid').setWidth('100%').setVisible(false);
      archiveGrid.setWidget(0,0, app.createLabel('Archive'));
var emailCartGrid = app.createGrid(1,1).setId('emailCartGrid').setWidth('100%').setVisible(false);
      emailCartGrid.setWidget(0,0, app.createLabel('EmailCart'));
var hideGrid = app.createGrid(1,1).setId('hideGrid').setWidth('100%').setVisible(false);


// add menu and grid
app.add(searchPanel);
searchPanel.add(searchMenu);
searchPanel.add(searchGrid);
searchGrid.add(basicGrid)
          .add(advancedGrid)
          .add(mapGrid)
          .add(archiveGrid)
          .add(emailCartGrid)
          .add(hideGrid);

// client handler
var handler0 = app.createClientHandler()
  .forTargets(searchGrid, basicGrid).setVisible(true)
  .forTargets(advancedGrid, mapGrid, archiveGrid, emailCartGrid,hideGrid).setVisible(false);
var hanlder1 = app.createClientHandler()
  .forTargets(searchGrid, advancedGrid).setVisible(true)
  .forTargets(basicGrid, mapGrid, archiveGrid, emailCartGrid,hideGrid).setVisible(false);
var handler2 = app.createClientHandler()
  .forTargets(searchGrid, mapGrid).setVisible(true)
  .forTargets(basicGrid, advancedGrid, archiveGrid, emailCartGrid,hideGrid).setVisible(false);
var handler3 = app.createClientHandler()
  .forTargets(searchGrid, archiveGrid).setVisible(true)
  .forTargets(basicGrid, advancedGrid, mapGrid, emailCartGrid,hideGrid).setVisible(false);
var handler4 = app.createClientHandler()
  .forTargets(searchGrid, emailCartGrid).setVisible(true)
  .forTargets(basicGrid, advancedGrid, mapGrid, archiveGrid,hideGrid).setVisible(false);
var handler5 = app.createClientHandler()
  .forTargets(searchGrid).setVisible(false);


// Create Menu Items
var menuItem0 = app.createMenuItem('Search', handler0);
var menuItem1 = app.createMenuItem('Advanced', hanlder1);
var menuItem2 = app.createMenuItem('Map', handler2);
var menuItem3 = app.createMenuItem('Archive', handler3);
var menuItem4 = app.createMenuItem('Email Cart', handler4);
var menuItem5 = app.createMenuItem('Hide', handler5).setId('hide');



//create menuItem separators
var separator0 = app.createMenuItemSeparator();
var separator1 = app.createMenuItemSeparator();
var separator2 = app.createMenuItemSeparator();
var separator3 = app.createMenuItemSeparator();
var separator4 = app.createMenuItemSeparator();
var separator5 = app.createMenuItemSeparator();
var separator6 = app.createMenuItemSeparator();

//Add the menu item separators and menuItem to the MenuBar
searchMenu.addSeparator(separator0).addItem(menuItem0).addSeparator(separator1)
  .addItem(menuItem1).addSeparator(separator2)
  .addItem(menuItem2).addSeparator(separator3)
  .addItem(menuItem3).addSeparator(separator4)
  .addItem(menuItem4).addSeparator(separator5)
  .addItem(menuItem5).addSeparator(separator6);

return app;

}
4

1 回答 1

0

我尝试了您的代码-对其进行了开发以使其可测试-我没有看到您提到的问题...（在 Chrome 上测试）您可以发布您的整个测试代码吗？

同时，这是我使用的测试代码（在此处部署），垂直面板中有两个网格：

function doGet() {
var app = UiApp.createApplication()
  var vPanel = app.createVerticalPanel().setStyleAttribute('background', 'beige');
  var grid1 = app.createGrid(1,1).setId('grid1');
  var grid2 = app.createGrid(1,1).setId('grid2').setVisible(false);
vPanel.add(grid1.setText(0, 0, 'grid1'));
vPanel.add(grid2.setText(0, 0, 'grid2'));
var handler0 = app.createClientHandler()
   .forTargets(grid1).setVisible(true)
   .forTargets(grid2).setVisible(false);
 var handler1 = app.createClientHandler()
   .forTargets(grid1).setVisible(false)
   .forTargets(grid2).setVisible(true);
   grid2.addClickHandler(handler0)
   grid1.addClickHandler(handler1)
app.add(vPanel)   
return app
}

编辑：如果您在垂直面板上设置边框和高度参数，那么您将不再有对齐更改。但是网格默认使用整个高度，因此您选择的值 (1) 标签位于中间...我想它将在网格中填充更多单元格，因此问题将自行消失。这是我更改的脚本部分：

function doGet(e) {
//create app
var app = UiApp.createApplication().setTitle('testCrawl');

// create components
var searchPanel = app.createVerticalPanel().setId('searchPanel').setWidth('100%').setHeight('100px')
                    .setStyleAttribute("border","2px solid #C0C0C0")
var searchMenu = app.createMenuBar().setId('searchMenu').setWidth('100%');
var searchGrid = app.createVerticalPanel().setId('searchGrid').setWidth('100%')
                    .setVisible(false)
于 2012-11-17T09:46:10.917 回答