PDA

View Full Version : Reloading a Combobox using onTriggerClick



techakone
17 Dec 2010, 10:16 PM
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
19 Dec 2010, 2:09 PM
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.

mounirsky
9 May 2015, 4:38 AM
Hi techakone, I realy need your help ! I'm more and less in the same case ! In my case I'm usin a simpleStore type !
Hear is a parte of the code :


// The "ImageField" is an item witch is called on the return of the methode "createWindow" ...

createWindow: function() {

ImageField = new Ext.form.ComboBox(Ext.apply({
name: "Image_ref",
fieldLabel: "Image Input (Required)",
emptyText: "Select your Image",
xtype:'combo',
forceSelection: true,
editable: true,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
labelWidth: 300
width: 250,
id: 'myCombo',
hideLabel: false,
lazyRender:false,
lazyInit:false,
mode: 'local',
triggerAction: 'all',


store: new Ext.data.SimpleStore({
autoLoad: true,
autoDestroy: true,
fields: ['text','value'],
data: layer_liste_WCS // is a liste of js objects
}),
listeners:{

beforequery:function(qe) {
// console.log(qe);
qe.cancel=true;
addComboxFieldItemsWCS(); // Run this methode to get "layer_liste_WCS" witch is liste of data
var actionComboBox = Ext.getCmp('myCombo');
.
.
.
.
.
.
// I don't know how to do to reload the store after runing the methode "addComboxFieldItemsWCS"
}
}

}, base));

return new Ext.Window({
closable: true,
resizable: false,
shadow: false,
closeAction: 'hide',
region: "center", //"north","south","east","west"
width: 480,
height: 190,
iconCls: 'wind_icon',
plain: true,
layout: 'border',
buttonAlign: 'right',
layout: 'fit',
listeners: {
show: function() {
this.el.setStyle('left', '');
this.el.setStyle('top', '');
}
},
items: [{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
width: 50,
height:20,
items: [{ // we will declare 3 tabs
title: 'Datas Inputs',
closable:false,
iconCls: 'input_icon',
active: true,
items:[{
xtype: 'form',
autoWidth: true,
labelWidth: 185,
bodyStyle: "padding:10px;",
items: [
ImageField,
]
}]
}]
}],
});
},