PDA

View Full Version : Combo Does Not Load on Trigger Click



accguy
7 Jul 2010, 7:32 AM
Thank you in advance for your help. Below is my question/problem:

When I click the trigger on the combo box (code is below), the list is empty. But, if I type 4 characters (or whatever minChars is), the list populates and I can select one of the values. I have verified with Wireshark that no requests are sent to 'perl/get-object-data.pl' until you type in 4 characters, then a POST is sent and the server sends back the list. This is what is sent back:



[{"value":"Server","id":0},{"value":"Printer","id":1},{"value":"TerminalServer","id":2},{"value":"ImagingSystem","id":3}]


buildSelectDeviceTypeContainer : function () {

var comboStore = {
xtype : 'jsonstore',
autoLoad : true,
url : 'perl/get-object-data.pl',
fields : ['id','value']
};

return {
xtype : 'container',
layout : 'column',
anchor : '-10',
defaultType : 'container',
defaults : {
width : this.containerWidth,
labelWidth : this.containerlabelWidth,
layout : 'form'
},
items : [
{
items : {
xtype : 'combo',
displayField : 'value',
valueField : 'id',
emptyText : 'Select A Device Type',
lazyInit : false,
forceSelection : true,
tirggerAction : 'all',
mode : 'remote',
fieldLabel : 'Select Device Type',
name : 'selectDeviceType',
allowBlank : false,
id : 'deviceType',

store : comboStore,

listeners : {
scope : this,
change : this.buildOptionalFieldFields
}
}
}
]
};
},

Thank you very much,

acc.

7 Jul 2010, 7:43 AM
I would suggest not setting the store's autoLoad to true. The default "mode" is 'remote' btw. :)

Animal
7 Jul 2010, 7:45 AM
That's a mode: 'local' combo if you autoLoad a fixed Store with a small dataset!

You don't want it querying the server on every keystroke if it's just a small dataset.

accguy
7 Jul 2010, 8:57 AM
Thank you both for your help!


@jgarcia: I removed the autoLoad with the same results. I had the mode:remote in there because I was playing with it and it was easier to leave it there and change its value.

@animal: Yes, the sample data set returned in small, but, it will be of an arbitrary size, and stored on a remote system, so 'local' is not an option (if I am reading your comment correctly and understand the meaning of 'loca' and 'remote').

And, what I would really like is a combo that:

- When the trigger is clicked, has a list from which to select.

and/or

- If you type in the field, it auto filters the list based on what you type.


Thank you again

Acc.

accguy
7 Jul 2010, 9:03 AM
BTW, if I replace the store with the store below, clicking the trigger does show the list...



store : [
'Server',
'Printter',
'Terminal Server',
'Imaging System',
'Workstatoin',
'Time Clock'
],

Animal
7 Jul 2010, 9:15 AM
local is correct.

autoLoad the store, then the data is local.

7 Jul 2010, 9:17 AM
Thank you in advance for your help. Below is my question/problem:

When I click the trigger on the combo box (code is below), the list is empty. But, if I type 4 characters (or whatever minChars is), the list populates and I can select one of the values. I have verified with Wireshark that no requests are sent to 'perl/get-object-data.pl' until you type in 4 characters, then a POST is sent and the server sends back the list. This is what is sent back:



[{"value":"Server","id":0},{"value":"Printer","id":1},{"value":"TerminalServer","id":2},{"value":"ImagingSystem","id":3}]


buildSelectDeviceTypeContainer : function () {

var comboStore = {
xtype : 'jsonstore',
autoLoad : true,
url : 'perl/get-object-data.pl',
fields : ['id','value']
};

return {
xtype : 'container',
layout : 'column',
anchor : '-10',
defaultType : 'container',
defaults : {
width : this.containerWidth,
labelWidth : this.containerlabelWidth,
layout : 'form'
},
items : [
{
items : {
xtype : 'combo',
displayField : 'value',
valueField : 'id',
emptyText : 'Select A Device Type',
lazyInit : false,
forceSelection : true,
tirggerAction : 'all',
mode : 'remote',
fieldLabel : 'Select Device Type',
name : 'selectDeviceType',
allowBlank : false,
id : 'deviceType',

store : comboStore,

listeners : {
scope : this,
change : this.buildOptionalFieldFields
}
}
}
]
};
},

