1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    19
    Vote Rating
    0
    es3analytics is on a distinguished road

      0  

    Default Simple ComboBox selection filters JSonStore

    Simple ComboBox selection filters JSonStore


    Hello all, I have configured two comboboxes on my page to draw their option lists from json stores. This piece works just fine. The first box's store contains 'option_id' and 'option_name' fields, and displays all the 'option_name' records perfectly. The second store contains 'parent_id', 'parent_name', 'child_id', and 'child_name' fields, and displays all the 'child_name' options. I added a listener to ComboBox 1 to check for the 'select' event, which successfully fires off an alert message, so I know it works. I replaced the alert message with a command to filter the second combobox's datastore with the value selected in ComboBox 1. This does work, as long as you've already clicked on all of the comboboxes once to trigger them to fetch their options. My question is, is there a way to force the comboboxes to do this pre-load before the user clicks on ComboBox 2? Otherwise, it doesn't come back with a filtered result set, and displays all the options in the second datastore.

    Here's a partial code example:
    Code:
     var JSonStore1 = new Ext.data.JsonStore({
              url: 'json.php?var=1',
              root: 'results',
              autoLoad: true,
              fields: ['option_id','option_name']
          });
    
     var JSonStore2 = new Ext.data.JsonStore({
              url: 'json.php?var=2',
              root: 'results',
              autoLoad: true,
              fields: ['parent_id', 'parent_name', 'child_id','child_name']
          });
    
    
    var newForm = new Ext.form.FormPanel({
                 id: 'form',
                 url: 'process.php',             
                 // standardSubmit: true,
              autoHeight: true,
              defaultType: 'textfield',
              collapsed: false,                                                                              
                 frame: true,                        
              items: [{
                  xtype: 'fieldset',
                  title: 'New Request',              
                  items: [{
                      xtype: 'combo',                  
                      id: 'request_type',
                      autoSelect: true,
                      name: 'type',
                      width: 200,
                      labelStyle: 'width:115px',
                      fieldLabel: 'Request Type',                          
                      store: JSonStore1,
                      dataIndex: 'contact_method',
                      hiddenName: 'request_type',
                      valueField: 'option_id',
                      displayField: 'option_name',
                      triggerAction: 'all',
                      minChars: 0,
                      allowBlank: false,
                      listeners: {                      
                          select: function(combo, record, index){
                              JSonStore2.filter('parent_name',record.data.option_name);                          
                          }                      
                      }
                  },{
                      xtype: 'combo',                  
                      id: 'request_area',
                      autoSelect: true,
                      name: 'req_area',
                      width: 200,
                      labelStyle: 'width:115px',
                      fieldLabel: 'Request Area',                          
                      store: JSonStore2,
                      dataIndex: 'contact_method',
                      hiddenName: 'req_area',
                      valueField: 'child_id',
                      displayField: 'child_name',
                      triggerAction: 'all',
                      minChars: 0,
                      allowBlank: false                            
                  }]
              }]
          });
    -->

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Location
    Hong Kong
    Posts
    171
    Vote Rating
    0
    jarlau is on a distinguished road

      0  

    Default


    try remove triggerAction: 'all' in combo2.
    -->

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    19
    Vote Rating
    0
    es3analytics is on a distinguished road

      0  

    Default


    I have removed the attributes you suggested from the comboboxes, and I'm still experiencing the same problem. It doesn't 'filter' the store until after it's been loaded once, and you re-select an option.
    -->