PDA

View Full Version : Loading DataStore on ComboBox focus..?



rvent
24 Apr 2008, 11:37 AM
Hello,

I have this form that when opened it loads up 4 json data stores that get data from MySQL. Here is what one of my comboboxes looks like.


var parts = new Ext.form.ComboBox({
store: dataStoreParts,
fieldLabel: 'Part Number',
displayField:'PartNumber',
name: 'PartNumber',
allowBlank: false,
pageSize:10,
hideTrigger:true,
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Part...',
selectOnFocus:true,
width: 230
});


It works fine, but i notice that it takes a little long to load up the form. So i was thinking on loading the datastore on the field focus... But i cant seem to get it right..

here is my code for the datastore creation:


var dataRecordParts = new Ext.data.Record.create([
{name: 'PartNumber'},
{name: 'PartNumberID'}
]);

var dataReaderParts = new Ext.data.JsonReader({
root: 'results'
},
dataRecordParts
);

var dataProxyParts = new Ext.data.HttpProxy({
url: '../../../index.php/listboards/js_listUniqueParts',
method: 'POST'
});

var dataStoreParts = new Ext.data.Store({
proxy: dataProxyParts,
reader: dataReaderParts
});


Do i need to put all that code in a function in the "focus" config...? If so how can i set the store config property for the combobox..? wouldnt it be out of the scope..? Would i need the datasore.load() in the focus function..???

Perhaps like something like this...?


var parts = new Ext.form.ComboBox({
store: dataStoreParts, <----- What happens here. Stil in scope?
fieldLabel: 'Part Number',
displayField:'PartNumber',
name: 'PartNumber',
focus: function(){

MORE CODE HERE,..........

dataStoreParts.load();
},
allowBlank: false,
pageSize:10,
hideTrigger:true,
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Part...',
selectOnFocus:true,
width: 230
});


Thanks

24 Apr 2008, 11:45 AM
put autoLoad : false on your store declaration and it will load when needed.

rvent
24 Apr 2008, 12:01 PM
Well that still does the same thing...

I have 5 ComboBoxes that get data from MySQL, all of those are in the same FormPanel. So when the window with the FormPanel comes up all the datastores are loaded.

What i was looking for was to load each datastore individually and only when the ComboBox recieves focus...

Is it possible..?

24 Apr 2008, 1:00 PM
eh, i think the problem may be that you're using 'mode : "local"'

rvent
24 Apr 2008, 1:21 PM
Thats kind of the problem.

I changed it to 'remote' and removed the autoLoad and it worked only when i clicked on the pulldown...

But doing that doesnt let me do typeAhead... Would there be a way to make typeAhead work on this scenario..?

That's why i wasa thinking that it had to be done in the focus property since at that moment the user starts typing which will trigger the datastore load and the type ahead should(technically) work...

Leaving autoLoad: true will load the data when the form comes up...

Am i looking at the wrong direction..?


Thanks

rvent
25 Apr 2008, 6:06 AM
I tried doing



onSelect: function(){
dataStoreParts.load();
},


But it didnt work...

any other ideas...?

Thanks

25 Apr 2008, 6:07 AM
onSelect is only when a record is selected.

Why are you refusing to do the data load remotely?

rvent
25 Apr 2008, 6:22 AM
I am not refusing to use it, but when i do use it the typeAhead doesnt work...

This combobox will get around 1000 part numbers so not having typeAhead will make it difficult to find a part number. I do have pagination enabled, but still cant do typeAhead...

Can i use a SearchField as a form field...?

I couldnt find any info on SearchFields on the docs, but a single example which when i try it i get some error about "its not a constructor"



var parts = new Ext.app.SearchField({
store: ds,
width:320
});

25 Apr 2008, 6:32 AM
typeAhead works for remote calls.

25 Apr 2008, 6:33 AM
Ext.app is not something that is part of the OOTB code.

rvent
25 Apr 2008, 7:05 AM
var dataRecordParts = new Ext.data.Record.create([
{name: 'PartNumber'},
{name: 'PartNumberID'}
]);

var dataReaderParts = new Ext.data.JsonReader({
root: 'results'
},
dataRecordParts
);

var dataProxyParts = new Ext.data.HttpProxy({
url: '../../../index.php/listboards/js_listUniqueParts',
method: 'POST'
});

var dataStoreParts = new Ext.data.Store({
proxy: dataProxyParts,
reader: dataReaderParts
//autoLoad: true
});

//******* Combo Box
var parts = new Ext.form.ComboBox({
store: dataStoreParts,
fieldLabel: 'Part Number',
displayField:'PartNumber',
name: 'PartNumber',
allowBlank: false,
pageSize:10,
loadingText: 'Searching...',
hideTrigger: false,
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'Select a Part...',
//selectOnFocus:true,
width: 260
});


The only way typeAhead will work is by having autoLoad: true or by dataStore.load() and mode: local. It will not work like it is above, at least i cant seem to find my problem, but as far as i know it wont work on remote.

rvent
25 Apr 2008, 7:35 AM
Ok, i dont know whats going on now...

I start typing and it shows all the parts even when what i am typing doesnt match anthing.

Parts are like: 100xxxxxx, TH3xxxxxx, H100xxxx, H35xxxxx, where x is ither another number or letter.

But when i start typing 100 i get all of the results. Shouldnt it be filtering out TH, H100, H35 and anything that doesnt start with 100...?

Code:


//*************** Data from DataBase to create Parts combo box
var dataRecordParts = new Ext.data.Record.create([
{name: 'PartNumber'},
{name: 'PartNumberID'}
]);

var dataReaderParts = new Ext.data.JsonReader({
root: 'results'
},
dataRecordParts
);

var dataProxyParts = new Ext.data.HttpProxy({
url: '../../../index.php/listboards/js_listUniqueParts',
method: 'POST'
});

var dataStoreParts = new Ext.data.Store({
proxy: dataProxyParts,
reader: dataReaderParts
//autoLoad: true
});

var parts = new Ext.form.ComboBox({
store: dataStoreParts,
fieldLabel: 'Part Number',
displayField:'PartNumber',
valueField: 'PartNumberID',
allowBlank: false,
pageSize: 8,
//minChars: 3,
loadingText: 'Searching...',
hideTrigger: true,
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText: 'Select a Part...',
selectOnFocus: false,
width: 260
});

25 Apr 2008, 7:36 AM
remote requests need to be filtered by the server.