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

如何解决Ext Js-加载两个网格时出现问题

| 我试图以主/明细关系显示两个网格。作为Ext JS的新手，我修改了一个示例，该示例将成功显示我的数据-主数据或局部数据。但是我无法加载它们两者。每个网格都有自己的dataStore，columnModel和gridPanel。 我是否需要使用其他容器来容纳gridPanels？我的窗口配置中是否存在语法错误？谢谢。

    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,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();   

    

解决方法

需要设置两个

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

参数来固定高度。     ,

Ext.onReady(function () {

    var movieStore = Ext.create(\"Ext.data.Store\",{
        baseParams: { action: \'movie\' },fields: [\"film_id\",\"title\",\"rent\",\"buy\"],data:   [{film_id:1,title: \"film_A\",rent: 20.0,buy: 30},{film_id:2,title: \"film_B\",buy: 36},{film_id:3,title: \"film_C\",rent :22.0,buy :27}]

    });
    var actorStore = Ext.create(\"Ext.data.Store\",{
        baseParams: { action: \'actors\' },fields: [\"actor_id\",\"name\"],data:   [{actor_id: 1,name:\"A\"},{actor_id: 2,name: \"B\"},{actor_id: 3,name :\"C\"}]

    });

   var movieGrid = Ext.create(\"Ext.grid.Panel\",{
        store: movieStore,//sm: Ext.create(\'Ext.grid.RowSelectionModel\',{ singleSelect: true }),singleSelect: true,title: \"Movies\",selType: \'rowmodel\',/* plugins: [
        Ext.create(\'Ext.grid.plugin.RowEditing\',{
            clicksToEdit: 2
        })],*/

        columnLines: true,width: 600,height: 200,columns: [
                  {xtype : \"rownumberer\"},{text: \'film_ID\',dataIndex: \'film_id\'},{text: \'Movie\',dataIndex: \'title\',editor: \'textfield\'},{text: \'Rent\',dataIndex: \'rent\',xtype : \"numbercolumn\",format:\"0.00\"},{text: \'Buy\',dataIndex: \'buy\',xtype:\"numbercolumn\",format:\"0.00\"}


      ],iconCls: \'icon-grid\',margin: \'0 0 20 0\',renderTo: Ext.getBody()
    });

  var actorGrid =  Ext.create(\"Ext.grid.Panel\",{
        store: actorStore,title: \"Actor\",{text: \'actor_id\',dataIndex: \'actor_id\'},{text: \'name\',dataIndex: \'name\',],renderTo: Ext.getBody()
    });

  movieGrid.getSelectionModel().on(\'rowselect\',function(sm,rowIndex,record) {
            /*moviesGrid.setTitle(\'Movies starring \' +
            record.data.first_name + \' \' + record.data.last_name);*/
            actorStore.load({ params: { \'movie\':
            record.data.actor_id} });
            });
            movieStore.load();

});