Forum /
Ext JS Community Forums 3.x /
Ext 3.x: Help & Discussion /
Combobox is not rendering in EditorGrid Panel
Combobox is not rendering in EditorGrid Panel
Hi,
I have put the combox in EditorGridPanel. The combobox is not rendering after loading the page. User has to click on the cell to make it visible and to edit it. I have a requirement to make it visible after EditorGridPanel loads on the page. The same issue is with Ext.Form.TextArea. Following is the code.
var grid = new xg.EditorGridPanel({
id: "reasonGrid",
store: store,
cm : cm ,
view: new Ext.grid.GridView({
forceFit: true
}),
plugins: summary,
frame: true,
autoHeight: true,
autoWidth: true,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false,
//enableColumnMove: false,
title: 'Reason List',
iconCls: 'icon-grid',
renderTo: 'reasonGrid',
columnLines: true,
border: true,
stripeRows: true
});
// set up namespace for application
Ext.ns('app.grid');
var reasonCombo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:false,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'reasonCode',
'reasonName'
],
data: [['DUPLICATE BILL', 'Duplicate Bill'], ['FUEL', 'Fuel'], ['WRONG ADDRESS', 'Wrong Address'], ['WRONG CUSTOMER', 'Wrong Customer'], ['WRONG RATE', 'Wrong Rate'], ['WRONG WEIGHT', 'Wrong Weight']]
}),
valueField: 'reasonCode',
displayField: 'reasonName',
valueNotFoundText: 'Select one',
editable:false,
forceSelection: true
});
Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.ComboRenderer = function(options) {
var value = options.value;
var combo = options.combo;
var returnValue = value;
var valueField = combo.valueField;
var idx = combo.store.findBy(function(record) {
if(record.get(valueField) == value) {
returnValue = record.get(combo.displayField);
return true;
}
});
if(idx < 0 && value == 0) {
returnValue = '';
}
return returnValue;
};
Ext.ux.renderer.Combo = function(combo) {
return function(value, meta, record) {
return Ext.ux.renderer.ComboRenderer({value: value, meta: meta, record: record, combo: combo});
};
}
var cm = new Ext.grid.ColumnModel([
{
header: "Reason",
width: 35,
dataIndex: 'reason',
renderer: Ext.ux.renderer.Combo(reasonCombo),
editor: reasonCombo,
tooltip: 'Click to edit'
},{
header: 'Comments',
width: 50,
sortable: true,
dataIndex: 'comments',
editor :new Ext.form.TextArea({
allowBlank: true,
autoHeight: true,
autoScroll: true,
maxLength: 240,
validationDelay: 0
}),
tooltip: 'Click to edit'
}
]);
How to fix this issue. Kindly help me.
Thanks,
Aditya
Sencha is used by over two million developers. Join the community, wherever you’d like that community to be
or Join Us