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

Question

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

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

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

});