PDA

View Full Version : ExtJS 4.1 Paging Grid (Maybe with search in future)



Yura.Luchkiv
31 Dec 2012, 5:22 AM
Hi.
I want to do some paging grid with this requirements:
1) grid will be populated by some event (tree node click)
2) grid must be dymanic (columns)
But I couldn't do simple grid. :(( This is my code (function to create grid):

function initPropertiesGrid(propertiesGridDiv) {
gridStore = Ext.create('Ext.data.Store', {
autoLoad: true,
pageSize: 5,
fields: ['propertyName', 'value', 'unit', 'dataType', 'description'],
proxy: {
type: 'jsonp',
url: 'http://localhost:8081/server/service/hierarchy/table/array|600A0B800036AC3500000000477D00CF.json',
reader: {
root: 'tableRows',
totalProperty: 'totalCount'
},
simpleSortMode: true
}
});

// create properties grid
gridPanel = Ext.create('Ext.grid.GridPanel', {
store: gridStore,
bbar: new Ext.PagingToolbar({
store: gridStore,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: "No items to display",
prependButtons: true,
items: [
'-'
]
}),
stateful: true,
reconfigure: function(store, columns) {
var me = this;
if (me.lockable) {
me.reconfigureLockable(store, columns);
return;
}
if (columns) {
me.headerCt.removeAll();
me.headerCt.add(columns);
}
if (store) {
store = Ext.StoreManager.lookup(store);
me.bindStore(store);
} else {
me.getView().refresh();
}
},
columns: [
{ header: 'propertyName', dataIndex: 'propertyName', flex:1 },
{ header: 'value', dataIndex: 'value'},
{ header: 'unit', dataIndex: 'unit'},
{ header: 'dataType', dataIndex: 'dataType'},
{ header: 'description', dataIndex: 'description', flex:1}
],
height: 700,
width: 1153,
renderTo: propertiesGridDiv,
viewConfig: {
stripeRows: true
}
});
gridStore.loadPage(1);
return gridPanel;
}

This is JSON i get from server:

{
"tableHeaders": [
{
"title": "propertyName",
"columnName": "tableCells.getItemAt(0).value",
"visibility": true,
"sortable": true,
"defaultSorted": true,
"columnIndex": 1,
"type": null
},
{
"title": "value",
"columnName": "tableCells.getItemAt(1).value",
"visibility": true,
"sortable": true,
"defaultSorted": false,
"columnIndex": 2,
"type": null
},
{
"title": "unit",
"columnName": "tableCells.getItemAt(2).value",
"visibility": true,
"sortable": true,
"defaultSorted": false,
"columnIndex": 3,
"type": null
},
{
"title": "dataType",
"columnName": "tableCells.getItemAt(3).value",
"visibility": true,
"sortable": true,
"defaultSorted": false,
"columnIndex": 4,
"type": null
},
{
"title": "description",
"columnName": "tableCells.getItemAt(4).value",
"visibility": true,
"sortable": true,
"defaultSorted": false,
"columnIndex": 5,
"type": null
}
],
"tableRows": [
{
"tableCells": null,
"propertyName": "20090605105204.000000-240",
"value": "20090605105204.000000-240",
"unit": "20090605105204.000000-240",
"dataType": "20090605105204.000000-240",
"description": "20090605105204.000000-240"
},
{
"tableCells": null,
"propertyName": "N1726D340R335V05",
"value": "N1726D340R335V05",
"unit": "N1726D340R335V05",
"dataType": "N1726D340R335V05",
"description": "N1726D340R335V05"
},
{
"tableCells": null,
"propertyName": "15",
"value": "15",
"unit": "15",
"dataType": "15",
"description": "15"
},
{
"tableCells": null,
"propertyName": "256",
"value": "256",
"unit": "256",
"dataType": "256",
"description": "256"
},
{
"tableCells": null,
"propertyName": "64",
"value": "64",
"unit": "64",
"dataType": "64",
"description": "64"
},
{
"tableCells": null,
"propertyName": "128",
"value": "128",
"unit": "128",
"dataType": "128",
"description": "128"
},
{
"tableCells": null,
"propertyName": "4",
"value": "4",
"unit": "4",
"dataType": "4",
"description": "4"
},
{
"tableCells": null,
"propertyName": "LSISSI",
"value": "LSISSI",
"unit": "LSISSI",
"dataType": "LSISSI",
"description": "LSISSI"
},
{
"tableCells": null,
"propertyName": "1932",
"value": "1932",
"unit": "1932",
"dataType": "1932",
"description": "1932"
},
{
"tableCells": null,
"propertyName": "VN IBM",
"value": "VN IBM",
"unit": "VN IBM",
"dataType": "VN IBM",
"description": "VN IBM"
},
{
"tableCells": null,
"propertyName": "1726-4xx FAStT",
"value": "1726-4xx FAStT",
"unit": "1726-4xx FAStT",
"dataType": "1726-4xx FAStT",
"description": "1726-4xx FAStT"
},
{
"tableCells": null,
"propertyName": "SN 130703F",
"value": "SN 130703F",
"unit": "SN 130703F",
"dataType": "SN 130703F",
"description": "SN 130703F"
},
{
"tableCells": null,
"propertyName": "PN 39R6545",
"value": "PN 39R6545",
"unit": "PN 39R6545",
"dataType": "PN 39R6545",
"description": "PN 39R6545"
},
{
"tableCells": null,
"propertyName": "3347",
"value": "3347",
"unit": "3347",
"dataType": "3347",
"description": "3347"
},
{
"tableCells": null,
"propertyName": "558",
"value": "558",
"unit": "558",
"dataType": "558",
"description": "558"
},
{
"tableCells": null,
"propertyName": "17.0",
"value": "17.0",
"unit": "17.0",
"dataType": "17.0",
"description": "17.0"
},
{
"tableCells": null,
"propertyName": "lsi",
"value": "lsi",
"unit": "lsi",
"dataType": "lsi",
"description": "lsi"
}
],
"totalCount": 17,
"success": true
}


But I only get the grid with NO data and loading icon, which 'loading' for several second and the disapear and no error or some warning get.
Please help me :)

mitchellsimoens
2 Jan 2013, 8:24 AM
Check the root config of your reader and the actual root in your JSON.

Also, please post code within BBCode CODE tags.