Extjs Grid with data from json object with sorting

0
votes

I am trying to display a grid. In this sorting is not working. Here is my code.

    <div id="grid-sample"></div>
    <script type="text/javascript">
        Ext.create('Ext.data.Store', {
            storeId:'cstore',
            fields:['user', 'age', 'place'],
            data: [
                        {"user":"joe","age":27,"place":"sydney"},
                        {"user":"abel","age":29,"place":"delhi"},
                        {"user":"fin","age":18,"place":"san jose"}
                    ]

        });

        Ext.create('Ext.grid.Panel', {
            title: 'Sample grid',
            store: Ext.data.StoreManager.lookup('cstore'),
            autoCreateViewPort: false,
            layout: 'fit',
            columns: [
                { text: 'Name', xtype: 'templatecolumn', tpl: '{user}' ,sortable : true },
                { text: 'Age', xtype: 'templatecolumn', tpl: '{age}' ,sortable : true },
                { text: 'Place', xtype: 'templatecolumn', tpl: '{place}',sortable : true  }
            ],
            width: 750,
            renderTo: 'grid-sample'
        });
    </script>
2
extjsextjs4.1

2 Answers

0
votes

You need to add dataIndex for sorting to work.

So your columns will look like,

 columns: [
   { text: 'Name', xtype: 'templatecolumn',tpl: '{user}',dataIndex: 'user' ,sortable : true },
   { text: 'Age', xtype: 'templatecolumn', tpl: '{age}',dataIndex: 'age' ,sortable : true },
   { text: 'Place',xtype: 'templatecolumn', tpl: '{place}', dataIndex :'place',sortable : true  }]

Where the value of dataIndex should match with field name in the store.

1
votes

what if dataIndex should not refer to a field but to a property of an object? So the data from above could be 

data: [{{"user":"joe",userName:"Joeschmoe"},"age":27,"place":"sydney"},
{{"user":"Jane",userName:"Jany"},"age":29,"place":"delhi"},
{{"user":"Mary",userName:"mary123"},"age":18,"place":"san jose"}
]