Results 1 to 7 of 7

Thread: How to display fieldset multiple times based on the combo box value

  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    27
    Vote Rating
    0
      0  

    Default Answered: How to display fieldset multiple times based on the combo box value

    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)
    Code:
    {                        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:
    Code:
    { 
                        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:
    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

  2. You need to add new instances:

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

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    You need to add new instances:

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

  4. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Can you please tell me where I need to add this new instance
    Code:
     mainContainer.add({
    //fieldset
    }

    Let me describe the structure of my javascript file here:
    Code:
    
    
    Code:
    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
                 }]
    }
    ]
    }]
    }
    
    
    })


  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    Based on your code, you could use your buildItems:

    Code:
                var aForm = this.MyForm().down('form'),
                    section = form.buildItems()[0];
    
                 // your loop count
                 aForm.add(section);

  6. #5
    Sencha User
    Join Date
    Aug 2014
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Could you please tell me What does MyForm() refer to?
    Can I use any of the following.?
    Code:
    var aForm=Ext.widget('myform');
    or
    Code:
    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?

  7. #6
    Sencha User
    Join Date
    Aug 2014
    Posts
    27
    Vote Rating
    0
      0  

    Default

    And also, I am using
    Code:
    id: 'scriptdetails'
    So, does it matter.? I have also tried replacing 'id' with 'itemId' but It did not help

  8. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    >>> 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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •