PDA

View Full Version : Reloading a combobox



kesteb
14 Jun 2007, 1:04 PM
While I did a few searches, read a lot of posts and have come up with this way to do it:



test: function() {

var div, dialog, store, form, combo;

div = Ext.DomHelper.append(document.body,
{id: 'test-form', tag: 'div'},
true);

dialog = new Ext.BasicDialog(div, {
autoTabs: false,
autoCreate: true,
width: 600,
height: 345,
shadow: true,
minWidth: 320,
minHeight: 240,
title: 'Testing'
});

store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method: 'get',
url: '/test/data'
}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'count'
}, [{name: 'value'},{name: 'label'}])
});

store.on('beforeload', function() {

store.baseParams = {}; // remove the annoying ?query= parameter
Ext.apply(store.baseParams, { // add my own parameters
p1: 'this',
p2: 'is',
p3: 'a',
p4: 'test'
});

});

form = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 100,
timeout: 30,
url: '/test/add',
buttonAlign: 'right'
});

combo = new Ext.form.ComboBox({
store: store,
name: 'testing',
hiddenName: 'testing',
fieldLabel: 'Test',
displayField: 'label',
valueField: 'value',
forceSelection: true,
mode: 'remote',
emptyText: 'Select an item',
});

combo.on('expand', function() {

store.reload();

});

form.add(combo);
form.end();

form.addButton('Save', function() {
form.submit({
waitMsg: 'Processing, please wait...',
reset: true,
success: function(form, e) {
Ext.Msg.alert('Success', e.result.message);
},
failure: function(form, e) {
if (e.failureType == 'server') {
Ext.Msg.alert('Failure server',
e.result.message);
} else {
Ext.Msg.alert('Failure client',
'Validation failed');
}
}
});
});

form.addButton('Cancel', function() {
dialog.destroy();
});

form.addButton('Reset', function() {
form.reset();
});

form.render(dialog.body);
dialog.show();

}



The problem is that this method will do two queries to the server. One before the combo is expanded, and one when the combo is expanded. Is this the best/only way?

Firebug also reports an error when pressing the "Cancel' button.

Domitian
14 Jun 2007, 1:07 PM
Can you give a better description as to what you're trying to achieve?

kesteb
14 Jun 2007, 1:23 PM
Sure, this is a fragment, of what the real form is trying to do.

The form has two combo boxes and several date fields. The first combo box loads from the server. This selection, plus one or more date field selections are used to create the query for the last combo box.

Once the selection from the last combo box is made, the whole form can be submitted to the server. The "Reset" button would allow you to "reset" the form and try again.

What I want is to be able this over and over, without closing the original form.

Domitian
14 Jun 2007, 1:55 PM
Use the updateManager to submit the form via an ajax request. There's an option in the class to reset the form after submit. You can set this value to true or false.

kesteb
14 Jun 2007, 2:19 PM
The above code example works. The parameters are correctly submited and the form resets it's self after submission. That is not the problem.

The question that I have is, is this the best/only way of reloading a combo box?

The problem is that the load query is made twice. Once before the combo box expansion and once when the combo box expands.

tryanDLS
14 Jun 2007, 3:13 PM
You need to take a look at the code for comboBox and understand the implications of what you're doing in this case. It would appear that since you did mode:'remote' it's going to load the store on clicking the arrow. When this process completes it fires the expand event in which you call reload. Once you understand the flow of things like onTriggerClick and doQuery, you may have a different idea about how to accomplish this.

Domitian
14 Jun 2007, 3:25 PM
The alternative option is to set the mode to local and hold all the stores client side. By doing this you can set filters on the stores and present the correct data when needed. Also for the situation your describing, you can clear the filter after the user submits which would be the equivalent to the reset that you're asking for.

kesteb
15 Jun 2007, 7:33 AM
I think I do understand the implications of what I am trying to do. The first time thru the form, the combo box will query twice. After a form submission or pressing the "Reset" button, there is only one query, and it happens in the "expand" event.

In my opinion, the expected behaviour after a form.reset() should be that combo boxes that have a remote data store, should automagically reload themselves when the arrow is clicked.

This is currently not happening. In fact the only way that I can get a reload to happen without the "expand' event, is to delete a character out of the text box. And this only works sporadically, and as far as I can tell, it is not progammable.

Statically loading the combo box will not work, as there is the potential of having several thousand items. Hence the desire to filter on the server side.

tryanDLS
15 Jun 2007, 8:17 AM
A reload is an expensive operation. Why would the default behavior be to reload on reset. If you want to reload, you can call store.reload at any point in your process. Also, reloading in the expand event is probably not good from a UI perspective. The user can click on and off the combo repeatedly and each time it's going to reload for no reason.

kesteb
15 Jun 2007, 9:27 AM
I think we are talking past each other.

I have a preceived problem with reloading a combo box. I came up with a solution that is not elegant, has several major problems, but it works.

I post the solution to this forum, asking if there is a better way.

So far, no better way.

So let's try this again.

I have a form, it has two combo boxes and three date fields. The second combo box is loaded remotely using the combined results from the other combo box and one or more of the date fields. Thus a parameter string needs to be created from those results.

I would also like the form to remain, and not go away when the "Submit" button is pressed. I would also like the form to be reset back to "defaults" when the "Reset" button is pressed and lastly, I want the form to go away when the "Cancel" button is pressed.

The 'beforeload" event allowes me to autogenerate the parameter string. Which is then sent with the url. The parametes are used to filter the returned data.

My understanding of the "reset" action is that everything is reset to defaults. What is the default of a remotely load data store. Not the current internal cache, but the data that resides on the server. So, it is my feeling that the second combo box should automagically reload itself from the remote data store after a form reset. This would be on the initial click of the arrow, all subsquent clicks should use the internally cached values.

Since this is not the observed behaviour, and the documentation doesn't explain how, and the examples don't show how and the forum has repeated questions asking how; I have to come to the conclusion: there is no better way.

So is there a better way, then brute forcing the "expand" event?

If so, please explain how. Do not tell me to read documentation, source code nor the forum. I have already done that.