combobox won't close when using remote store

**eplur** · 19 Mar 2011 1:30 PM

When using the remote store (json) the combobox using that store does not close. When clicked the combo box expands and loads all the result but cannot select any item from it. I am using ext-4.0-pr5. Here is my simple combo box code -- what the hell am I missing? Changing the remote store to a local store with local data works fine.

<html>
<head>
<title>Your etiquette matters</title>
<link rel="stylesheet" type="text/css" href="extjs/css/ext-all-debug.css" />
<script type="text/javascript" src="extjs/js/bootstrap.js"></script>
<style type="text/css">
.mainView {
width: 600px;
margin-top: 300px;
margin-left: auto;
margin-right: auto;

}
</style>
</head>
<body>
<div class="mainView">
<div id="countryCombo"></div>
</div>
</body>
<script language="javascript">
Ext.require([
'Ext.form.ComboBox',
'Ext.form.FieldSet',
'Ext.tip.QuickTips',
'Ext.data.*'
]);

Ext.onReady(function() {
Ext.tip.QuickTips.init();

// Define the model for a Country
Ext.regModel('Country', {
fields: [
{type: 'integer', name: 'id'},
{type: 'string', name: 'name'},
{type: 'string', name: 'shortName'}
]
});

// The data store holding the states; shared by each of the ComboBox examples below
var countryStore = new Ext.data.Store({
model: 'Country',
autoLoad: true,
proxy : {
type: 'ajax',
url: 'getAllCountries.action',
reader: {
type: 'json',
root: 'countries'
}
}

});

// Simple ComboBox using the data store
var countryCombo = new Ext.form.ComboBox({
fieldLabel: 'Select a country',
renderTo: 'countryCombo',
displayField: 'name',
width: 500,
labelWidth: 130,
store: countryStore,
queryMode: 'remote',
typeAhead: false,
editable: false
});

});
</script>
</html>

