Results 1 to 2 of 2

Thread: Open multiple fieldsets based on combo box value

  1. #1

    Default Open multiple fieldsets based on combo box value

    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.
    Code:
    {
    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'.

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

  2. #2
    Sencha Premium User
    Join Date
    Apr 2009
    Location
    Raalte, Netherlands
    Posts
    253
    Answers
    7

    Default Yes you can

    What you should do is add with every fieldset an 'itemId' (NOT 'id').
    Code:
    {
       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:
    Code:
    listeners: {
         scope: this,
         change: function( combo, newValue, oldValue) {
              if (newValue = 'somevalue') {
                   this.down('#fsBooks').hide();
              }
         }
    }
    Changing the title:

    this.down('#fsBooks').setTitle('Some nice title here');
    Last edited by jvandemerwe; 3 Jun 2015 at 5:22 AM. Reason: add some more info

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
  •