1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -6
    AtulDawkhare can only hope to improve

      0  

    Default Answered: Combo box not showing selected value after dynamically loading the store

    Answered: Combo box not showing selected value after dynamically loading the store


    Hi
    Here is my requirement.
    I have two combo and one Grid on the page. By Selecting combo1 , I need to populate the Combo2's store. This i am able to achieved. Here is the code for this.

    Code:
    function funChange()
    {
    	var SecondCombo=Ext.getCmp('SelectComponentId');
    	SecondCombo.bindStore(states2);
    	SecondCombo.displayField='decription';
    	SecondCombo.valueField='productFamilyId';
    	SecondCombo.store.load();
    }
    
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
            //...
        ]
    });
    
    var combo=Ext.create('Ext.form.ComboBox', 
    		{
    	multiSelect : false,
    	id:'ProductFamilyBO_SelectComponentId',
    	allowBlank: true,
    	editable: true,
    	typeAhead: true,
    	displayField: 'name',
        valueField: 'abbr',
    	mode: 'local',
    	store: states,
    	renderTo:'ProductFamilyBO_SelectComponentId_Div',
    	triggerAction: 'all',
    		 listeners:{
    	         scope: this,
    	         'select': funChange
    	    },
    		}
    );
    So upto this everything is working fine. Now the second combo i.e. combo2's store is populated and now I want to populate Grid , so I have listener for the Second Combo, here is the code for the Second Combo

    Code:
    var data=		[
    	              {"decription": "Cisco Unified Computing System","productFamilyId": "11111"},
    	        	  {"decription": "Cisco 800 Series Products","productFamilyId": "14605"}
    	        ];	  
    var states2 = Ext.create('Ext.data.Store', {
    fields: ['decription', 'productFamilyId'],
    data : data
    });
    
    
    function funSetValue()
    {
    	var SecondCombo=Ext.getCmp('SelectComponentId');
    	// Code to Get the Grid related data
    }	
    
    
    
    
    var combo2=Ext.create('Ext.form.ComboBox', 
    		{
    	multiSelect : false,
    	id:'SelectComponentId',
    	allowBlank: true,
    	editable: false,
    	typeAhead: false,
    	 valueNotFoundText :'No data',
    	displayField: 'decription',
        valueField: 'productFamilyId',
    	mode: 'local',
    	store: [],
    	renderTo:'SelectComponentId_Div',
    	 listeners:{
             scope: this,
             'select': funSetValue
        },
    	}
    );
    So till here the second combo got populated, and now when I am doing Second combo's on change to get Grid's data, the value that I have selected get disappears from the Drop down.


    Can you please suggest what is missing here.Combo.JPG
    Attached Images

  2. @atul,

    set the store to Combo2_Store2 and in the function, which is called when you select an item in Combo1, just load the Combo2_Store2 with the data. That's the approach, typically, we follow

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I'm really struggling to follow the scenario you've described. Where exactly do things go wrong?

    It would make it much easier to help you if your code was a little easier to read. The indentation is a mess (the mixture of tabs and spaces makes it really difficult to follow) and you've got loads of unnecessary config options, e.g. multiSelect: false is the default.

    This line looks suspicious to me:

    Code:
    mode: 'local',
    This could be causing you problems. It should be this:

    Code:
    queryMode: 'local',

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -6
    AtulDawkhare can only hope to improve

      0  

    Default


    Hi there,
    Thanks for the reply. Yes mine code was not at all readable. Really sorry for that.

    I have made changes as you have suggested but still it is not working for me.

    Here is the fully working code. Hope this is readable for you.

    Code:
        var Combo1_Store1 = Ext.create('Ext.data.Store',         {
                fields: ['abbr', 'name'],
                 data : [                           {"abbr":"AL", "name":"Alabama"},
    			    {"abbr":"AK", "name":"Alaska"},
    			    {"abbr":"AZ", "name":"Arizona"}
    			]
            });
    
    
    var Combo1=Ext.create('Ext.form.ComboBox', 
            {
                multiSelect : false,
                id:'combo1',
                allowBlank: true,
                editable: true,
                typeAhead: true,
                displayField: 'name',
                valueField: 'abbr',
                queryMode: 'local',
                store: Combo1_Store1,
                renderTo:'Combo1_Div',
                triggerAction: 'all',
                listeners:
                    {
                         scope: this,
                        'select': funChange
                    },
            });
    
    
    function funChange()
            {
                var SecondCombo=Ext.getCmp('Combo2');
                SecondCombo.bindStore(Combo2_Store2);
                SecondCombo.displayField='decription';
                SecondCombo.valueField='productFamilyId';
                SecondCombo.store.load();
            }    
        
        // This is comming from the DB to for this Sample example kept the data here
    var data2=  
      [
            {"decription": "Cisco Unified Computing System","productFamilyId": "11111"},
            {"decription": "Cisco 800 Series Products","productFamilyId": "14605"}
       ];      
    
    
    var Combo2_Store2 = Ext.create('Ext.data.Store', 
            {
                fields: ['decription', 'productFamilyId'],
                data : data2
            });
    
    
    var Combo2=Ext.create('Ext.form.ComboBox', 
            {
                multiSelect : false,
                id:'Combo2',
                allowBlank: true,
                editable: false,
                typeAhead: false,
                valueNotFoundText :'No data',
                displayField: 'decription',
                valueField: 'productFamilyId',
                queryMode: 'local',
                store: [],
                renderTo:'Combo2_Div',
                listeners:
                    {
                         scope: this,
                        'select': funSetValue
                    },
            });
    
    
    function funSetValue()
            {
                var SecondCombo=Ext.getCmp('Combo2');
                // Code to Get the Grid related data
            }

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -6
    AtulDawkhare can only hope to improve

      0  

    Default


    Please give me your feedback on this.

  6. #5
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    62
    Answers
    6
    Vote Rating
    0
    findajit is on a distinguished road

      0  

    Default


    @atul,

    Problem is that you have

    Code:
    store: [],
    on your Combo2. This must be set to Combo2_Store2
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  7. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -6
    AtulDawkhare can only hope to improve

      0  

    Default


    Thanks for the reply.

    I kept the store bank because I want to populate the store on change event of the Combo1. So on Combo1 change I am calling function "funChange" and binding store for Combo2.

    Code:
    store: []
    Till here Hope it is Correct how much I have implemented.

    Let me tell you my requirement again.

    There are tow combo on a page, On change of first I want to populate Second Combo and On change of Second I want populate / Create Grid.

    I want to dynamically change the store of combo2, so Please help me what is wrong here.

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Which ExtJS version are you using?

    Testing against 4.0.6 I got it to work just by removing the line:

    Code:
    store: []
    Against 4.0.7 I also had to patch the combobox loadmask bug (if you're hitting this just do a forum search for the patch).

    I'm not convinced by the whole approach though. Trying to bind a new store and change the displayField & valueField is going to cause you problems. For the classic 'linked comboboxes' you'd keep the store constant and just load different data.

  9. #8
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    62
    Answers
    6
    Vote Rating
    0
    findajit is on a distinguished road

      0  

    Default


    @atul,

    set the store to Combo2_Store2 and in the function, which is called when you select an item in Combo1, just load the Combo2_Store2 with the data. That's the approach, typically, we follow
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  10. #9
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    62
    Answers
    6
    Vote Rating
    0
    findajit is on a distinguished road

      0  

    Default


    @atul,

    could you get through the issue?
    My Book on Sencha Touch - Sencha Touch Cookbook (2nd Edition)
    My older book on Sencha Touch - Sencha Touch Cookbook
    My Sencha Touch Blog - Walking Tree Sencha Touch Blog
    My ExtJS Blog - Walking Tree ExtJS Blog

    Buy ExtJS Components from - Walking Tree e-Store

  11. #10
    Sencha User
    Join Date
    Aug 2011
    Location
    India
    Posts
    180
    Answers
    1
    Vote Rating
    -6
    AtulDawkhare can only hope to improve

      0  

    Default


    Hi Findajit,
    The approach that you have mentioned above is working, but I have another requirement to I have handle this using if else condition. But will use this logic for other place whenever required.

    Thank you so much for this help.

Thread Participants: 2