PDA

View Full Version : Ext.form.FieldSet does not expand dynamically



Vinni
11 Aug 2010, 12:21 PM
Hi,

In my project, I have the requirement where on initialization Fieldset remain collapsed or expand depending on a boolean value.


var fieldsetxyz = new Ext.form.FieldSet({
plugins:new jnpr.plugin.FieldSetAutoId(),
id: 'features',
collapsed:true, //By default fieldset is collapsed
checkboxToggle:true,
height: 70,
width: 600,
disable: true,
... }After setting
Ext.getCmp('features').checkbox.dom.checked = true; fieldsetxyz is not getting expanded.

Could some one please tell me what's the correct way to expand or collapse a Fieldset?
Note: I'm not collapsing/expanding by clicking toggle button here!

Thanks,
Vinni

Jack9
11 Aug 2010, 1:10 PM
If you are generating Javascript from PHP, try not to get them confused.

All of this code is Javascript. There is no PHP, per se.



Ext.onReady(function(){
var fieldsetxyz = new Ext.form.FieldSet({
plugins:[
// new jnpr.plugin.FieldSetAutoId() //no idea what this is or where to get it
],
id: 'features',
collapsed:true, //By default fieldset is collapsed
checkboxToggle:true,
fieldLabel:'test',
height: 70,
width: 600,
disable: true,
});
var panel = new Ext.Panel({
frame:true
,title:'Test'
,autoHeight:true
,autoWidth:true
,renderTo:document.body
,items:[
fieldsetxyz
,new Ext.Button({
text:'expand or collapse',
handler:function(){
var myFieldset;
// You can use the original var name fieldsetxyz
myFieldset = fieldsetxyz; // redundant

// generally you dont want to grab components by ID all the time
myFieldset = Ext.getCmp('features');
// However you get the component, you can use the API now.
if(myFieldset.collapsed){
myFieldset.expand();
}else{
myFieldset.collapse(true); //animate it
}
}
})
]
});
});//end onReady


If this does not work for you, the plugin may be to blame.

Vinni
11 Aug 2010, 11:01 PM
I used deliberately PHP code tags, because they look more clear and colorful :D

.expand() and .collapse(true) works fine!
Is using .checkbox.dom.checked = true; wrong here?

I always gets confused when to use DOM properties, and when to use API. They both are powerful in own ways, but are there any guidelines when to use them?

Jack9
12 Aug 2010, 7:58 AM
The DOM properties are static values. Changing them generates no events, no messages, so there's never going to be additional effects.

When you want to have controls do things beyond styling and static positioning, you probably want the API.
There are edge cases where you are playing with DOM elements (removal and addition of masks for example) wherein you could try either way...but you'll usually end up using the API for crossplatform compatibility (for example, masks in IE and FF work very differently and are even put in different places).

Vinni
12 Aug 2010, 11:59 AM
Thanks a lot. This really helps.