PDA

View Full Version : ExtJS 4.2 grid loading problem



meyyappan
1 Feb 2014, 4:18 AM
I am developing an application in extjs 4.2. I am trying to load a grid with Store data.
By using Ajax call,store is loaded but showing zero records when i put alert("myStore.getCount()").
But in response of the ajax call json data is returned.No error is shown.
In extjs 3.2.0 same application is working perfectly.i couldn't figure out the reason.can any one please help me on this?

skirtle
1 Feb 2014, 8:14 AM
Please post some code. Your grid configuration and any relevant store and model should be sufficient. A sample of the response data may also be helpful.

meyyappan
3 Feb 2014, 3:06 AM
Hai Skirtle,
Thanks for the reply.I attached screenshots of my application not showing any datas and store is not loading the datas,also my grid and store configuration.

Ext.Loader.setConfig({enabled: true});


Ext.Loader.setPath('Ext.ux', './ext4/js/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);


Ext.onReady(function(){
Ext.tip.QuickTipManager.init();


var additionalParams = "All";
var CID = '';
var IPS = '';
var cmdStatus = "all";
var SDATE = null;
var EDATE = null;
var CIDO = null;


var commandStatusStore = new Ext.data.JsonStore( {
autoLoad : {
params : {
start : 0,
limit : 200,
additionalParams : additionalParams,
corrID : CID,
ipAddress : IPS,
startDate : SDATE,
endDate : EDATE,
corrIdOption : CIDO,
commandStatus : cmdStatus
}
},
proxy : new Ext.data.HttpProxy( {
url : '/projectname/CommandStatus.do'
}),
reader : new Ext.data.JsonReader( {
root : 'scalesstat',
totalProperty : 'resultCount',
remoteSort : true,
idProperty : 'id',
fields : [ {
name : 'id',
mapping : 'id'
}, {
name : 'corrationId',
mapping : 'corrationId'
}, {
name : 'scaleIp',
mapping : 'scaleIp'
}, {
name : 'status',
mapping : 'status'
}, {
name : 'statusDesc',
mapping : 'statusDesc'
}, {
name : 'lastChanged',
mapping : 'lastChanged'
} ]
}),
autoLoad : true
});

commandStatusStore.load(function(records) {
alert("Loaded " + commandStatusStore.getCount() + " records");
});

var commandStatusGrid = new Ext.grid.GridPanel( {
title:'Monitor Status » Command Status',
id : 'command_status_grid',
//autoHeight:true,
stripeRows: true,
trackMouseOver : false,
store : commandStatusStore,
columns : [ new Ext.grid.RowNumberer( {
width : 30
}), {
header : 'Correlation ID',
dataIndex : 'corrationId',
align : 'center',
sortable : true,
width : 110


}, {
header : 'Scale IP',
dataIndex : 'scaleIp',
sortable : true,
align : 'left',
width : 120
}, {
header : 'Command Status',
dataIndex : 'status',
sortable : true,
align : 'left',
width : 140
}, {
header : 'Description',
dataIndex : 'statusDesc',
align : 'left',
width : 300
}, {
header : 'Last Changed',
dataIndex : 'lastChanged',
sortable : true,
align : 'left',
width : 200
} ],
bbar: new Ext.PagingToolbar({
pageSize: 200, // Number of rows per page
store: commandStatusStore, // Pass datastore from above so the toolbar can calculate pages and make calls to load data
displayInfo: true, // Add some additional text to the toolbar
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: 'No records to display'
}),
renderTo: 'topic-grid'
});
commandStatusStore.reload();
});

skirtle
3 Feb 2014, 7:28 AM
Please use [CODE] tags when posting code.

Your fields are in the wrong place. They should be on the model or store, not the reader.

All your code is very Ext 3. I suggest reading some of the Ext 4 data guides to migrate everything across.