SOLVED : Nested Models, Stores and Grids

**titusaduxass** · 18 Jun 2012 12:51 PM

Hi,

I am hoping someone on here can help me. I am using ExtJS 4.1.0 and have been looking at using nested models to populate two grids. The parent grid loads and renders fine, but while the child grid renders it does not have any data in it. I think the problem may lie with the child store not loading, but I am at a complete loss as to how to progress any further.

I have replicated my problem here:
http://www.swiftwind.co.uk/grid_test

I have also uploaded a ZIP file of my code which can simply be extracted to a webserver and run:
http://www.swiftwind.co.uk/grid_test/grids.zip

Any help would be much appreciated!

Kind Regards,

Cj

I have the following code:

data.xml

Code:

<dataset>
    <row>
        <id>1</id>
        <fullname>Bob Holnes</fullname>
        <relatives>
            <relative>
                <id>101</id>
                <firstname>Mum</firstname>
            </relative>
            <relative>
                <id>102</id>
                <firstname>Dad</firstname>
            </relative>
        </relatives>
    </row>
</dataset>

PeopleModel.js

Code:

Ext.define('Ext.app.models.PeopleModel', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'id', type: 'string'},
      {name: 'fullname', type: 'string'}
    ],
    proxy: {
        type: 'ajax',
        noCache: false,
        pageParam: '',
        limitParam: '',
        startParam: '',
        url: './app/data/data.xml',
        reader: {
            type: 'xml',
            root: 'dataset',
            record: 'row'
        }
    },
    hasMany: {model: 'Ext.app.models.RelativeModel', name: 'relatives'}

});

RelativeModel.js

Code:

Ext.define('Ext.app.models.RelativeModel', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'id', type: 'string'},
      {name: 'firstname', type: 'string'}
    ],
    belongsTo: 'Ext.app.models.PeopleModel'
});

PeopleStore.js

Code:

Ext.define('Ext.app.stores.PeopleStore', {   
    extends: 'Ext.data.Store',
    model: 'Ext.app.models.PeopleModel',
    autoLoad: true
});

RelativeStore.js

Code:

Ext.define('Ext.app.stores.RelativeStore', {
    extend: 'Ext.data.Store',
    model: 'Ext.app.models.RelativeModel'
});

index.html

Code:

<html>
  <head>
    <title>ExtJS Grid Test</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all.css"/>
    
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.1.0-gpl/bootstrap.js"></script>
  </head>
  
  <body>
      <script type="text/javascript">
        Ext.Loader.setConfig({enabled: true});
        
        Ext.Loader.setPath('Ext.app','./app');
        Ext.Loader.setPath('Ext.app.models','./app/models')
        
        Ext.require([
            'Ext.app.models.PeopleModel',
            'Ext.app.stores.PeopleStore',
            'Ext.app.stores.RelativeStore'
        ]);
        
      Ext.onReady(function() {
         Ext.create('Ext.grid.Panel', {
             renderTo: Ext.getBody(),
             store: Ext.create('Ext.app.stores.PeopleStore'),
             columns: [{
                 text: 'Id',
                 dataIndex: 'id'
             }, {
                 text: 'Full Name',
                 dataIndex: 'fullname'
                }]
         });
         
         Ext.create('Ext.grid.Panel', {
             renderTo: Ext.getBody(),
             store: Ext.create('Ext.app.stores.RelativeStore'),
             columns: [{
                 text: 'id',
                 dataIndex: 'id'
             }, {
                 text: 'First Name',
                 dataIndex: 'firstname'
             }]
         });
      });
    </script>
  </body>
</html>

**titusaduxass** · 19 Jun 2012 4:04 AM

After some investigating further I have finally got this working. There were a couple of things causing the problem, most of them from me being a numpty!!

:

1) I originally had two separate stores for the Person data and the Relative data and was creating a new instance of these for each of the grids. This was not correct as just the one Person store can be used and will initialise the Relative data based on the specified child model.

2) I needed to put a proxy onto the Relative model. Without this ExtJS does not know what root / record nodes in the XML relate to each of the fields in the model.

3) Loading stores is an asynchronous process. When specifiying a store directly on a grid, the grid seems to wait until the loading has finished before it renders the grid data. However, when the grid uses a subset of the original store (as in this case), we need to wait until the loading has finished before we can tell the grid what store to use. To do this I simply added an on load listener to the PersonStore and then used grid.reconfigure(ParentStore.getAt(0).relatives()).

Working example can be found at http://www.swiftwind.co.uk/grid_test
Code can be downloaded as a ZIP file at http://www.swiftwind.co.uk/grid_test/grids.zip

SOLVED : Nested Models, Stores and Grids

Thread Tools

Search Thread

Display

SOLVED : Nested Models, Stores and Grids

SOLVED : Nested Models, Stores and Grids

Solved!

Solved!

Tags for this Thread