PDA

View Full Version : How to display fieldset multiple times based on the combo box value



shruthi123
13 Oct 2014, 12:47 AM
Hi All
I have an extjs form panel. Based on the value selected in the combo box, I need to display a fieldset containing 2 fields multiple times. ie,Display field set once if value chosen is 1, twice if value chosen is 2.

The problem that I am facing is that, the field set is being displayed only once.However,I can see the for loop being executed perfectly.
Here is my code: (combo box with the listener)

{ fieldLabel: 'Number Of Scripts Required',
xtype:'combo',
name: 'noOfScriptsRequired',
id: 'noOfScriptsRequired',
store: new Ext.data.SimpleStore({
fields: ['no','val'],
data: [
['1','1'],['2','2'],['3','3']
]
}),
displayField: 'no',
valueField: 'val',
listeners: {
select: function(combo,value){
var formpanel=Ext.widget('complianceform');
console.log('formpanel');console.log(formpanel);
var sd=this.up('form').getComponent('scriptdetails');
console.log('sd');console.log(sd);
for(var i=1; i<=combo.getValue();i++ ){
console.log(i);
var title="Script details "+i;
sd.setTitle(title);
sd.show();
console.log(sd);
}
}
}
}

Here is the field set:


{
xtype: 'fieldset',
id:'scriptdetails',
columnWidth: '0.5',
hidden: true,
// toFrontOnShow: true,
title: 'Script Details',
draggable: true,
collapsible: true,
items:[
{
xtype :'textfield',
fieldLabel: 'Script Name',
name: 'scriptName'
},
{
xtype: 'textfield',
fieldLabel: 'Script Parameters',
name: 'scriptParameters'
}
]
}

UPDATE: Here is the working code:


{
fieldLabel : 'Name :',
xtype : 'textfield',
name : 'name'
},{
fieldLabel : 'Number Of Scripts Required',
xtype : 'combo',
name : 'noOfScriptsRequired',
id : 'noOfScriptsRequired',
store : new Ext.data.SimpleStore({
fields : [ 'no', 'val' ],
data : [ [ '1', '1' ], [ '2', '2' ],[ '3', '3' ] ]
}),
displayField : 'no',
valueField : 'val',
listeners : {
select : function(combo, value) {
var dynamicPanel = Ext.getCmp("dynamicPanel");
var scriptField = {
xtype : 'fieldset',
items : [
{
xtype : 'textfield',
fieldLabel : 'Script Name',
name : 'scriptName'
},
{
xtype : 'textfield',
fieldLabel : 'Script Parameters',
name : 'scriptParameters'
} ]
};
dynamicPanel.removeAll(true);
for ( var i = 0; i < combo.getValue(); i++) {
var index = dynamicPanel.items.length;
var j = i + 1;
scriptField.title = "Script Details "+ j;
dynamicPanel.insert(index,scriptField);
dynamicPanel.doLayout();
}
}
}


Thanks in advance

scottmartin
13 Oct 2014, 9:29 AM
You need to add new instances:

mainContainer.add({
// fieldset with items
})

shruthi123
13 Oct 2014, 9:09 PM
Can you please tell me where I need to add this new instance

mainContainer.add({
//fieldset
}
Let me describe the structure of my javascript file here:





Ext.define({'myform',extend:'Ext.form.Panel',
layout: 'fit',
initComponent: function(){
this.items=this.buildItems();
this.callParent(arguments);
},
buildItems: function(){
return[{
xtype: 'form',
items:[
{
xtype: 'fieldset', // fieldset1
items:[{
// combo box with the listener which displays 'fieldset2' based on the value selected
}]
},
{
xtype: 'fieldset', //fieldset2
items: [{
//fields
}]
}
]
}]
}


})

scottmartin
14 Oct 2014, 4:06 AM
Based on your code, you could use your buildItems:



var aForm = this.MyForm().down('form'),
section = form.buildItems()[0];

// your loop count
aForm.add(section);

shruthi123
14 Oct 2014, 5:28 AM
Could you please tell me What does MyForm() refer to?
Can I use any of the following.?


var aForm=Ext.widget('myform');
or


var aForm=this.up('form').getComponent('scriptdetails');

Also, Should I place the first 2 lines of code( var aForm and section) in the combobox listener?

shruthi123
14 Oct 2014, 5:31 AM
And also, I am using


id: 'scriptdetails'


So, does it matter.? I have also tried replacing 'id' with 'itemId' but It did not help

scottmartin
21 Oct 2014, 3:48 AM
>>> Could you please tell me What does MyForm() refer to?

This is your class. If you use itemId, then you would need to place a hash in front:

down('#myItemId')

Scott.