PDA

View Full Version : Form item xtype:'form'



bauchinj
1 Dec 2009, 12:24 AM
Hello!




layout:'form',
items : [{
xtype : 'checkbox'
name : 'dhcp',
id : 'dhcp'
},{
xtype : 'form',
border : true,
id : 'ipSubnetGateway',
padding : 10,
items : [{
xtype : 'textfield',
name : 'ipadress',
id : 'ipadress',
vtype : 'ip'
},{
xtype : 'textfield',
name : 'subnetmask',
id : 'subnetmask',
vtype : 'netmask'
},{
xtype : 'textfield',
name : 'standardGateway',
id : 'standardGateway',
vtype : 'ip'
}]
}]


http://www.tutorials.de/forum/attachment.php?attachmentid=49835&stc=1&d=1259655198

I'd like to get following:

http://www.tutorials.de/forum/attachments/javascript-ajax/49836d1259655198-extendedform.jpg?stc=1

So I think the problem is the form in the form, but don't know how to realize something like that!

Hope somebody can help me!

bauchinj
1 Dec 2009, 2:51 AM
I now work on following:

I set xtype:'fieldset' and checkboxToggle:true.

Now it looks like I'd like to, BUT am I able to invert checkboxvalue, so ip - netmask - gateway are shown, when dhcp is disabled?

Look up the forum, google,... but still don't found anything!


Hope someone can answer.

LutzAlbers
1 Dec 2009, 5:14 AM
UTSL shows me that the 'click' event fires the onCheckClick method of you fieldset object. You need to override that with your own method and enable/disable the child controls in that method. Something like:


checkboxToggle: true,
onCheckClick: function() {
// do your stuff here
},

bauchinj
1 Dec 2009, 5:18 AM
That did I already do, but I'd like to show the textfields, when DHCP is disabled (not marked), but everytime I toggle collapsed and expanded, the checkbox is also toggled (and I don't want to....) .

Hope you can help me!


kind regards!
bauchinj

LutzAlbers
1 Dec 2009, 5:28 AM
Then do something like this in your handler:


onCheckClick: function() {
var checked = this.checkbox.dom.checked;
Ext.getCmp('ipadress').setDisabled(!checked);
// do the same for the other fields
}

bauchinj
1 Dec 2009, 5:43 AM
Nice! Thank you very much!

Here is the solution:


onCheckClick : function(){
var checked = this.checkbox.dom.checked;

if(checked == true){
this.collapse(false);
this.checkbox.dom.checked = true;
}
if(checked == false){
this.expand(false);
this.checkbox.dom.checked = false;
}
},


Now it's perfect :D