javascript - Ext Js - 加载两个网格时出现问题

Question

我正在尝试以主/从关系显示两个网格。作为 Ext JS 的新手，我修改了一个示例，它将成功显示我的数据——主数据或详细数据。但我无法让它同时加载它们。每个网格都有自己的 dataStore、columnModel 和 gridPanel。

我是否需要使用不同的容器来容纳 gridPanel？我的窗口配置中是否存在语法错误？谢谢。

    OrdersGrid =  new Ext.grid.EditorGridPanel({
      id: 'OrdersGrid',
      store: OrdersDataStore,
      cm: OrdersColumnModel,
      enableColLock:false,
      clicksToEdit:1,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

    ItemsGrid =  new Ext.grid.EditorGridPanel({
      id: 'ItemsGrid',
      store: ItemsDataStore,
      cm: ItemsColumnModel,
      enableColLock:false,
      clicksToEdit:1,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

    OrdersItemsWindow = new Ext.Window({
      id: 'OrdersItemsWindow',
      title: 'Orders and Items',
      layout: 'vbox', 
      closable: true,
      height: 700,        
      width: 800,
      layoutConfig: {
        align : 'stretch',
        pack  : 'start',
      },
      plain: false,
      items: [ OrdersGrid, ItemsGrid ]
    });

    OrdersDataStore.load();
    ItemsDataStore.load();

    OrdersItemsWindow.show();   

Answer 1

需要设置两个 GridPanels 的高度，因为窗口的 VBoxLayout 不处理这个。它只能设置它包含的项目的水平宽度。

例如:

OrdersGrid =  new Ext.grid.EditorGridPanel({
  id: 'OrdersGrid',
  store: OrdersDataStore,
  cm: OrdersColumnModel,
  enableColLock:false,
  clicksToEdit:1,
  flex: 1,  // add this line
  selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});

您使用的其余语法是正确的。

或者，可以使用类似 height: 200 的东西来固定高度，代替 flex 参数。