Here's the JSON data coming back
{"allCountries":"success","countries":[{"id":1,"name":"Afghanistan","shortName":"AF"},{"id":2,"name":"Africa","shortName":""},{"id":3,"name":"Albania","shortName":"AL"},{"id":4,"name":"Algeria","shortName":"DZ"},{"id":5,"name":"American Samoa","shortName":"AS"},{"id":6,"name":"Andorra","shortName":"AD"},{"id":7,"name":"Angola","shortName":"AO"},{"id":8,"name":"Anguilla","shortName":"AI"},{"id":9,"name":"Antarctica","shortName":"AQ"},{"id":10,"name":"Antigua & Barbuda","shortName":"AG"},{"id":11,"name":"Antilles, Netherlands","shortName":"AN"},{"id":12,"name":"Arabia, Saudi","shortName":"SA"},{"id":13,"name":"Argentina","shortName":"AR"},{"id":14,"name":"Armenia","shortName":"AM"},{"id":15,"name":"Aruba","shortName":"AW"},{"id":16,"name":"Asia","shortName":""},{"id":17,"name":"Australia","shortName":"AU"},{"id":18,"name":"Austria","shortName":"AT"},{"id":19,"name":"Azerbaijan","shortName":"AZ"},{"id":20,"name":"Bahamas, The","shortName":"BS"},{"id":21,"name":"Bahrain","shortName":"BH"},{"id":22,"name":"Bangladesh","shortName":"BD"},{"id":23,"name":"Barbados","shortName":"BB"},{"id":24,"name":"Belarus","shortName":"BY"},{"id":25,"name":"Belgium","shortName":"BE"},{"id":26,"name":"Belize","shortName":"BZ"},{"id":27,"name":"Benin","shortName":"BJ"},{"id":28,"name":"Bermuda","shortName":"BM"},{"id":29,"name":"Bhutan","shortName":"BT"},{"id":30,"name":"Bolivia","shortName":"BO"},{"id":31,"name":"Bosnia and Herzegovina","shortName":"BA"},{"id":32,"name":"Botswana","shortName":"BW"},{"id":33,"name":"Bouvet Island","shortName":"BV"},{"id":34,"name":"Brazil","shortName":"BR"},{"id":35,"name":"British Indian Ocean T.","shortName":"IO"},{"id":36,"name":"British Virgin Islands","shortName":"VG"},{"id":37,"name":"Brunei Darussalam","shortName":"BN"},{"id":38,"name":"Bulgaria","shortName":"BG"},{"id":39,"name":"Burkina Faso","shortName":"BF"},{"id":40,"name":"Burundi","shortName":"BI"},{"id":41,"name":"Cambodia","shortName":"KH"},{"id":42,"name":"Cameroon","shortName":"CM"},{"id":43,"name":"Canada","shortName":"CA"},{"id":44,"name":"Cape Verde","shortName":"CV"},{"id":45,"name":"Caribbean, the","shortName":""},{"id":46,"name":"Cayman Islands","shortName":"KY"},{"id":47,"name":"Central African Republic","shortName":"CF"},{"id":48,"name":"Central America","shortName":""},{"id":49,"name":"Chad","shortName":"TD"},{"id":50,"name":"Chile","shortName":"CL"},{"id":51,"name":"China","shortName":"CN"},{"id":52,"name":"Christmas Island","shortName":"CX"},{"id":53,"name":"Cocos (Keeling) Islands","shortName":"CC"},{"id":54,"name":"Colombia","shortName":"CO"},{"id":55,"name":"Comoros","shortName":"KM"},{"id":56,"name":"Congo","shortName":"CG"},{"id":57,"name":"Congo, Dem. Rep. of the","shortName":"CD"},{"id":58,"name":"Cook Islands","shortName":"CK"},{"id":59,"name":"Costa Rica","shortName":"CR"},{"id":60,"name":"Cote D'Ivoire","shortName":"CI"},{"id":61,"name":"Croatia","shortName":"HR"},{"id":62,"name":"Cuba","shortName":"CU"},{"id":63,"name":"Cyprus","shortName":"CY"},{"id":64,"name":"Czech Republic","shortName":"CZ"},{"id":65,"name":"Denmark","shortName":"DK"},{"id":66,"name":"Djibouti","shortName":"DJ"},{"id":67,"name":"Dominica","shortName":"DM"},{"id":68,"name":"Dominican Republic","shortName":"DO"},{"id":69,"name":"East Timor (Timor-Leste)","shortName":"TP"},{"id":70,"name":"Ecuador","shortName":"EC"},{"id":71,"name":"Egypt","shortName":"EG"},{"id":72,"name":"El Salvador","shortName":"SV"},{"id":73,"name":"Equatorial Guinea","shortName":"GQ"},{"id":74,"name":"Eritrea","shortName":"ER"},{"id":75,"name":"Estonia","shortName":"EE"},{"id":76,"name":"Ethiopia","shortName":"ET"},{"id":77,"name":"Europe","shortName":""},{"id":78,"name":"European Union","shortName":"EU"},{"id":79,"name":"Falkland Islands (Malvinas)","shortName":"FK"},{"id":80,"name":"Faroe Islands","shortName":"FO"},{"id":81,"name":"Fiji","shortName":"FJ"},{"id":82,"name":"Finland","shortName":"FI"},{"id":83,"name":"France","shortName":"FR"},{"id":84,"name":"French Guiana","shortName":"GF"},{"id":85,"name":"French Polynesia","shortName":"PF"},{"id":86,"name":"French Southern Terr.","shortName":"TF"},{"id":87,"name":"Gabon","shortName":"GA"},{"id":88,"name":"Gambia, the","shortName":"GM"},{"id":89,"name":"Georgia","shortName":"GE"},{"id":90,"name":"Germany","shortName":"DE"},{"id":91,"name":"Ghana","shortName":"GH"},{"id":92,"name":"Gibraltar","shortName":"GI"},{"id":93,"name":"Greece","shortName":"GR"},{"id":94,"name":"Greenland","shortName":"GL"},{"id":95,"name":"Grenada","shortName":"GD"},{"id":96,"name":"Guadeloupe","shortName":"GP"},{"id":97,"name":"Guam","shortName":"GU"},{"id":98,"name":"Guatemala","shortName":"GT"},{"id":99,"name":"Guernsey and Alderney","shortName":"GG"},{"id":100,"name":"Guiana, French","shortName":"GF"},{"id":101,"name":"Guinea","shortName":"GN"},{"id":102,"name":"Guinea-Bissau","shortName":"GW"},{"id":103,"name":"Guinea, Equatorial","shortName":"GP"},{"id":104,"name":"Guyana","shortName":"GY"},{"id":105,"name":"Haiti","shortName":"HT"},{"id":106,"name":"Heard & McDonald Is.(AU)","shortName":"HM"},{"id":107,"name":"Holy See (Vatican)","shortName":"VA"},{"id":108,"name":"Honduras","shortName":"HN"},{"id":109,"name":"Hong Kong, (China)","shortName":"HK"},{"id":110,"name":"Hungary","shortName":"HU"},{"id":111,"name":"Iceland","shortName":"IS"},{"id":112,"name":"India","shortName":"IN"},{"id":113,"name":"Indonesia","shortName":"ID"},{"id":114,"name":"Iran, Islamic Republic of","shortName":"IR"},{"id":115,"name":"Iraq","shortName":"IQ"},{"id":116,"name":"Ireland","shortName":"IE"},{"id":117,"name":"Israel","shortName":"IL"},{"id":118,"name":"Italy","shortName":"IT"},{"id":119,"name":"Ivory Coast (Cote d'Ivoire)","shortName":"CI"},{"id":120,"name":"Jamaica","shortName":"JM"},{"id":121,"name":"Japan","shortName":"JP"},{"id":122,"name":"Jersey","shortName":"JE"},{"id":123,"name":"Jordan","shortName":"JO"},{"id":124,"name":"Kazakhstan","shortName":"KZ"},{"id":125,"name":"Kenya","shortName":"KE"},{"id":126,"name":"Kiribati","shortName":"KI"},{"id":127,"name":"Korea Dem. People's Rep.","shortName":"KP"},{"id":128,"name":"Korea, (South) Republic of","shortName":"KR"},{"id":129,"name":"Kosovo","shortName":"KV"},{"id":130,"name":"Kuwait","shortName":"KW"},{"id":131,"name":"Kyrgyzstan","shortName":"KG"},{"id":132,"name":"Lao People's Democ. Rep.","shortName":"LA"},{"id":133,"name":"Latvia","shortName":"LV"},{"id":134,"name":"Lebanon","shortName":"LB"},{"id":135,"name":"Lesotho","shortName":"LS"},{"id":136,"name":"Liberia","shortName":"LR"},{"id":137,"name":"Libyan Arab Jamahiriya","shortName":"LY"},{"id":138,"name":"Liechtenstein","shortName":"LI"},{"id":139,"name":"Lithuania","shortName":"LT"},{"id":140,"name":"Luxembourg","shortName":"LU"},{"id":141,"name":"Macao, (China)","shortName":"MO"},{"id":142,"name":"Macedonia, TFYR","shortName":"MK"},{"id":143,"name":"Madagascar","shortName":"MG"},{"id":144,"name":"Malawi","shortName":"MW"},{"id":145,"name":"Malaysia","shortName":"MY"},{"id":146,"name":"Maldives","shortName":"MV"},{"id":147,"name":"Mali","shortName":"ML"},{"id":148,"name":"Malta","shortName":"MT"},{"id":149,"name":"Man, Isle of","shortName":"IM"},{"id":150,"name":"Marshall Islands","shortName":"MH"},{"id":151,"name":"Martinique (FR)","shortName":"MQ"},{"id":152,"name":"Mauritania","shortName":"MR"},{"id":153,"name":"Mauritius","shortName":"MU"},{"id":154,"name":"Mayotte (FR)","shortName":"YT"},{"id":155,"name":"Mexico","shortName":"MX"},{"id":156,"name":"Micronesia, Fed. States of","shortName":"FM"},{"id":157,"name":"Middle East","shortName":""},{"id":158,"name":"Moldova, Republic of","shortName":"MD"},{"id":159,"name":"Monaco","shortName":"MC"},{"id":160,"name":"Mongolia","shortName":"MN"},{"id":161,"name":"Montenegro","shortName":"CS"},{"id":162,"name":"Montserrat","shortName":"MS"},{"id":163,"name":"Morocco","shortName":"MA"},{"id":164,"name":"Mozambique","shortName":"MZ"},{"id":165,"name":"Myanmar (ex-Burma)","shortName":"MM"},{"id":166,"name":"Namibia","shortName":"NA"},{"id":167,"name":"Nauru","shortName":"NR"},{"id":168,"name":"Nepal","shortName":"NP"},{"id":169,"name":"Netherlands","shortName":"NL"},{"id":170,"name":"Netherlands Antilles","shortName":"AN"},{"id":171,"name":"New Caledonia","shortName":"NC"},{"id":172,"name":"New Zealand","shortName":"NZ"},{"id":173,"name":"Nicaragua","shortName":"NI"},{"id":174,"name":"Niger","shortName":"NE"},{"id":175,"name":"Nigeria","shortName":"NG"},{"id":176,"name":"Niue","shortName":"NU"},{"id":177,"name":"Norfolk Island","shortName":"NF"},{"id":178,"name":"North America","shortName":""},{"id":179,"name":"Northern Mariana Islands","shortName":"MP"},{"id":180,"name":"Norway","shortName":"NO"},{"id":181,"name":"Oceania","shortName":""},{"id":182,"name":"Oman","shortName":"OM"},{"id":183,"name":"Pakistan","shortName":"PK"},{"id":184,"name":"Palau","shortName":"PW"},{"id":185,"name":"Palestinian Territory","shortName":"PS"},{"id":186,"name":"Panama","shortName":"PA"},{"id":187,"name":"Papua New Guinea","shortName":"PG"},{"id":188,"name":"Paraguay","shortName":"PY"},{"id":189,"name":"Peru","shortName":"PE"},{"id":190,"name":"Philippines","shortName":"PH"},{"id":191,"name":"Pitcairn Island","shortName":"PN"},{"id":192,"name":"Poland","shortName":"PL"},{"id":193,"name":"Portugal","shortName":"PT"},{"id":194,"name":"Puerto Rico","shortName":"PR"},{"id":195,"name":"Qatar","shortName":"QA"},{"id":196,"name":"Reunion (FR)","shortName":"RE"},{"id":197,"name":"Romania","shortName":"RO"},{"id":198,"name":"Russia (Russian Fed.)","shortName":"RU"},{"id":199,"name":"Rwanda","shortName":"RW"},{"id":200,"name":"Sahara, Western","shortName":"EH"},{"id":201,"name":"Saint Barthelemy (FR)","shortName":"BL"},{"id":202,"name":"Saint Helena (UK)","shortName":"SH"},{"id":203,"name":"Saint Kitts and Nevis","shortName":"KN"},{"id":204,"name":"Saint Lucia","shortName":"LC"},{"id":205,"name":"Saint Martin (FR)","shortName":"MF"},{"id":206,"name":"S Pierre & Miquelon (FR)","shortName":"PM"},{"id":207,"name":"S Vincent & Grenadines","shortName":"VC"},{"id":208,"name":"Samoa","shortName":"WS"},{"id":209,"name":"San Marino","shortName":"SM"},{"id":210,"name":"Sao Tome and Principe","shortName":"ST"},{"id":211,"name":"Saudi Arabia","shortName":"SA"},{"id":212,"name":"Senegal","shortName":"SN"},{"id":213,"name":"Serbia","shortName":"RS"},{"id":214,"name":"Seychelles","shortName":"SC"},{"id":215,"name":"Sierra Leone","shortName":"SL"},{"id":216,"name":"Singapore","shortName":"SG"},{"id":217,"name":"Slovakia","shortName":"SK"},{"id":218,"name":"Slovenia","shortName":"SI"},{"id":219,"name":"Solomon Islands","shortName":"SB"},{"id":220,"name":"Somalia","shortName":"SO"},{"id":221,"name":"South Africa","shortName":"ZA"},{"id":222,"name":"South America","shortName":""},{"id":223,"name":"S.George & S.Sandwich","shortName":"GS"},{"id":224,"name":"Spain","shortName":"ES"},{"id":225,"name":"Sri Lanka (ex-Ceilan)","shortName":"LK"},{"id":226,"name":"Sudan","shortName":"SD"},{"id":227,"name":"Suriname","shortName":"SR"},{"id":228,"name":"Svalbard & Jan Mayen Is.","shortName":"SJ"},{"id":229,"name":"Swaziland","shortName":"SZ"},{"id":230,"name":"Sweden","shortName":"SE"},{"id":231,"name":"Switzerland","shortName":"CH"},{"id":232,"name":"Syrian Arab Republic","shortName":"SY"},{"id":233,"name":"Taiwan","shortName":"TW"},{"id":234,"name":"Tajikistan","shortName":"TJ"},{"id":235,"name":"Tanzania, United Rep. of","shortName":"TZ"},{"id":236,"name":"Thailand","shortName":"TH"},{"id":237,"name":"Timor-Leste (East Timor)","shortName":"TL"},{"id":238,"name":"Togo","shortName":"TG"},{"id":239,"name":"Tokelau","shortName":"TK"},{"id":240,"name":"Tonga","shortName":"TO"},{"id":241,"name":"Trinidad & Tobago","shortName":"TT"},{"id":242,"name":"Tunisia","shortName":"TN"},{"id":243,"name":"Turkey","shortName":"TR"},{"id":244,"name":"Turkmenistan","shortName":"TM"},{"id":245,"name":"Turks and Caicos Islands","shortName":"TC"},{"id":246,"name":"Tuvalu","shortName":"TV"},{"id":247,"name":"Uganda","shortName":"UG"},{"id":248,"name":"Ukraine","shortName":"UA"},{"id":249,"name":"United Arab Emirates","shortName":"AE"},{"id":250,"name":"United Kingdom","shortName":"UK"},{"id":251,"name":"United States","shortName":"US"},{"id":252,"name":"US Minor Outlying Isl.","shortName":"UM"},{"id":253,"name":"Uruguay","shortName":"UY"},{"id":254,"name":"Uzbekistan","shortName":"UZ"},{"id":255,"name":"Vanuatu","shortName":"VU"},{"id":256,"name":"Vatican (Holy See)","shortName":"VA"},{"id":257,"name":"Venezuela","shortName":"VE"},{"id":258,"name":"Viet Nam","shortName":"VN"},{"id":259,"name":"Virgin Islands, British","shortName":"VG"},{"id":260,"name":"Virgin Islands, U.S.","shortName":"VI"},{"id":261,"name":"Wallis and Futuna","shortName":"WF"},{"id":262,"name":"Western Sahara","shortName":"EH"},{"id":263,"name":"Yemen","shortName":"YE"},{"id":264,"name":"Zambia","shortName":"ZM"},{"id":265,"name":"Zimbabwe","shortName":"ZW"},{"id":266,"name":"N\/A","shortName":null}]}

