PDA

View Full Version : Define CellEditing numberfield step value for each row in a Grid



grumpus
3 Apr 2012, 2:36 PM
We're considering implementing ExtJS 4 in our next project, but our initial tests of the library have come up with some potential limitations of the CellEditing Grid plugin.

One thing we would like to accomplish is to create a grid into which the user will be able to enter a long list of numbers. Ext.grid.plugin.CellEditing works well for this purpose, especially when combined with the numberfield form element. API documentation points out that config parameters for the editor should be set in the definition of the grid column, like so:


{
header : 'Numbers',
dataIndex : 'number',
field : {
xtype : 'numberfield',
allowDecimals : false,
minValue : 0,
step : 25,
selectOnFocus : true
}
}

Is there a way to define the "step" parameter dynamically, i.e. set it to a different value for each row, based on the value of another field in the record?

Any help will be appreciated.

scottmartin
3 Apr 2012, 4:43 PM
There is not a function that I can see, but you can always create a simple override such as:



// simple override
Ext.override(Ext.form.field.Number,{
setStep: function(step) {
var me = this;
me.step = step;
}
});

// test override
Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
id: 'stepfield', // using id for demo, ugh
anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
value: 10,
maxValue: 99,
minValue: 0
}],
buttons: [{
text: 'Take one down, pass it around',
handler: function() {
this.up('form').down('[name=bottles]').spinDown();
}
},
{
text: 'Increase Step',
handler: function() {
var ned = Ext.getCmp('stepfield');
ned.setStep(20);

}
}
]
});


Regard,
Scott.