Thank you very much,

acc.

tirggerAction != triggerAction (see above red)

Animal
7 Jul 2010, 9:24 AM
That will query the server and reload the whole store when the trigger is clicked.

And will send off the characters typed as soon as you pause typing and reload the Store with what's returned.

mode: 'local' is required.

7 Jul 2010, 9:27 AM
That will query the server and reload the whole store when the trigger is clicked.

And will send off the characters typed as soon as you pause typing and reload the Store with what's returned.

mode: 'local' is required.

Yes. but it was the original problem.

Animal
7 Jul 2010, 9:38 AM
Then why autolLoad the Store? If you are going to load it dynamically as they type?

The OP has misunderstood the meaning of mode local/remote.

The STORE may be loaded remotely. But then the ComboBox is configured mode: 'local'. It just interacts with the loaded Store, it does not send queries to the server.

The OP did not want it sending queries to the server over and over.

accguy
7 Jul 2010, 9:41 AM
And, due to my lack of understanding with regard to local and remote, I was not able to ask the right questions along the way. Now, I think I have it.

local = load once and keep the data in the combo box.

remote = reload every time the combo box is used, accounting for the fact that the list values may change on the remote server between the time the form is originally loaded and the time the combo box is used (or even reused).

If these are right, then I think I need 'remote'. Understanding these two settings is really helpful! Thank you Animal and Jay!


New Problem: Form Reset sets combo box to first value, not the 'emptyText'. I will start a new thread for that with an appropriate subject.

Thank you both again ! Huge help!

Acc.

accguy
7 Jul 2010, 9:43 AM
True, the OP was without clue ;)

7 Jul 2010, 9:43 AM
The OP did not want it sending queries to the server over and over.

Nige, I can't find any text provided by the OP that supports this ;)

Original symptom:


When I click the trigger on the combo box (code is below), the list is empty. But, if I type 4 characters (or whatever minChars is), the list populates and I can select one of the values.

Further refined desired operation:


And, what I would really like is a combo that:

- When the trigger is clicked, has a list from which to select.

and/or

- If you type in the field, it auto filters the list based on what you type.


Thank you again

Acc.

triggerAction : 'all' takes care of this nicely.

7 Jul 2010, 9:44 AM
@Acc:

Dude, i got tired of dealing with emptyText, so I stopped using it.

Animal
7 Jul 2010, 9:47 AM
Mode 'local' does all that.

If the dataset is small, then mode: 'local' is the correct setting.

Typing then filters the preloaded Store. It does not reload it over the network.

7 Jul 2010, 9:49 AM
There is a benefit to what @Animal is suggesting, if you don't expect the data to change often.

Animal
7 Jul 2010, 9:57 AM
Looking at his JSON in the first post it looks like that kind of data: Small and static.

accguy
7 Jul 2010, 10:30 AM
@Animal: In the final app the data will probably be restricted to a list of no more than 100 items, however, it will most likely need to be refreshed each time the user clicks the trigger.

However, now that I understand the difference between the two types, I can use them appropriately (I hope).

Acc.

accguy
7 Jul 2010, 10:33 AM
@Jay: If not emptyText, do you simply put in zeroth dummy item? And if so, how do you ensure that it is not treated as a real value? Or, am I just way off?

accguy
7 Jul 2010, 10:40 AM
@Jay: BTW, the tirgger spelling issue was the problem with the list loading. Thanks!

accguy
7 Jul 2010, 11:08 AM
@Jay: To solve the emptyText problem (despite what I will most likely find out in the future to be your good advice), I put the following in the ComboBox override file:



reset : function(){
Ext.form.ComboBox.superclass.reset.call(this);
if(this.clearFilterOnReset && this.mode == 'local'){
this.store.clearFilter();
}
// Unconditionally reset the value back to emptyText...
this.setRawValue(this.emptyText);
this.el.addClass(this.emptyClass);



acc.

7 Jul 2010, 11:13 AM
My main issue with empty text is that it gets submitted by the framework as "default value" instead of being ignored.