PDA

View Full Version : Open multiple fieldsets based on combo box value



shruthi123
22 Sep 2014, 12:33 AM
I am using Ext JS4 with Java. I am following the MVC approach. I have a form to get book details. First, I have a fieldset with a combobox to input the 'number of books required' with input values 1,2,3.


{
xtype : 'fieldset',
title: 'Books',
items:[
{
name : 'Number of Books Required',
xtype : 'combo',
store : new Ext.data.SimpleStore({
fields : [ 'book_count', 'book_val' ],
data : [ [ '1', '1' ],
[ '2', '2' ],
[ '3', '3' ] ]
}),
displayField : 'envName',
valueField : 'envCode'
}
]
}


The second fieldset will contain fields like 'book name' and 'book author'.



{
xtype : 'fieldset',
title: 'Book 1',
items:[
{
name : 'Book Name',
xtype : 'textfield',
},{
name : 'Book Author',
xtype : 'textfield'
}
]
}


Based on the value selected in the combo box, i need to open 1,2 or 3 fieldsets to accept the book details. Also, i need to update the title of the second fieldset like Book 1,Book 2 or Book 3.

Is it possible to do it from the front end Ext JS? If so,how should I do this?

Considering the best coding practices.. Since I am following MVC, should I put the second fieldset in a different form and load it as needed?
Any reference or information will help..

Thanks in advance

jvandemerwe
3 Jun 2015, 5:20 AM
What you should do is add with every fieldset an 'itemId' (NOT 'id').


{
xtype : 'fieldset',
title: 'Books',
itemId: 'fsBooks',
items:[
...
]
}

Then in the combobox you add a listener for a value change. Based on that change you collapse or expand the needed fieldsets like:

this.down('#fsBooks').collapse(); or this.down('#fsBooks').expand();

You can also use:

this.down('#fsBooks').hide() and .show() if you don't want users to be able to expand them.

Make sure that the scope of the listeners are on the parent object.

So:


listeners: {
scope: this,
change (http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.form.field.Field-event-change): function( combo, newValue, oldValue) {
if (newValue = 'somevalue') {
this.down('#fsBooks').hide();
}
}
}


Changing the title:

this.down('#fsBooks').setTitle('Some nice title here');