Ext Js - 加载两个网格的问题

Question

我试图在主/关系中显示两个网格。作为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, 
     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参数。

Answer 2

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",rent: 20.0,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, 
     //sm: Ext.create('Ext.grid.RowSelectionModel',{ singleSelect: true }), 
     singleSelect: true, 

     title: "Actor", 
     selType: 'rowmodel', 
     /* plugins: [ 
     Ext.create('Ext.grid.plugin.RowEditing', { 
      clicksToEdit: 2 
     })],*/ 

     columnLines: true, 
     width: 600, 
     height: 200, 
     columns: [ 
        {xtype : "rownumberer"}, 
        {text: 'actor_id',dataIndex: 'actor_id'}, 
        {text: 'name',dataIndex: 'name', editor: 'textfield'}, 



     ], 
     iconCls: 'icon-grid', 
     margin: '0 0 20 0', 
     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(); 

});