Ext Js - Problem Loading Two Grids

I'm trying to display two grids in a master/detail relationship. Being new to Ext JS, I've modified an example that will successfully display my data - either the master or the detail. But I can't get it to load them both. Each grid has it's own dataStore, columnModel and gridPanel.

Do I need to use different container to hold the gridPanels? Do I have a syntax error in the config for my Window? Thanks.

    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,
      i开发者_运维百科tems: [ OrdersGrid, ItemsGrid ]
    });

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

    OrdersItemsWindow.show();   

The height of the two GridPanels needs to be set, since the VBoxLayout of the window doesn't handle this. It can only set the horizontal width of the items it contains.

For example:

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

The rest of the syntax you are using is correct.

Alternatively, it's possible to use something like height: 200 to fix the height, in place of the flex parameter.

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

});