A enable/disable a textfield in ColumnModel dynamically

[priyapratheep]

Hi,

The below is part of my code

var cm = new Ext.grid.ColumnModel([
{id: 'screenname' ,header: "Band Name" ,dataIndex: 'screenName' ,width: 120 ,editable:false, editor: new Ext.form.TextField({allowBlank: false})}

tbar: [{
text: 'Add New Band',
iconCls:'icon-plus',
handler: function() {
var loc = new bandObj({
id: '-1',
screenName: 'Enter a new Band...',

When i click the 'icon-plus' icon a new line will append in the grid with id -1.

What is want is screenName field should be enabled when a new line is added. otherwise the screenName field should be disabled.

That is screenName field should be enabled for the new line (adding a record) and disabled for the rest(no updation is allowed)

I am usingExt.grid.EditorGridPanel

I am new bie to EXTS. started three week before.

Pls help

[scottmartin]

See if this is what you are looking for:




Ext.onReady(function(){

Ext.QuickTips.init();

// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

Ext.define('company',{
extend: 'Ext.data.Model',
idProperty: 'company',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'company',
data: myData
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(edit,opt){
if (opt.record.index !== undefined) { // no index; abort
return false;
}
}
}

});

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
multiSelect: true,
tbar: [{
text: 'Add record',
handler: function(){
// Create a model instance
var rec = Ext.create('company', {
company: 'New Company',
price: 0,
pctChange: 0,
lastChange: Ext.Date.clearTime(new Date()),
});
store.insert(0, rec);
cellEditing.startEditByPosition({row: 0, column: 0});
}
}],
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
editor : {
xtype: 'textfield'
}
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
editor : {
xtype: 'textfield'
}
},
{
text : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
text : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
text : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody(),
viewConfig: {
stripeRows: true
//enableTextSelection: true
},

plugins: [cellEditing]
});


});


Regards,
Scott.