PDA

View Full Version : Editable grid dynamic Cell update



mahendra_gayatri
20 Feb 2009, 7:37 AM
Hi,

I am trying to update the cell based on selection of a combo value, in the editable grid.

I was able to update the cell successfully with the below code, but..
When I try Update the Editor of the cell from spinner to combo, I am not able to get it back into any other type of editor.

PLEASE HELP!!



function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;

// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: 'indoor',
width: 55
});

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var store_val = new Ext.data.SimpleStore({
fields: ['abbr', 'val'],
data : new Array([1,'MINOR'],[2,'MAJOR'],[3,'MEDIUM'],[4,'CRITICAL'],[5,'URGENT'])
});
var combo_value = new Ext.form.ComboBox({
store: store_val,
editable :false,
displayField:'val',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'values..',
selectOnFocus:true,
width:120
});

var store_optr = new Ext.data.SimpleStore({
fields: ['abbr', 'optr'],
data : new Array([1,'>'],[2,'<'],[3,'='],[4,'!='])
});
var combo_optr = new Ext.form.ComboBox({
store: store_optr,
editable :false,
displayField:'optr',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Operator...',
selectOnFocus:true,
width:120
});

var store_columns = new Ext.data.SimpleStore({
fields: ['abbr', 'column_name'],
data : new Array([1,'severity'],[2,'cond_prob'],[3,'name'])
});
var combo_columns = new Ext.form.ComboBox({
store: store_columns,
editable :false,
displayField:'column_name',
typeAhead: true,
mode: 'local',
transform:'light',
lazyRender:true,
triggerAction: 'all',
emptyText:'column...',
selectOnFocus:true,
width:120,
listeners:{
select:function(combo, record, index){

var col_ind = 2;

if (combo.getValue() == 'name') {
cm.setEditor(col_ind, new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: true
})))
}else if(combo.getValue() == 'cond_prob'){
cm.setEditor(col_ind, new Ext.grid.GridEditor(new Ext.ux.form.Spinner({
fieldLabel: 'Refresh Rate in Seconds',
id: 'refreshRateSpinner',
editable :false,
value: 60,
name: 'refresh rate',
strategy: new Ext.ux.form.Spinner.NumberStrategy({
xtype: 'number',
minValue: '1',
maxValue: '100'
})
})))
}
else


if (combo.getValue() == 'severity') {
cm.setEditor(col_ind, new Ext.grid.GridEditor(combo_value));
}
}
}
});
var comm = {
id:'column_name',
header: "Column Name",
dataIndex: 'column_name',
width: 120,
editor: combo_columns
};


var cm = new Ext.grid.ColumnModel([comm,{
header: "Operator",
dataIndex: 'price',
width: 80,
editor: combo_optr
},{
header: "Value",
dataIndex: 'light',
width: 100
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkColumn
]);

// by default columns are sortable
cm.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'column_name', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);

// create the Data Store
var store1 = new Ext.data.Store({

reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),
autoLoad:false
});

var p = new Plant({
column_name: '',
light: '',
price: '',
availDate: (new Date()).clearTime(),
indoor: false
});
store1.insert(0, p);

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store1,
cm: cm,
renderTo: 'editor-grid',
width:450,
height:70,
//autoExpandColumn:'column_name',
//title:'Edit Plants?',
frame:false,
plugins:checkColumn,
clicksToEdit:1
});

// trigger the data store load
store1.load();
});

walldorff
20 Feb 2009, 3:23 PM
I've seen several posts about updating a grid cell depending on the action in another cell. So please take your time for this and do several proper searches in this forum.