View Full Version : Combobox boundlist overwrites store

8 May 2014, 9:54 PM

I have inherited some extjs4.1 code that builds a paginated table (based on panel).
When there only one instance is created on screen everything works well, but when 2 or more instances are created, all lists use the same store for the pagesize combobox.
I am not an ext expert, but I do understand javascript.

I create a page with 2 paginated tables.
When the page is loaded and I query
Ext.ComponentManager.all I see 2 instances of my Panel, 2 instances of my Combobox and 2 instances of my store (each with their respective and correct values).
There are no instances of a boundlist yet since these are created when the combobox is first clicked.
What I see in the debugger is that when the combobox of the first table is clicked, the boundlist is created. When I now check the values for the store attached to the combobox, I see that its values have been overwritten using the values of the second store.
This always happens, all stores are overwritten using the values of the latest created store.

I have been debugging for some time now, but I do not see where the stores are overridden or why they are overridden.

Can someone help me or point me in the right direction?

EDIT: I have noticed that the proxy for both stores contains the data of the last store.

Here is the relevant code that creates the toolbar with the combobox.

Ext.define('agf.ria.datagrid.PagingToolbarDefinition', {

defaultConfig: {
xtype: 'pagingtoolbar',
dock: 'bottom',
firstText: 'First',
lastText: 'Last',
nextText: 'Next',
prevText: 'Previous',
refreshText: 'Refresh',
beforePageText: 'Page',
cls: 'pagingToolbar',
componentCls: 'pagingToolbarComponent',
afterPageText: 'of',
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: 'No data to display',
displayInfo: true

defaultSizeCombo: {
fieldLabel: 'Results per page',
possibleRecordCount: [50, 100, 150, 200],
width: 50,
id: 'sizeCombo'

constructor: function(config) {
Ext.apply(this.config, config, this.defaultConfig);
this.config.afterPageText = this.config.afterPageText + ' {0}';

this.sizeCombo = {};
Ext.apply(this.sizeCombo, config.sizeCombo, this.defaultSizeCombo);

this.config.items = this.createPageSizeCombo();

createPageSizeCombo: function() {
var me = this;
var items = ['-', { xtype: 'tbfill' }, me.sizeCombo.fieldLabel + ':'];
var combo = Ext.create('Ext.form.ComboBox', {
id: me.sizeCombo.id + '_combo',
xtype: 'combo',
valueField: 'size',
displayField: 'size',
margins: '-1 2 3 2',
submitValue: false,
width: me.sizeCombo.width,
editable: false,
autoSelect: true,
value: me.config.store.pageSize,
listeners: {
select: function(combo, records, eOpts) {
var size = records[0].data.size;
me.config.store.pageSize = size;
var data = [];
Ext.each(me.sizeCombo.possibleRecordCount, function(size) {
data.push({ size: size});

var store = Ext.create('Ext.data.Store', {
id: me.sizeCombo.id + '_store',
model: 'agf.ria.datagrid.PageSize',
data: data,
autoLoad: true
combo.store = store;


return items;


Ext.define('agf.ria.datagrid.PageSize', {
extend: 'Ext.data.Model',
fields: [{ name: 'size', type: 'int' }],
proxy: { type: 'memory' }

8 May 2014, 10:58 PM
Quite difficult to narrow it down as there's a lot of code written in a non-Ext style.

The most obvious problem is the way the store is being poked into the combobox after it has been created. You can't just assign it to the property, it needs to be bound. I suspect you're accidentally sharing the default 'empty' store. The simplest solution would be to create the store first and then pass it in as a config option to the combobox.

8 May 2014, 10:59 PM
Looking at your code I would say your storeId's are all the same. (id = storeId)

I believe that is your issue.

id: me.sizeCombo.id + '_store',

26 May 2014, 11:38 PM

Skirtle's answer gave me to the solution.
I refactored a lot of the code to make sure everything had it's own id and was created explicitly.