PDA

View Full Version : combo box in grid panel cell



kvdk8_7
25 Jan 2013, 12:21 AM
Hi,

Need an extjs example code which shows combobox when clicking the grid cell, with the values from 1 to what ever the value exists in cell.

Need "age" field for the below example code as combo and with values from 1 to n, the value of "age" grid cell.

---------------------------------------------
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'age'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "age":20},
{"name":"Bart", "email":"bart@simpsons.com", "age":15},
{"name":"Homer", "email":"home@simpsons.com", "age":10},
{"name":"Marge", "email":"marge@simpsons.com", "age":12}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Phone', dataIndex: 'age',
editor: {
xtype: 'combo',
allowBlank: false
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
-----------------------------------------------------------


Using Extjs 4.0.7.
Thanks,
Vamsee

Jad
25 Jan 2013, 12:30 AM
see Ext.grid.plugin.CellEditing

kvdk8_7
25 Jan 2013, 1:50 AM
Hi All,

I got it working with below code:
---------------------
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'age'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "age":20},
{"name":"Bart", "email":"bart@simpsons.com", "age":15},
{"name":"Homer", "email":"home@simpsons.com", "age":10},
{"name":"Marge", "email":"marge@simpsons.com", "age":12}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email', flex:1},
{header: 'Age', dataIndex: 'age',
editor: {
xtype: 'combo',
allowBlank: false,
forceSelection: true,
displayField: 'age'
}
}
],
listeners: {
itemclick : function (thisref, rec, item, index, e) {
var combo = this.columns[2].getEditor();
var tData = [];
for(var i = 1; i <= rec.get("age"); i++) {
tData.push({
age: i
});
}
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore2',
fields:['age'],
data: tData,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
combo.bindStore(Ext.data.StoreManager.lookup('simpsonsStore2'));

}
},
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
------------------------------------
Thanks,
Vamsee