PDA

View Full Version : Ext.form.ComboBox loading slow in IE



AbhishekS
4 Feb 2010, 11:56 PM
Hi,

My Ext.form.ComboBox is taking a long time to load because the json store has an array of about 5000 records with 3 fields each.

It takes 11 - 15 seconds to render and display. Is there anything i can do to speed this up ?

Regards
Abhishek

5 Feb 2010, 5:11 AM
yeah, that's gonna be slow just about anywhere. What i don't get is why you are bombarding your users with 5000 selectable items. That's really unusable!

jjulian
5 Feb 2010, 10:23 AM
Is there anything i can do to speed this up ?

Send fewer records.

Seriously, Jay is right. If the user really does have 5000 choices, maybe load records based on what the user has typed so far (an autosuggest combo box).

AbhishekS
6 Feb 2010, 12:16 PM
Thanks for your replie.

Well the user has those many options, and he is going to type it, so thats why i preferred the ext.combo, cause you can type in it and it shows a autosuggest behaviour.


@julian - is there any other component i could use instead ? Do you have a snaphot or code snippet for something like that ?


Regards
Abhishek

jjulian
6 Feb 2010, 1:10 PM
ComboBox has built-in support for autosuggest. Here is an example:



{
xtype: 'combo',
name: 'last_name',
fieldLabel: 'Last Name',
typeAhead: true,
minChars: 1,
displayField: 'last_name',
valueField: 'last_name',
store: new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: 'names.php', method: 'GET'}),
fields: ['last_name'],
root: 'rows'
})
}


names.php is your server code - only return names that start with the "query" param (which is sent to the server).



<?php
# ..set up your database..
$query = $_GET['query'];
$list = mysql_query("SELECT * FROM users where last_name like '$query%' ORDER BY last_name ASC");

echo <<<_STR
{"rows": [
_STR;

while($row_list=mysql_fetch_assoc($list)){
$last_name = $row_list['last_name'];
echo <<<_STR
{"last_name": "$last_name"},
_STR;
}

echo <<<_STR
]}
_STR;
?>


Here is an example of the JSON you'll want to return:



{"rows": [{"last_name": "Adams"},{"last_name": "Faulkner"},{"last_name": "Tesla"},{"last_name": "Van Halen"}]}