PDA

View Full Version : (3.1.1) Using more than one combo as editor in a grid which are using the same store



canxss
10 Mar 2010, 6:15 AM
Hi,

I have a grid that has nine columns of the same type therefore using same type of combo as editors. The store of this of combo is persistent and used by other components also. So even though I create three instances of this type of combo, they use the same store.

The problem is when I focus on a cell of one of these columns, try to filter the values by typing some text and leave the cell by clicking or tab control, the value is selected on that cell but the other values of the same type columns which isn't in the filtered result disappear.

I prepared an example in order to explain my problem more clearly:



Ext.onReady(function() {

Ext.QuickTips.init();

// sample static data for the store
var myData = [
['3m Co',71.72, 1, 2],
['Alcoa Inc',29.01, 1, 1],
['Altria Group Inc',83.81, 1, 1],
['American Express Company',52.55, 1, 3],
['American International Group, Inc.', 1, 1],
['AT&T Inc.',31.61],
['Boeing Co.',75.43],
['Caterpillar Inc.',67.27],
['Citigroup, Inc.',49.37],
['E.I. du Pont de Nemours and Company',40.48],
['Exxon Mobil Corp',68.1],
['General Electric Company',34.14],
['General Motors Corporation',30.27],
['Hewlett-Packard Co.',36.53],
['Honeywell Intl Inc',38.77],
['Intel Corporation',19.88],
['International Business Machines',81.41],
['Johnson & Johnson',64.72],
['JP Morgan & Chase & Co',45.73]
];

var comboStore = new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [
[ 1, "Food"],
[ 2, "Retail"],
[ 3, "Aerospace"],
[ 4, "Communications"],
[ 5, "Construction"],
[ 5, "Finance"]
]
});

// create the combo instance
var combo1 = {
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
selectOnFocus:true,
lazyRender:true,
mode: 'local',
//valueNotFoundText:'Select Industry...',
store: comboStore,
valueField: 'myId',
displayField: 'displayText'
};

// create the combo instance
var combo2 = {
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
selectOnFocus:true,
lazyRender:true,
mode: 'local',
//valueNotFoundText:'Select Industry...',
store: comboStore,
valueField: 'myId',
displayField: 'displayText'
};

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'industry1'},
{name: 'industry2'}
]
});

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
id: 'pnlGrid',
store: store,
viewConfig: {
forceFit:true,
enableRowBody:true,
},
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{
header: "Industry 1",
dataIndex: 'industry1',
width: 100,
editor: combo1, // specify reference to combo instance
//renderer: Ext.util.Format.comboRenderer(combo), // pass combo instance to reusable renderer
xtype: 'combocolumn'
},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', editor: new Ext.form.NumberField()},
{
header: "Industry 2",
dataIndex: 'industry2',
width: 100,
editor: combo2, // specify reference to combo instance
//renderer: Ext.util.Format.comboRenderer(combo), // pass combo instance to reusable renderer
xtype: 'combocolumn'
}
],
stripeRows: true,
autoExpandColumn: 'company',
title: 'Array Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
tbar: [{
text: 'Load',
handler: function() {
// manually load local data
store.loadData(myData);
},
scope: this
}]
});

var win = new Ext.Window({
width: 650,
height: 300,
layout: 'fit',
items: [ grid ]
});
win.show();
});


Run this example and click the load button. You will see two columns named "Industry 1" and "Industry 2" which are combo columns and using same type of combo that are sharing the same store. Focus and double click the "Industry 1" column of first row in order to show the editor. Then type "aero" and the you will see that "Aerospace" will be listed. Click it to select it and then press tab to focus "Price" column. At that point you should see that the "Retail" value in "Industry 2" column is cleared.

The thing is the store stays filtered by "aero" after the selection. Shouldn't it be cleared? I don't know if this is a bug or not but I wanted to know. Otherwise I have to use different stores for each combo.

Thanks in advance