Results 1 to 8 of 8

Thread: Controlling one combobox by selection of another combobox

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2

    Default Answered: Controlling one combobox by selection of another combobox

    Hello all,
    new to Ext JS. Hopefully someone here can help me out a little bit. I have one combobox and based on wether a user selects 'Single Store', 'Group', or 'Sub-Group I want it to call back to a php file and fill the second combobox with the appropriate query. So far I am getting the combobox select function to make the call to the php file and the php file sees the post and is returning a json file back but the second combobox does not populate. Here is my code. Please help me, this is killing me, lol:

    groupStore is the one that I am fighting with. It will not populate comboGroup??

    Code:
    Ext.regModel('stypes',{
        fields:[
            {name:'id', type:'int'},
            {name:'name', type:'string'}
        ]
    });
    
    Ext.regModel('sgroups',{
        fields:[
            {name:'id',type:'int'},
            {name:'name',type:'string'}
        ]
    });
    
    var searchTypes = {
        stypes:[
            {
                id:1,
                name:'Single Store'
            },
            {
                id:2,
                name:'Group'
            },
            {
                id:3,
                name:'Sub-Group'
            }
        ]
    };
    
    var searchStore = Ext.create('Ext.data.Store',{
        autoLoad:true,
        model:'stypes',
        data: searchTypes,
        proxy:{
            type:'memory',
            reader:{
                type:'json',
                root:'stypes'    
            }
        }
    });
    
    var groupStore = Ext.create('Ext.data.Store',{
        autoLoad:true,
        autoSync:true,
        pruneModifiedRecords:true,
        model:'sgroups',
        proxy:{
            type:'ajax',
            url:'data/queryGroups.php',
            method:'POST'
        },
        init:function(){
            console.log('groupStore has been instantiated');
        }
    });
    
    var search = Ext.create('Ext.form.Panel',{
        frame:true,
        title:'Search',
        alias:'widget.searchForm',
        bodyPadding:10,
        fieldDefaults:{
            labelAlign:'left',
            labelWidth:40,
            anchor:'100%'    
        },
        items:[
            {
                xtype:'textfield',
                name:'searchText',
                fieldLabel:'Search'    
            },
            {
                xtype:'combobox',
                id:'combo1',
                fieldLabel:'Type',
                store: searchStore,
                editable:false,
                allowBlank:false,
                foreceSelection:true,
                valueField:'id',
                displayField:'name',
                mode:'local',
                triggerAction:'all',
                listeners:{
                         'select':function(){
                                var selVal = this.getValue(); 
                                console.log(selVal);
                                groupStore.load({
                                    url:'data/queryGroups.php?id' + selVal,
                                    method:'POST',
                                    params:{'id':selVal}
                                });
                         }
                }
            },
            {
                xtype:'combobox',
                id:'combogroup',
                fieldLabel:'Select',
                store:groupStore,
                displayField:'group_name',
            }
        ],
        dockedItems:[
            {
                xtype:'toolbar',
                dock:'bottom',
                ui:'footer',
                items:[
                    {
                        xtype:'component',
                        flex:1
                    },
                    {
                        xtype:'button',
                        text:'Search',
                        name:'btnSearch'
                    }
                ]
            }
        ]
    });
    
    Ext.define('DMS.view.store.navigation',{
        extend:'Ext.panel.Panel',
        alias:'widget.navigation',
        width:250,
        collapsible:true,
        items:[search]
    });
    Last edited by skirtle; 1 Mar 2012 at 10:13 AM. Reason: Added CODE tags

  2. OK, let's see what I can come up with...

    Firstly, please use [CODE] tags when posting code. I've added them in retrospectively to your existing posts.

    Ext.regModel is not the correct way to define a model. Just use Ext.define to extend Ext.data.Model. Where did you come across Ext.regModel? If it's in the docs somewhere then they need to be updated.

    Your first combobox is an explosion of config options, some of which are in conflict or just don't exist. Here's my attempt at simplifying it (note I haven't actually tried this code so be prepared to fix any small mistakes I've made):

    Code:
    {
        xtype: 'combobox',
        id: 'combo1', // static ids are bad, I highly recommend removing this
        fieldLabel: 'Type',
        store: [[1, 'Single Store'], [2, 'Group'], [3, 'Sub-Group']],
        editable: false,
        listeners:{
            change: function(combo, value) {
                console.log(value);
                groupStore.load({
                    params: {
                        id: value
                    }
                });
            }
        }
    },
    You'll then need groupStore to be configured something like this:

    Code:
    var groupStore = Ext.create('Ext.data.Store',{
        fields: ['id', 'name'] // you could use a model but it doesn't seem worth it
        proxy: {
            type: 'ajax',
            url: 'data/queryGroups.php'
        }
    });
    Note I've removed your use of POST. If you really want to do a POST request you'll need to configure actionMethods.

    Now for the other combobox:

    Code:
    {
        xtype: 'combobox',
        id: 'combogroup', // get rid of this
        fieldLabel: 'Select',
        queryMode: 'local',
        editable: false,
        store: groupStore,
        displayField: 'name', // this needs to match the field name in your store, which is not group_name
        valueField: 'id' // the underlying value, which judging by your store I assume will be 'id'
    }
    The JSON response from queryGroups.php would then need to be something like this:

    Code:
    [
        {"id": 1, "name": "Users"},
        {"id": 2: "name": "Admins"}
    ]
    This you can check using the request monitoring available in your browser's debugger. That will confirm that the request is made and the response format is correct. If you actually want the field to be called group_name rather than name then adjust the code accordingly.

    Hope that helps. It's unlikely I haven't made a small mistake somewhere in all that code but hopefully it'll get you near where you want to be.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Add a listener for the select event on one combobox and then do the action you want on the other combobox.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2

    Default Thats what I am trying

    That is what I am attempting to do

    Code:
    listeners:{
        'select':function(){
            var selVal = this.getValue();
            console.log(selVal);
            groupStore.load({
                url:'data/queryGroups.php?id' + selVal,
                method:'POST',
                params:{'id': selVal}
            });
        }
    }
    I actually get the json formatted data but the other combox never loads anything??
    Last edited by skirtle; 1 Mar 2012 at 10:15 AM. Reason: Added CODE tags and code clean up

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    OK, let's see what I can come up with...

    Firstly, please use [CODE] tags when posting code. I've added them in retrospectively to your existing posts.

    Ext.regModel is not the correct way to define a model. Just use Ext.define to extend Ext.data.Model. Where did you come across Ext.regModel? If it's in the docs somewhere then they need to be updated.

    Your first combobox is an explosion of config options, some of which are in conflict or just don't exist. Here's my attempt at simplifying it (note I haven't actually tried this code so be prepared to fix any small mistakes I've made):

    Code:
    {
        xtype: 'combobox',
        id: 'combo1', // static ids are bad, I highly recommend removing this
        fieldLabel: 'Type',
        store: [[1, 'Single Store'], [2, 'Group'], [3, 'Sub-Group']],
        editable: false,
        listeners:{
            change: function(combo, value) {
                console.log(value);
                groupStore.load({
                    params: {
                        id: value
                    }
                });
            }
        }
    },
    You'll then need groupStore to be configured something like this:

    Code:
    var groupStore = Ext.create('Ext.data.Store',{
        fields: ['id', 'name'] // you could use a model but it doesn't seem worth it
        proxy: {
            type: 'ajax',
            url: 'data/queryGroups.php'
        }
    });
    Note I've removed your use of POST. If you really want to do a POST request you'll need to configure actionMethods.

    Now for the other combobox:

    Code:
    {
        xtype: 'combobox',
        id: 'combogroup', // get rid of this
        fieldLabel: 'Select',
        queryMode: 'local',
        editable: false,
        store: groupStore,
        displayField: 'name', // this needs to match the field name in your store, which is not group_name
        valueField: 'id' // the underlying value, which judging by your store I assume will be 'id'
    }
    The JSON response from queryGroups.php would then need to be something like this:

    Code:
    [
        {"id": 1, "name": "Users"},
        {"id": 2: "name": "Admins"}
    ]
    This you can check using the request monitoring available in your browser's debugger. That will confirm that the request is made and the response format is correct. If you actually want the field to be called group_name rather than name then adjust the code accordingly.

    Hope that helps. It's unlikely I haven't made a small mistake somewhere in all that code but hopefully it'll get you near where you want to be.

  6. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2

    Default Thank you so much!!!!!!

    Dude, you are totally awesome. Firstly I will never post code again with the [Code] tag. Sorry for that and thank you for fixing that. Secondly, I don't remember exactly where I found regModel but I have seen that a couple of times searching the net. Most of the information that I can find is for older version of Ext JS so not sure if that is the cause. I tried using both regModel and Ext.define just to try and see if there was a difference. Mostly though I wanted to say that YOU ARE THE MAN. I made the changes that you requested and it works like a charm. Now my second combo box is being populated with the changes. Now I will spend some time to figure out exactly which part/ or parts that I had screwed up. Once again thank you so much. This Ext JS stuff is so powerful but there is a little bit of a learning curve. I'm committed though. Keep it rocking brother, you have some good karma coming your way!!!!!

  7. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2

    Default One more question

    I do have one more question though. Now that it is populating the combo box. If I select a different selection from the first combo box, it will not repopulate. It's like I have one change per page load. When I make the second selection it is going to the server and I am getting back valid json data but when I click back on the second combo to see if it is loaded, I get the loading animation the data is from then first callback but all grayed out? Any ideas on that one?

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    You may have hit a known bug in 4.0.7. Try this:

    http://www.sencha.com/forum/showthread.php?152324

  9. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    26
    Answers
    2

    Default Dead on once again

    Once again my friend, you are dead on. I was just scavenging the net looking for a solution when you posted. Much, much appreciated. Someone needs to tell your boss that you deserve a raise!!

Posting Permissions

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