DrunkenBeard
16 Oct 2011, 2:22 AM
Hi there,
First, here's the code I'm using to populate my grouped list :
Model :
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: 'app/remote/GetData.php',
reader: {
type: 'json',
root: 'users'
}
}
});
Store :
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
requires: 'App.model.User',
model: 'App.model.User',
sorters: 'name',
getGroupString : function(record) {
return record.get('name')[0]
}
});
List :
Ext.define('App.view.users.List', {
extend: 'Ext.List',
xtype: 'userslist',
config: {
flex: 1,
store: 'Users',
itemTpl: '{name}',
grouped: true,
indexBar: true
}
});
List controller where the loading gets done :
Ext.define('App.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
init: function() {
this.control({
'#reload': {
tap: this.loadUsersStore
}
});
},
loadUsersStore: function() {
var usersStore = this.getUsersStore();
usersStore.load();
}
});
If you read the controller code you'll notice that I'm listening to the 'tap' event on a button and then loading the store. When I click on that '#reload' button it does the job indeed, but when I click on it again it creates double headers for my groups, then triple if I click again, and so on ... Here's a picture :
28695
I investigated the problem and it seems this is the faulty part of the framework :
findGroupHeaderIndices: function() {
// Some stuff
// Add header to an item if needed
for (; i < groupLn; i++) {
firstGroupedRecord = groups[i].children[0];
index = store.indexOf(firstGroupedRecord);
// This is always true. For some reason even if firstGroupedRecord does belong to previousHeadersIndices the 'indexOf' method returns -1
if (previousHeaderIndices.indexOf(firstGroupedRecord) == -1) {
me.doAddHeader(items[index], store.getGroupString(firstGroupedRecord));
}
newHeaderIndices.push(firstGroupedRecord);
}
}
Hope it helps :)
First, here's the code I'm using to populate my grouped list :
Model :
Ext.define('App.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: 'app/remote/GetData.php',
reader: {
type: 'json',
root: 'users'
}
}
});
Store :
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
requires: 'App.model.User',
model: 'App.model.User',
sorters: 'name',
getGroupString : function(record) {
return record.get('name')[0]
}
});
List :
Ext.define('App.view.users.List', {
extend: 'Ext.List',
xtype: 'userslist',
config: {
flex: 1,
store: 'Users',
itemTpl: '{name}',
grouped: true,
indexBar: true
}
});
List controller where the loading gets done :
Ext.define('App.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
init: function() {
this.control({
'#reload': {
tap: this.loadUsersStore
}
});
},
loadUsersStore: function() {
var usersStore = this.getUsersStore();
usersStore.load();
}
});
If you read the controller code you'll notice that I'm listening to the 'tap' event on a button and then loading the store. When I click on that '#reload' button it does the job indeed, but when I click on it again it creates double headers for my groups, then triple if I click again, and so on ... Here's a picture :
28695
I investigated the problem and it seems this is the faulty part of the framework :
findGroupHeaderIndices: function() {
// Some stuff
// Add header to an item if needed
for (; i < groupLn; i++) {
firstGroupedRecord = groups[i].children[0];
index = store.indexOf(firstGroupedRecord);
// This is always true. For some reason even if firstGroupedRecord does belong to previousHeadersIndices the 'indexOf' method returns -1
if (previousHeaderIndices.indexOf(firstGroupedRecord) == -1) {
me.doAddHeader(items[index], store.getGroupString(firstGroupedRecord));
}
newHeaderIndices.push(firstGroupedRecord);
}
}
Hope it helps :)