Extjs Grid Master Detail

This example show EXTJS bug and get solution to load detail records into other grid.

by Rekha Ashok

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/extjs-build/resources/css/ext-all.css">
<script src="http://docs.sencha.com/extjs/4.1.3/extjs-build/ext-all-dev.js"></script>
`

JavaScript

var itemsPerPage=2;

Ext.create('Ext.data.Store', {
  storeId: 'simpsonsStore',
  fields: ['name', 'email', 'phone'],
  data: {
    'items': [{
      'name': 'Lisa',
      "email": "[email protected]",
      "phone": "555-111-1224"
    }, {
      'name': 'Bart',
      "email": "[email protected]",
      "phone": "555-222-1234"
    }, {
      'name': 'Homer',
      "email": "[email protected]",
      "phone": "555-222-1244"
    }, {
      'name': 'Marge',
      "email": "[email protected]",
      "phone": "555-222-1254"
    }]
  },
  proxy: {
    type: 'memory',
    reader: {
      type: 'json',
      root: 'items'
    }
  }
});
store.load({
    params:{
        start:0,
        limit: itemsPerPage
    }
});
Ext.create('Ext.grid.Panel', {
  title: 'Simpsons',
  store: Ext.data.StoreManager.lookup('simpsonsStore'),
  columns: [{
    header: 'Name',
    dataIndex: 'name',
    editor: 'textfield'
  }, {
    header: 'Email',
    dataIndex: 'email',
    flex: 1,
    editor: {
      xtype: 'textfield',
      allowBlank: false
    }
  }, {
    header: 'Phone',
    dataIndex: 'phone'
  }],
  height: 200,
  width: 400,
  selType: 'cellmodel',
  plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
      clicksToEdit: 1
    })
  ],
  dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],
  renderTo: Ext.getBody()
});