1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    martin.povolny is on a distinguished road

      0  

    Default ComboBox, queryMode remote, prevent Store caching

    ComboBox, queryMode remote, prevent Store caching


    Hallo.

    I have comboboxes, that allow the user to enter towns, there are too many towns so I use queryMode remote and as the user types, the combo gets loaded.

    The problem: when I have multiple combos of this type on one page, the stores are shared and if the user types "Ab" in 1st combo, the Store gets loaded with towns starting with "Ab", user selects "Abba" and goes on to filling the form.

    Then the user types "Ba" in the 2nd combo and the Store gets loaded with towns starting with "Ba".

    But at the moment the store loads, the 1st combo becomes invalid - the selection is 1st combo: "Abba" does not match anything in the shared Store and the value disapears.

    How do I prevent sharing the store by multiple comboboxes of the same type in one page?

    The model is still the same, the combo is the same except for ItemId. But I need separate stores.

    Thanks in advance!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You then need to create a new store instance for each combo.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    martin.povolny is on a distinguished road

      0  

    Default


    You are right I accidently used the same store. Thank you.

    That is because I have the combobox in a panel together with some more elements all wrapped in a class and I am probably not using the right idiom for such job.

    I have moved the combobox creation into the constructor as shown below:

    Code:
    Ext.define('Ext.ux.ExSubPanel', {
        extend: 'Ext.form.Panel',
        alias:  'ex_sub_panel',
    
    
        frame: false,
        layout: {
            type:  'hbox',
            align: 'stretch'
        },
        items: [
          { itemId: 'btn_add', xtype: 'button', text: '+' }, 
          { itemId: 'btn_rem', xtype: 'button', text: '-' },
    
    
          { itemId: 'ex_text', flex: 2, xtype: 'textfield' },
    /*
          HERE WAS THE COMBO
     */
          { itemId: 'ex_loc_pozn', flex: 1, xtype: 'textfield' },
        ],
    
       injectObec: function {
            this.insert( 3, {          
              xtype:  'combobox',
              itemId: 'ex_loc',  
              flex:   2,
              ETC.... HERE I HAVE THE COMBO NOW
               ....
              store: Ext.create( 'Ext.data.Store', {
                  model: 'Obec',
                  proxy:  {
                      type: 'ajax',
                      url:  '/obec/ext_search/',
                .... ETC
         } );
       },
    
       /* .. more functions here... */
    
        constructor: function(config) {
            this.callParent(arguments);
            this.initConfig(config);
    
    
            this.injectObec(); // here I call the function to insert the combo instead of defining it in the items
            
            return this;
        },
    });
    This solved the problem for me. But I don't like the organisation of the resulting code.

    How can this be done better?

    Thanks and regards.
    Last edited by martin.povolny; 7 Mar 2012 at 11:29 AM. Reason: add more code

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,581
    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


    You can do it by specifying the store as a config rather than using Ext.create:

    Code:
    {
        xtype:  'combobox',
        ...
        store: {
            model: 'Obec',
            ...
        }
    }
    Note also that you have a stray comma in your items array, IE won't like that.

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    martin.povolny is on a distinguished road

      0  

    Default


    Oh, I see, there is some magic in the ComboBox, that converts a hash passed in 'store' config to an instance of Store. I did not know that, thought it's my job to pass a Store.

    This way I can use the items in my class.

    Great, thank you!


    btw: I was searching for a way to have custom rendered items in the drop-down as I used to have in ExtJS 2.

    This works for me:


    Code:
    {
              xtype: 'combobox',
              .....
              tpl: new Ext.XTemplate( 
                     '<tpl for=".">',
                     '<li role="option" class="x-boundlist-item"><h4>{obec} {obec_id}</h4> {okres}, <i>{kraj} kraj</i></li>',
                     '</tpl>' ),
               ...
    }

Thread Participants: 2

Tags for this Thread

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