ExtJS QuickTip: Display other levels of a JSON object in a Grid
You can display an item anywhere in a JSON heirarchy/level in a Grid by using dot notation. I am beginning to like JSON as it is simply practical and amazing. To fully understand, please see geometry.type as an example.
{ "type": "FeatureCollection", "recordcount":6, "features": [ { "type":"Feature", "geometry":{ "type": "MULTIPOLYGON", "coordinates": [[[[116.368603,39.944314],[116.381069,39.94464],[116.388765,39.940265],[116.390376,39.939124],[116.391203,39.934381],[116.391784,39.930743],[116.387262,39.930638],[116.387507,39.93289],[116.383032,39.932688],[116.382581,39.933204],[116.37197,39.940531],[116.368603,39.944314]]]] }, "gid":16055, "cn_name":"后海", "py_name": "hou hai" } , { "type":"Feature", "geometry":{ "type": "MULTIPOLYGON", "coordinates": ....} |
Here is the DataStore…
cs.GridPlace = function(){ var _placeDataStore = new Ext.data.Store({ // create reader that reads the Topic records reader: new Ext.data.JsonReader({ root: 'features', totalProperty: 'recordcount', id: 'gid', fields: [ 'cn_name', 'py_name', 'geometry.type' ] }) }); // the column model has information about grid columns // dataIndex maps the column to the specific data field in // the data store var cm = new Ext.grid.ColumnModel([{ id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "CN_NAME", width: 100, dataIndex: 'cn_name' },{ id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "PY_NAME", width: 100, dataIndex: 'py_name' },{ id: 'gid', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 }) header: "GEOMTYPE", width: 100, dataIndex: 'geometry.type' } ]); |