model mapping issue with the sub array for grid panel extjs 4

Question

forum members I am having some problem with mapping the json data to my model

my json data I am receiving is given below

{
    "companydata": [{
        "cmpname": "Kintu Designs Pvt ltd.",
        "cmptitle": "Kintu Designs Pvt ltd.",
        "cmpdesc": "<b>Kintu Designs Pvt ltd.</b>",
        "cmpfax": "8128812153",
        "cmpcontact": "8128812153",
        "cmpwebsite": "www.kintudesigns.com",
        "cmpemail1": "[email protected]",
        "cmpemail2": "[email protected]",
        "cmpcountry": "India",
        "cmpstate": "Gujarat",
        "cmpcity": "Surat",
        "cmpaddress": "Kintu Designs Pvt ltd. Nanpura Surat",
        "departments": [{
            "departname": "Programmers",
            "departdescr": "<b>?Programmers</b>",
            "createdby": 1,
            "createdon": 1200022207000,
            "modifiedon": 1200022207000,
            "modifiedby": 1,
            "id": 1
        }],
        "cmplogo": "calendar.png",
        "cmplogopath": "upload/images/",
        "cmpcreatedby": 1,
        "cmpcreatedon": 1200011900000,
        "cmpmodifiedon": 1200011900000,
        "cmpmodifiedby": 0,
        "id": 1
    }],
    "total": 1,
    "success": true
}

my company model is

Ext.define('rms.model.companyModel', {
    extend: 'Ext.data.Model',
    fields : [
              { name: 'id', type: 'int', useNull: true, mapping: 'id'},
              { name: 'cmpname', type: 'string', mapping: 'cmpname'},
              { name: 'cmptitle', type: 'string', mapping: 'cmptitle'},
              { name: 'cmpdesc', type: 'string', mapping: 'cmpdesc'},
              { name: 'cmpfax', type: 'string', mapping: 'cmpfax'},
              { name: 'cmpcontact', type: 'string', mapping: 'cmpcontact'},
              { name: 'cmpwebsite', type: 'string', mapping: 'cmpwebsite'},
              { name: 'cmpemail1', type: 'string', mapping: 'cmpemail1'},
              { name: 'cmpemail2', type: 'string', mapping: 'cmpemail2'},
              { name: 'cmpcountry', type: 'string', mapping: 'cmpcountry'},
              { name: 'cmpstate', type: 'string', mapping: 'cmpstate'},
              { name: 'cmpcity', type: 'string', mapping: 'cmpcity'},
              { name: 'cmplogo', type: 'string', mapping: 'cmplogo'},
              { name: 'cmplogopath', type: 'string', mapping: 'cmplogopath'},
              { name: 'cmpaddress', type: 'string', mapping: 'cmpaddress'},

              { name: 'departname', type: 'string', mapping: 'departments.departname'},
              { name: 'departdescr', type: 'string', mapping: 'departments.departdescr'},
          ]
});

but still I am not able to show the department name in my grid panel. My grid panel is code given below

Ext.define('rms.view.companymgt.companyDetail', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.companydetail',
    id: 'companydetail',
    itemId: 'companydetail',
    store: 'company',
    forceFit: true,
    frame: true,
    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            viewConfig: {


            },
            columns: [{xtype: 'rownumberer', width: 40},
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'cmptitle',
                    text: 'Company Title'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'departname',
                    text: 'Department Name'
                }
        });


        me.callParent(arguments);
    }
});

my grid panel shows the company title correctly, but the departname is not shown in the grid panel.

Please suggest me what's wrong in my above code.

nscrob nscrob · Accepted Answer · 2012-03-28T08:15:02

Well first of all your departments attribute in the json returns an array of departments so you cannot map that to a departmens.departname. I you only have one department (i guess because otherwise you cannot use mapping) you can change the json to have just an object inside departments and the use the mapping.

Another solution is to map to a departments field in your store and save the object inside that field { name: 'departments', mapping: 'departments'},

{
                    xtype: 'gridcolumn',
                    dataIndex: 'departname',
                    text: 'Department Name',
                    renderer: function(value){
                      //if you leave your json like you curently have it 
                      return value[0].departname;
                      //or if you have only a department object
                      return value.departname;
                    }
                }

model mapping issue with the sub array for grid panel extjs 4

1 Answers