Results 1 to 2 of 2

Thread: Trying to switch store for Combo inside the grid cell dynamically, not working

  1. #1
    Ext User
    Join Date
    Jul 2009
    Location
    Chicago, IL
    Posts
    2

    Exclamation Trying to switch store for Combo inside the grid cell dynamically, not working

    Help please. Spent 3 days investigating already, no success.

    I am trying to switch the Store for ComboBox ( which is inside the grid cell ) dynamically, not working

    So I have editable grid with 5 columns depending on the ComboBox selection in the 2nd column(fieldName) the 3rd column(sValue) should be populated (on Expand event) with the appropriate data. So it was working when the store was static loading the list from the Array(this.valueData which is getting data dynamically from another external store loading data from .xml file) like this:
    Code:
        // default value initialization
        this.valueData = valData[0] = [[0,'', '']];
        
        this.valuesReader = new Ext.data.ArrayReader({}, ['id','text', 'value']);
    
        this.comboValueStore = new Ext.data.Store({
                                    reader: this.valuesReader,
                                    proxy: new Ext.data.MemoryProxy(this.valueData),
                                    autoLoad: true  
        });
    
      this.searchValuesCombo = new Ext.form.ComboBox({
                id: 'cmbFindValue',
                store: this.findValueStore,
                displayField: 'Name',
                valueField:'',
                minChars:1,
                typeAhead: false,
                loadingText: 'Loading',
                mode: 'remote',
                forceSelection: false,
                triggerAction: 'all',
                emptyText:'Select value...',
                selectOnFocus:true,
                editable:true,
                enableKeyEvents:true,
                queryDelay:500,
                width:300
            });
    
    
    
        this.colModel = new Ext.grid.ColumnModel([        
            new Ext.grid.RowNumberer({locked:true}), 
            {header: "DisplayOrder",dataIndex: 'DisplayOrder',hidden: true,editor:new Ext.form.TextField()},
            {header: this.FieldNameLabel,dataIndex: 'fieldName',width: 240,sortable:false,editor: this.searchFieldNamesCombo},
            {header: this.FieldValueLabel,width:230,dataIndex:'sValue',sortable:false,editor:this.searchValuesCombo},
     
           ]); 
    
    
            SearchGrid.superclass.constructor.call(this, {    
                id:'searchEditGrid',
                store: this.store,
                cm: this.colModel,
                selModel: new Ext.grid.RowSelectionModel(),
                autoWidth:true,
                height:298,
                stripeRows:true,
                enableHdMenu:false,
                draggable: false,
                enableColumnMove: false,
                clicksToEdit:1,
                border:true,
                layout:'fit',
                region:'center'
            });
    That all was working fine until I added feature that the 3nd column can have not only static list of values in the Combo, but sometime also need to get the data by Google Suggest from the database showing the user all matching values starting from the user input(for example input 'al' it will show list of first 10 names found staring from 'al').
    Code:
          // Dynamic Google-style Find Xml Store
        this.findValueStore = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: Awse.URLs.GetSecNames
            }),
    
            reader: new Ext.data.DynamicXmlReader({
                record: 'row',
                id: '@symbol',
                totalRecords: '@TotalRecords',
                recordDefinition: 'recordDefinition'
            }),
            baseParams: {start:0, limit:10, sort: 'Name', dir:'ASC', find:'', fType:fType, filter:''},
            remoteSort: true
        });
    So, the static COmbo still works, and if I go row-by-row selecting different values in the 2nd column(fieldName) the 3rd column will be re-loaded correctly with new COmbo list from the static store (comboValueStore), but when I switch the 2nd column value to the one which will use Google Suggest in the 3rd column - all the values found are either coming as a list of empty rows or just showing a list of previously loaded static combo values.

    Here is how I am changing the store:
    Code:
    // when clicked Values Combo - update the items inside
        this.searchValuesCombo.on('expand', function(){
            var record = this.getSelectionModel().getSelected();
    
            if(record.data.ctrl == 0)
            {
                this.findValueStore.sortInfo = {
                    field: record.data.param,
                    direction: 'ASC'    
                };
        
                this.searchValuesCombo.tpl = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
                this.searchValuesCombo.store = this.findValueStore;
                //this.comboValueStore.removeAll();
                this.searchValuesCombo.valueField = '';
                this.searchValuesCombo.mode = 'remote';
                this.searchValuesCombo.displayField = record.data.param;//'Name' or other;
                this.searchValuesCombo.emptyText = 'Select value...';
                this.searchValuesCombo.reset();
                
                        this.searchValuesCombo.store.load({callback: function(r,options,success) {
                                 if(success == true) 
                                 {
                                    var searchGrid = Ext.getCmp("searchEditGrid");
                                    searchGrid.searchValuesCombo.view.store = searchGrid.findValueStore;
    //                                searchGrid.searchValuesCombo.view.tpl.html = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
    //                                searchGrid.searchValuesCombo.view.tpl.tpls[0].body = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
                                    searchGrid.searchValuesCombo.view.refresh();
                                    searchGrid.searchValuesCombo.reset();
                                    return true;
                                 }
                             } });
                             
            }
            else
            {
                
                this.searchValuesCombo.tpl = '<tpl for="."><div class="x-combo-list-item">{text}</div></tpl>';
                this.searchValuesCombo.store = this.comboValueStore;
                //this.findValueStore.removeAll();
                this.searchValuesCombo.valueField = 'value';
                this.searchValuesCombo.mode = 'local';
                this.searchValuesCombo.displayField = 'text';
                this.searchValuesCombo.emptyText = '';
                this.searchValuesCombo.reset();
                this.SearchValuesUpdate(record);
            }
            return true;
          }, this);
    I mentioned during debugging that the store seems to be switched and I can see all data in debugging, but not on the screen. When I debugged even more - I found that there is also searchGrid.searchValuesCombo.view.store which is having old data no matter what I am doing. reset(), refresh() or whatever. Please help. It is really a pain without any solution for 3 days. I need somehow to refresh the loaded data.

    Also hint: whatever store is selected first - works, so if GoogleSuggest was first - it works, but switching to the static ones is broken. And vice versa.
    searchGrid.searchValuesCombo.view.store


    Issue #2:

    When even in the same Google Suggest, but reloading the sortInfo columnName and tpl. Anyway see in debugger the reloaded store for combo, but old store for combo.view.store and in particular tpl is wrong, which I tried to override like this and it did not help either:
    Code:
    searchGrid.searchValuesCombo.view.tpl.html = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
    searchGrid.searchValuesCombo.view.tpl.tpls[0].body = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
    Last edited by mystix; 15 Nov 2009 at 8:57 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code
    Why to pay MORE if we can save MORE?

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Please reread the API docs. Most combobox options you are trying to change are listed as config options and not as writable properties. This means that you can't change them (or that you need to use a setter method like bindStore)!

    Your solution is flawed anyway. You should have written a getCellEditor method (see example).

Posting Permissions

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