The current release of ExtJs 2.1 does not support it.
You can use the function hideItem and showItem in order to show/hide the form field.
Put this function in a javascript file eg. ext-override.js
Then include this file into your html file containing ExtJs form.
Ext.override(Ext.form.Field, {
hideItem :function(){
this.formItem.addClass('x-hide-' + this.hideMode);
},
showItem: function(){
this.formItem.removeClass('x-hide-' + this.hideMode);
},
setFieldLabel: function(text) {
var ct = this.el.findParent('div.x-form-item', 3, true);
var label = ct.first('label.x-form-item-label');
label.update(text);
}
});
2 comments:
Wasn't able to find this.formItem, it's:
this.formItem = Ext.Element(this.getEl()).findParent('.x-form-item');
Ext.override(Ext.form.Field, {
hideItem: function(){
if (this.getForm(this)) {
this.getForm(this).addClass('x-hide-' + this.hideMode);
}
},
showItem: function(){
if (this.getForm(this)) {
this.getForm(this).removeClass('x-hide-' + this.hideMode);
}
},
setFieldLabel: function(text) {
if (this.getForm(this)) {
var label = this.getForm(this).first('label.x-form-item-label');
label.update(text);
}
},
getForm: function() {
return this.el.findParent('.x-form-item', 3, true);
}
});
var caseActivityCombo = new Ext.form.ComboBox({
maxLength: 30,
mode: 'local',
valueField: 'myId',
displayField: 'displayText',
id: 'OPY_METHODPYMT',
triggerAction: 'all',
store: new Ext.data.ArrayStore({
id: 0,
fields: ['myId','displayText'],
data: [
['PAYDED', 'Additional Pay'],
['PAYADDLPAY', 'Paycheck Deduction'],
['CHECK', 'Personal Check']
]}),
selectOnFocus : true,
fieldLabel: 'Method',
readOnly: false,
canEdit: "C",
hideItem: true,
name: 'OPY_METHODPYMT'
});
var caseTextField = new Ext.form.TextField({
fieldLabel: 'First Name',
xtype: 'textfield',
name: 'first',
allowBlank:false,
width: 163,
hideContainer: false
});
var formItem = new Ext.FormPanel({
labelWidth: 75,
name: 'formItem',
renderTo: 'testFormDiv',
frame: true,
title: 'Simple Form for Testing',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaultType: 'textfield',
items: [caseTextField,caseActivityCombo],
buttonAlign: 'left',
buttons: [{
text: ' Show ',
handler: function(){
caseTextField.showItem();
caseTextField.setFieldLabel('Last Name');
}
}]
});
caseTextField.hideItem();
Post a Comment