Reloading a Combobox using onTriggerClick

[techakone]

Hi all,
In one of my applications i am using a grid with a CheckboxSelectionModel, and above the grid, i have a combobox that contains "Actions" that can be applied to the selected rows in the grid(values from the selected rows are used as parameters to reload the combobox's store). I know there are better ways to do this but this is how the client wants it. As a proof of concept i wrote the following code. This works overall except that on the initial click, even though the right data is returned in the store, the list of new values is not displayed. Clicking to collapse the box, and then clicking to open it again then loads the store fine and display the values. Any subsequent click works fine. I need your help in figuring out why the initial click does not display the list of values. That is where i am puzzled:

//Store Definition
    var toActionStore = new Ext.data.JsonStore({
        fields: ['actionDesc','actionVal'],
        storeId: "actionStore",
        url: "json/taskActions.wjson?" ,
        root: "actions",
        listeners:
        {
            load:function(store)
            {
                com.util.display.hideLoading();
            },
            exception:function(proxy, type, action, options, response, args)
            {
        
            }
        }
    });    
    //Combobox definition
    {
        id: 'WorkActions',
        hideLabel: false,
        xtype:'combo',
        displayField: 'actionDesc',
        valueField: 'actionVal',
        lazyRender:false,
        lazyInit:false,
        mode: 'local',
        triggerAction: 'all',
        listEmptyText: 'Select an Action',
        editable: false,
        width: 100,
        store: toActionStore,
    }
    //OnTriggerClick overrride
    var actionComboBox = Ext.getCmp('WorkActions');
    actionComboBox.onTriggerClick = function()
    {
        if(!this.isExpanded())
        {
            var taskGrid = Ext.getCmp('WorkData');
            var selectedTasks = taskGrid.getSelectionModel().getSelections();
            console.log("TriggerACtion: "  + this.triggerAction + " allQuery: " + this.allQuery);
            
            if (!Ext.isEmpty(selectedTasks)) 
            {
                var record = selectedTasks[0];
                var opId = record.get("operationId");
                var asgId = record.get("taskId");
                
                    com.util.display.showLoading('Loading Task Actions...');
                     this.store.reload(
                    {
                        params:
                        {
                            userId:userId,
                            userRole:userRole,
                            operationId:opId,
                            taskId:asgId
                        },
                        callback:function()
                        {
                            var actionComboBox = Ext.getCmp('WorkActions');
                            actionComboBox.onFocus({});
                            actionComboBox.expand(); 
                            actionComboBox.el.focus();
                            
                        }
                    }        
                    )
                
            }
        }
        else
        {
            
            this.collapse(); 
        }
    }

Thanks in advance for your insight.

[techakone]

Just FYI for those with the same issue. I solved mine, i dug around a bit on the forum and came up with this here solution. I added the code to reload the store in the beforequery event listener of the combobox:

    //Combobox definition
    {
        id: 'WorkActions',
        hideLabel: false,
        xtype:'combo',
        displayField: 'actionDesc',
        valueField: 'actionVal',
        lazyRender:false,
        lazyInit:false,
        mode: 'local',
        triggerAction: 'all',
        listEmptyText: 'Select an Action',
        editable: false,
        width: 100,
        store: toActionStore,
        listeners:
        {
            beforequery:function(qe)
            {
                //console.dir(qe);
                
                var assignmentGrid = Ext.getCmp('taskGrid');
                var selectedTasks = assignmentGrid.getSelectionModel().getSelections();
                if (!Ext.isEmpty(selectedTasks)) 
                {
                    qe.cancel=true;
                    var record = selectedTasks[0];
                    var opId = record.get("opId");
                    var asgId = record.get("taskId");
                    var actionStore = Ext.StoreMgr.get('actionStore');
                    var actionComboBox = Ext.getCmp('WorkActions');
                    this.store.removeAll();
                     this.store.reload(
                    {
                        params:
                        {
                            userId:userId,
                            userRole:userRole,
                            operationId:opId,
                            assignmentId:asgId
                        },
                        callback:function()
                        {
                            
                        }
                    }        
                    )
                    //this.expand(); 
                }
                else
                {
                      this.store.removeAll();
                      
                }
                return qe;
            }
        }
    }

Doing so helped me fix my problem. The store is reloaded and the correct values are displayed. I tried moving that code previous to the expand event listener but that was incorrect as the combobox was already expanded and it was causing issues with the dom.

Hope this helps somebody.