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,581
    Answers
    540
    Vote Rating
    319
    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
    61
    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
    Active contributor to - Walking Tree's ExtJS and Touch Forums

    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,581
    Answers
    540
    Vote Rating
    319
    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
    61
    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
    Active contributor to - Walking Tree's ExtJS and Touch Forums

    Buy ExtJS Components from - Walking Tree e-Store

  10. #9
    Sencha Premium Member findajit's Avatar
    Join Date
    Mar 2009
    Location
    Hyderabad, India
    Posts
    61
    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
    Active contributor to - Walking Tree's ExtJS and Touch Forums

    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi