PDA

View Full Version : How to iterate through grid to disable the components in it?



dev_java
17 Mar 2011, 4:56 AM
Hi,

I am facing problem in iterating through the grid and disabling few components of in a particular row.

I have a grid with two rows. At first all components in grid will be disabled. On load of store, based on some condition, i have to enable just last three cells in the first row.

Since i am enabling the components on store load, all the cells are getting enabled... Even i have changed the cls to reflect the disabled effect.. thats working. But actual disabling of textfield is not happening.

Code goes like this


vvar stateGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store: stateStore,
columns: [
{
header: "ID",
id:'MID',
disabled:true,
width:50,
dataIndex: 'MID'
},
{
header: "State",
width:50,
dataIndex: 'stateVal',
editor:new fm.TextField({
id:'stateVal',
disabled : true
}),
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.css = 'x-grid-disabled';
return value;
}
},
{
header: "Process",
disabled:true,
width:50,
dataIndex: 'processVal',
editor:new fm.TextField({
id:'processVal',
disabled : true
}),
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.css = 'x-grid-disabled';
return value;
}
},
{
header: "Book",
disabled:true,
width:50,
dataIndex: 'bookVal',
editor:new fm.TextField({
id:'bookVal',
disabled : true
}),
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.css = 'x-grid-disabled';
return value;
}
}

],
defaultSortable:false,
trackMouseOver : false,
enableColumnMove: false,
bodyStyle:'padding-bottom: 5px;',
loadMask:{
msg:'Loading...'
},
view:new Ext.grid.GridView({
emptyText:'State Data Not Available',
forceFit: true,
scrollOffset: 0,
forceFit:true,
markDirty : false
})
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
stateGrid.superclass.initComponent.apply(this, arguments);

}
,onRender:function() {
stateGrid.superclass.onRender.apply(this, arguments);
}
});


Store on load


stateStore.on({
'load':{
fn: function(store, records, options){
var ioState= Ext.getCmp('ModuleState').getValue();
var cell;
var element;
if(isModify && ioState == 'enable'){
Ext.getCmp('stateVal').enable();
Ext.getCmp('processVal').enable();
Ext.getCmp('bookVal').enable(); // this enables the columns in both the rows.
for(var i=1; i<=3 ; i++){
//trying to get cells from 1to 3 in row 1
var cell = Ext.getCmp('stateGrid').getView().getCell(1, i);
var el = Ext.get(cell);
el.disabled(true); // this portion is not working. I am not able to disable the columns 1,2, 3 in 2nd row

}
}

},
scope:this
}
});


Can any one pls help me on this??

rivarecords
17 Mar 2011, 5:23 AM
stateStore.on({
'load':{
fn: function(store, records, options){
var ioState= Ext.getCmp('ModuleState').getValue();
var cell;
var element;
if(isModify && ioState == 'enable'){
Ext.getCmp('stateVal').enable();
Ext.getCmp('processVal').enable();
Ext.getCmp('bookVal').enable(); // this enables the columns in both the rows.

Ext.each(store.getRange(0, store.getCount()), function(row,index){
for(var i=1; i<=3 ; i++){
//trying to get cells from 1to 3 in row 1
var cell = Ext.getCmp('stateGrid').getView().getCell(index, i);
var el = Ext.get(cell);
el.disabled(true);
}
})

}

},
scope:this
}
});

dev_java
17 Mar 2011, 10:04 PM
Hi,

Thanks for your suggestion. But still i am getting the same problem.



el.disabled is not a function for the line

el.disabled(true);

disable/disabled function is not applicable to element. Is there any way to get the component , i mean the textfield present in the grid, so that component can be disabled?

rivarecords
18 Mar 2011, 3:56 AM
Sorry, I didn't test it. I didn't think that would work.
This should disable the cell:




var cell = Ext.getCmp('stateGrid').getView().getCell(index, i);
cell.disabled=true;



If you want to disable the editor, try:




var editor = Ext.getCmp('stateGrid').getColumnModel().getCellEditor(i,index);
editor.setDisabled(true);

saranya venkatesan
17 Jul 2014, 5:59 AM
var storeData = Ext.ComponentQuery.query('#gridId')[0].getStore();
var cell ;
cell =Ext.ComponentQuery.query('#gridId')[0].getView().getCell(storeData.getAt(0),
Ext.ComponentQuery.query('#gridId')[0].headerCt.child('#appr'));
// cell.disable ();
// cell.setDisabled(true)
// cell.disabled=true;


All the above seems to give 'Object doesn't support this property or method '. I tried the Ext.each loop mentioned in the previous solutions also and I face the same issue