Results 1 to 7 of 7

Thread: Working with select field?

  1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    16

    Default Answered: Working with select field?

    In my app I have a Form, consisting of Field Set, in which there are three fields, two of them are Select fields and one of them File field. In the first Select field, I have four options, and the second Select field, I want to populate according to the first Select field. So, for each option in the first Select field, I want to populate different options in the second Select field. How can I do this?

  2. You could tackle this a number of ways. You could have your view with all the possible scenarios already configured and show/hide depending on the situation. I have chosen to expand the example I provided earlier to keep the logic in the controller. Since I don't know about your architecture as a whole or the goals of your app, I can't make any recommendations on what specific approach to take. I can recommend however that you digest this example, take in the concepts and see how things would best fit your overall architecture.

    This example adds a container just above the button which will be used to add the extra fields based on the choice of the first select field. Technically I'm over nesting containers but for the sake of clarity it's the easiest approach to show you.

    View:
    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.form.Panel',
        xtype  : 'main',
    
    
        requires : [
            'Ext.field.Select'
        ],
    
    
        config : {
            items : [
                {
                    xtype       : 'selectfield',
                    itemId      : 'select-category',
                    placeHolder : 'Select a Category',
                    name        : 'category',
                    label       : 'Category',
                    options     : [
                        { text : '',        value : 0 },
                        { text : 'Letters', value : 1 },
                        { text : 'Numbers', value : 2 },
                        { text : 'Colors',  value : 3 }
                    ]
                },
    
    
                {
                    xtype   : 'selectfield',
                    itemId  : 'select-value',
                    name    : 'value',
                    label   : 'Value',
                    options : []
                },
    
    
                {
                    xtype  : 'container',
                    itemId : 'extra-fields'
                },
    
    
                {
                    xtype  : 'button',
                    itemId : 'btn-get-values',
                    text   : 'Get Values'
                }
            ]
        }
    });
    Controller:
    Code:
    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
    
    
        config : {
            refs : {
                mainForm             : 'main',
                categorySelectField  : 'main > #select-category',
                valueSelectField     : 'main > #select-value',
                extraFieldsContainer : 'main #extra-fields'
            },
    
    
            control : {
                categorySelectField : {
                    change : 'onCategorySelectFieldChange'
                },
    
    
                'main > #btn-get-values' : {
                    tap : 'onGetValuesButtonTap'
                }
            }
        },
    
    
        onCategorySelectFieldChange : function(cmp, newValue, oldValue) {
            var valueOptions = [];
            var extraFields;
            var extraFieldsContainer = this.getExtraFieldsContainer();
    
    
            // remove all items from the extra fields container
            extraFieldsContainer.removeAll(true);
    
    
            if(newValue === 1) {
                valueOptions = [
                    { text : 'A', value : 'a' },
                    { text : 'B', value : 'b' },
                    { text : 'C', value : 'c' }
                ];
    
    
                extraFields = [
                    {
                        xtype : 'textfield',
                        name  : 'extra-letter',
                        label : 'Extra Letter Field 1'
                    }
                ];
            }
            else if(newValue === 2) {
                valueOptions = [
                    { text : 'One',   value : 1 },
                    { text : 'Two',   value : 2 },
                    { text : 'Three', value : 3 }
                ];
    
    
                extraFields = [
                    {
                        xtype : 'textfield',
                        name  : 'extra-number',
                        label : 'Extra Number Field 1'
                    }
                ];
            }
            else if(newValue === 3) {
                valueOptions = [
                    { text : 'Red',   value : 'red'   },
                    { text : 'Green', value : 'green' },
                    { text : 'Blue',  value : 'blue'  }
                ];
    
    
                extraFields = [
                    {
                        xtype : 'textfield',
                        name  : 'extra-color',
                        label : 'Extra color Field 1'
                    },
    
    
                    {
                        xtype : 'textfield',
                        name  : 'extra-color-2',
                        label : 'Extra color Field 2'
                    }
                ];
            }
    
    
            this.getValueSelectField().setOptions(valueOptions);
            extraFields && this.getExtraFieldsContainer().add(extraFields);
        },
    
    
        onGetValuesButtonTap : function() {
            console.dir(this.getMainForm().getValues());
        }
    });
    While I've demonstrated an example where the controller is used to determine the dynamic nature of the view, I could easily understand you wanting to control this at the view level as well. Again, that's your choice.

    I hope this helped you.

    Brice

  3. #2
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49

    Default

    Here's an example using a controller that listens to the change event of the first select field.

    View:
    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.form.Panel',
        xtype  : 'main',
    
    
        requires : [
            'Ext.field.Select'
        ],
    
    
        config : {
            items : [
                {
                    xtype       : 'selectfield',
                    itemId      : 'select-category',
                    placeHolder : 'Select a Category',
                    name        : 'category',
                    label       : 'Category',
                    options     : [
                        { text : '',        value : 0 },
                        { text : 'Letters', value : 1 },
                        { text : 'Numbers', value : 2 },
                        { text : 'Colors',  value : 3 }
                    ]
                },
    
    
                {
                    xtype   : 'selectfield',
                    itemId  : 'select-value',
                    name    : 'value',
                    label   : 'Value',
                    options : []
                },
    
    
                {
                    xtype  : 'button',
                    itemId : 'btn-get-values',
                    text   : 'Get Values'
                }
            ]
        }
    });
    Controller:
    Code:
    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
    
    
        config : {
            refs : {
                categorySelectField : 'main > #select-category',
                valueSelectField    : 'main > #select-value'
            },
    
    
            control : {
                categorySelectField : {
                    change : 'onCategorySelectFieldChange'
                },
    
    
                'main > #btn-get-values' : {
                    tap : 'onGetValuesButtonTap'
                }
            }
        },
    
    
        onCategorySelectFieldChange : function(cmp, newValue, oldValue) {
            var valueOptions = [];
    
    
            if(newValue === 1) {
                valueOptions = [
                    { text : 'A', value : 'a' },
                    { text : 'B', value : 'b' },
                    { text : 'C', value : 'c' }
                ];
            }
            else if(newValue === 2) {
                valueOptions = [
                    { text : 'One',   value : 1 },
                    { text : 'Two',   value : 2 },
                    { text : 'Three', value : 3 }
                ];
            }
            else if(newValue === 3) {
                valueOptions = [
                    { text : 'Red',   value : 'red'   },
                    { text : 'Green', value : 'green' },
                    { text : 'Blue',  value : 'blue'  }
                ];
            }
    
    
            this.getValueSelectField().setOptions(valueOptions);
        },
    
    
        onGetValuesButtonTap : function() {
            console.log('category: ' + this.getCategorySelectField().getValue());
            console.log('value: ' + this.getValueSelectField().getValue());
        }
    });
    If this doesn't get you started, please post more details as well as any code that you've tried.

    I hope this helps.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  4. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    16

    Default

    Yes, it works great! Thank you very much bricemason. But I have one more question regarding this one. I want to do one more thing when I change the options in the first Select field. According to selected option in the first Select field, I want to add some new fields between the second Select field and the Button.

    What if I do something like below? Can I do something similar? What I need to change? How can I specify to add the new field(s), after the second Select field and just before the Button? (It doesn't even have to be a Form Panel, just a few Fields laid one under the under is okay.)

    [CODE]
    Code:
    onCategorySelectFieldChange : function(cmp, newValue, oldValue) { 
    var valueOptions = [];   
    if(newValue === 1) {
    ...
    var newFields = Ext.create('Ext.form.Panel',{     
    items:[
    {             
    xtype:'fieldset',            
     title:'Select',             
    items:[
    {                    
     xtype:'selectfield',                    
     label:'Choose one',                     
    options:[
    {text:'First Option',  value:'first'},
    {text:'Second Option', value:'second'},
    {text:'Third Option',  value:'third'}]}]}]});
    
    ... 
    } else if(newValue === 2) {
    
    var newFields = Ext.create(...)
    ... 
    }   
    
    this.getValueSelectField().setOptions(valueOptions); }

  5. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    16

    Default

    Yes, it works great! Thank you very much bricemason. But I have one more question regarding this one. I want to do one more thing when I change the options in the first Select field. According to selected option in the first Select field, I want to add some new fields between the second Select field and the Button. They don't even have to be inside a Form Panel, just a few Fields laid one under the other is okay. I guess I need to use Ext.create, to create those fields, but then how to specify where to put them, and how to put them? If you could help me with that, I would be glad. I tried to post some code, but it doesn't seem to be working, while part of the code that I wanted to put was from Sencha Touch Docs, I guess copying doesn't work well in the forum.

  6. #5
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49

    Default

    You could tackle this a number of ways. You could have your view with all the possible scenarios already configured and show/hide depending on the situation. I have chosen to expand the example I provided earlier to keep the logic in the controller. Since I don't know about your architecture as a whole or the goals of your app, I can't make any recommendations on what specific approach to take. I can recommend however that you digest this example, take in the concepts and see how things would best fit your overall architecture.

    This example adds a container just above the button which will be used to add the extra fields based on the choice of the first select field. Technically I'm over nesting containers but for the sake of clarity it's the easiest approach to show you.

    View:
    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.form.Panel',
        xtype  : 'main',
    
    
        requires : [
            'Ext.field.Select'
        ],
    
    
        config : {
            items : [
                {
                    xtype       : 'selectfield',
                    itemId      : 'select-category',
                    placeHolder : 'Select a Category',
                    name        : 'category',
                    label       : 'Category',
                    options     : [
                        { text : '',        value : 0 },
                        { text : 'Letters', value : 1 },
                        { text : 'Numbers', value : 2 },
                        { text : 'Colors',  value : 3 }
                    ]
                },
    
    
                {
                    xtype   : 'selectfield',
                    itemId  : 'select-value',
                    name    : 'value',
                    label   : 'Value',
                    options : []
                },
    
    
                {
                    xtype  : 'container',
                    itemId : 'extra-fields'
                },
    
    
                {
                    xtype  : 'button',
                    itemId : 'btn-get-values',
                    text   : 'Get Values'
                }
            ]
        }
    });
    Controller:
    Code:
    Ext.define('MyApp.controller.Main', {
        extend : 'Ext.app.Controller',
    
    
        config : {
            refs : {
                mainForm             : 'main',
                categorySelectField  : 'main > #select-category',
                valueSelectField     : 'main > #select-value',
                extraFieldsContainer : 'main #extra-fields'
            },
    
    
            control : {
                categorySelectField : {
                    change : 'onCategorySelectFieldChange'
                },
    
    
                'main > #btn-get-values' : {
                    tap : 'onGetValuesButtonTap'
                }
            }
        },
    
    
        onCategorySelectFieldChange : function(cmp, newValue, oldValue) {
            var valueOptions = [];
            var extraFields;
            var extraFieldsContainer = this.getExtraFieldsContainer();
    
    
            // remove all items from the extra fields container
            extraFieldsContainer.removeAll(true);
    
    
            if(newValue === 1) {
                valueOptions = [
                    { text : 'A', value : 'a' },
                    { text : 'B', value : 'b' },
                    { text : 'C', value : 'c' }
                ];
    
    
                extraFields = [
                    {
                        xtype : 'textfield',
                        name  : 'extra-letter',
                        label : 'Extra Letter Field 1'
                    }
                ];
            }
            else if(newValue === 2) {
                valueOptions = [
                    { text : 'One',   value : 1 },
                    { text : 'Two',   value : 2 },
                    { text : 'Three', value : 3 }
                ];
    
    
                extraFields = [
                    {
                        xtype : 'textfield',
                        name  : 'extra-number',
                        label : 'Extra Number Field 1'
                    }
                ];
            }
            else if(newValue === 3) {
                valueOptions = [
                    { text : 'Red',   value : 'red'   },
                    { text : 'Green', value : 'green' },
                    { text : 'Blue',  value : 'blue'  }
                ];
    
    
                extraFields = [
                    {
                        xtype : 'textfield',
                        name  : 'extra-color',
                        label : 'Extra color Field 1'
                    },
    
    
                    {
                        xtype : 'textfield',
                        name  : 'extra-color-2',
                        label : 'Extra color Field 2'
                    }
                ];
            }
    
    
            this.getValueSelectField().setOptions(valueOptions);
            extraFields && this.getExtraFieldsContainer().add(extraFields);
        },
    
    
        onGetValuesButtonTap : function() {
            console.dir(this.getMainForm().getValues());
        }
    });
    While I've demonstrated an example where the controller is used to determine the dynamic nature of the view, I could easily understand you wanting to control this at the view level as well. Again, that's your choice.

    I hope this helped you.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  7. #6
    Sencha User
    Join Date
    Dec 2013
    Posts
    16

    Default

    Thanks once more for saving the day! Great answer. It worked just fine, though I have few questions, in order to understand some things better.

    1) In the controller, in the references part, you have these two lines:

    Code:
    valueSelectField     : 'main > #select-value',
    extraFieldsContainer : 'main #extra-fields'
    Why in the first one, in the selector part you have ">" sign, and in the second one you don't? Do they mean the same thing?

    2) In the function regarding the first selector, at the end you have the following line:

    Code:
    optionalFields && this.getOptionalFieldsContainer().add(optionalFields);
    The point is that I'm working in Sencha Architect, and when I wrote it, next to that line I got a red sign indicating error, and the message is: "Expected an assignment or function call and instead saw an expression". But when I use Sencha Cmd to start up the server, and head to my browser and open the project, it works just fine, no errors shown. Why is that?

    3) Lastly, in the code regarding your view, at the upper part you have this line:

    Code:
    xtype: 'main'
    As I once told you, I'm working on Sencha Architect, and when I generate my view using drag and drop method, and head to my code section then, I don't have that line of code. I then open the source file and add it manually. Is there a way to add that line using Sencha Architect config? Because in the first part of my question, without that line of code my selection fields didn't work correctly, I mean populating the second selection according to the first selection. But when I added it, magic happened and it worked. I guess in the references part, the selector is meaning that "main".

  8. #7
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49

    Default

    For point 1, you're right they are effectively the same thing. I would normally prefer to put the > in there as I find it to be a more descriptive representation of the view. In that second code sample, I simply left it out by mistake. But again, that's your own personal preference however you want to write that selector.

    For point 2, it must just be Sencha Architect's own parsing that comes to that conclusion. You could also write that as:
    Code:
    if(optionalFields) {
        this.getOptionalFieldsContainer().add(optionalFields);
    }
    which would produce the same thing and I would expect take away that warning in Sencha Architect.

    For point 3, I don't use Sencha Architect at all so I can't speak to exactly where you'd configure an xtype. I would expect it to be some where in a property panel for the view though. And you're right, the refs in the controller rely on this to make it all work.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

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
  •