Code:
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