PDA

View Full Version : load mask on form field



raj_plays
14 Mar 2011, 10:35 PM
Hi,
My form panel has state and city combo boxes. I want to show a load mask on the city combo after a state has been selected and while the city store gets loaded. The code below gives an error.
Please help.


var stateDataStore = new Ext.data.Store({
..........
autoLoad: true
});

var cityDataStore = new Ext.data.Store({
..........
});

var dealForm = new Ext.FormPanel({
id: 'dealForm',
items: [{
id: 'title',
fieldLabel: 'Title',
allowBlank: false,
maxLength: 256
}, {
id: 'state',
hiddenName: 'state',
xtype: 'combo',
store: stateDataStore,
mode: 'local',
triggerAction: 'all',
typeAhead: true,
displayField: 'name',
valueField: 'id',
forceSelection: true,
allowBlank: false,
fieldLabel: 'State',
listeners: {
select: {
fn: function (combo, value) {
var cmbCity = Ext.getCmp('city');
cmbCity.clearValue();
cmbCity.setDisabled(false);
cmbCity.store.reload({
params: {
state_id: combo.getValue()
}
});
}
}
}
}, {
id: 'city',
hiddenName: 'city',
xtype: 'combo',
store: cityDataStore,
mode: 'local',
triggerAction: 'all',
typeAhead: true,
displayField: 'name',
valueField: 'id',
forceSelection: true,
disabled: true,
allowBlank: false,
fieldLabel: 'City'
}
....
});

..........

//After the form window is shown, I have

new Ext.LoadMask(Ext.getCmp('city'), {store: cityDataStore});

18 Mar 2011, 8:22 AM
Try this:



new Ext.LoadMask(Ext.getCmp('city').getEl(), {store: cityDataStore});

raj_plays
21 Mar 2011, 3:25 AM
I tried it. It gives an "invalid target element for this operation" error.