**sraghavachari** · 22 Mar 2011 1:53 PM

I am seeing the exact behaviour. Remote store it lets u scroll thru the list but i cannot select. Any updates on this one?

**aenigmatic** · 23 Mar 2011 9:05 AM

I have had this problem as well, however it seems to work fine with a local query mode even using a server proxy.

If you do not need the server-side filtration feature, you can set querymode: 'local' and add a listener to afterrender:

Code:

listeners : {
       afterrender : function() {
		this.store.load();
	}
}

All I wanted was a fancy select box with filtration against data loaded in memory, so this worked fine for me. I think we may have to wait for a future release to fix the remotequery feature.

**eplur** · 23 Mar 2011 4:28 PM

As stated here http://www.sencha.com/forum/showthre...election-Issue
This known bug is fixed and committed.

To fix it, I just searched for "selModel.select(models);" in the ext js file I am using and right after

Code:

 if (models.length) {
      selModel.select(models);
 }

block, I inserted
delete me.inSetValue;

That fixed it for me.

combobox won't close when using remote store

Thread Tools

Search Thread

Display

combobox won't close when using remote store

combobox won't close when using remote store

same behavior for me -- workaround

same behavior for me -- workaround

know bug fixed

know bug fixed

Similar Threads

ComboBox with a remote store into an EditorGrid

ComboBox default value with remote Store

ComboBox default value with remote Store

autoLoad ComboBox from remote store? How?

ComboBox with remote store

Tags for this Thread