PDA

View Full Version : blank rows on grouped list updated with JSON data



samuelp
13 Sep 2010, 3:02 PM
Hi,
I'm having some trouble updating a grouped list with JSON data.
I have a store with some data that I initially display in the List. It displays fine, and shows the correct grouping.
Then I get data through a JSONP request and do update on the list. The list shows blank rows for as many rows in the JSON data. If I set grouping to false, then the JSON data gets displayed fine in the list.
Here's my code.



Ext.ns('pic');

Ext.regModel('Project', {
idProperty: 'ProjectId',
fields: ['ProjectId','ProjectNumber','ProjectName','ProjectType','CustomerName','Indicator']
});

pic.ProjectsData = [ ...] //some data provided here

pic.ProjectsStore = new Ext.data.Store({
model: 'Project',
//sorters: 'ProjectNumber',
grouped: true,
getGroupString : function(record) {
return record.get('CustomerName');
},
data: pic.ProjectsData
});


var projectsViewInfo = {
tpl: '<tpl for="."><div class="pic-list-item"><div class="pic-list-tnail" style="background-image: url({Indicator}.png)"/></div><strong>{ProjectName}</strong><p><span class="results">{ProjectType}</span></div></tpl>',
itemSelector: 'div.pic-list-item',
singleSelect: true,
grouped: true,
store: pic.ProjectsStore
};

pic.projectList = new Ext.List(Ext.apply(projectsViewInfo));

pic.myProjects = new Ext.Panel({
title: 'Projects', iconCls: 'maps',
layout: 'card',
cacheSizes: false,
items: [ pic.projectList ],
dockedItems: [{
xtype: 'toolbar',
title: 'Projects',
dock: 'top',
ui: 'dark',
defaults: {
ui: 'mask'
},
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'end'
},
items: [{iconCls: 'search'}, {iconCls: 'refresh', handler: onRefreshTap}]
}]
});

function onRefreshTap() {
Ext.util.JSONP.request({
url: myUrl,
callbackKey: 'callback',
params: myParams,
callback: function(data) {
data = data.PLNLookups.Projects.ProjectRec;

alert (pic.ProjectsStore.getCount());
alert(JSON.stringify(data));
pic.projectList.update(data);
alert (pic.ProjectsStore.getCount());
}
});
}


Note: I have added pic.myProjects as one of the items in a TabPanel


Also, I noticed that the store.getCount() before and after the List.update(data) returns the original count, and not the rows that are part of the data.
Any idea what I need to do to fix this?
Thanks,
Sam

evant
13 Sep 2010, 3:32 PM
You never update the store, so obviously the store count is never going to change!

samuelp
13 Sep 2010, 3:53 PM
That was easy!
I changed
List.update(data);
to
store.loadData(data,false);

Now the data gets shown properly in the grouped list after the JSON query.
Thanks,
Sam