PDA

View Full Version : SelectField -- adding new options with ajax



dobie_
30 Sep 2011, 12:09 PM
I have a 'country' select field that I'd like to populate with a list of countries retrieved from the database. I'm not sure how to add options to the selectfield automatically in my AJAX call, though. Could someone point me in the right direction or show me an example?

bassjobsen
1 Oct 2011, 12:57 AM
With json store:

Ext.setup( {
onReady: function() {

Ext.regModel('Countries', {
idProperty: 'idcounty',
fields : [ {
name : 'idcounty',
type : 'int'
}, {
name : 'county',
type : 'string'
} ]
});
var selectValues = new Ext.data.Store({
model: "Countries",
proxy: {
type : 'ajax',
url : 'lib/test.json',
reader : {
type : 'json',
root : 'results',
totalCount : 'total'
}},
autoLoad: true
});


var countryList = new Ext.form.Select(
{
id: 'countries',
name: 'countries',
label: 'Select your country',
store: selectValues,
displayField: 'Select your country',
displayField: 'county',
valueField: 'idcounty',

});



new Ext.Panel({

fullscreen : true,
title : 'Test Panel',
id : 'testPanel',
items: [{
xtype: "form",
id: "CalculateForm",
items: [countryList]
}]

});






}

});

lib/test.json contains:

{"total":"67","results":[{"idcounty":"1","county":"Broward"},{"idcounty":"2","county":"Dade"},{"idcounty":"3","county":"Palm Beach"},{"idcounty":"4","county":"Osceola"},{"idcounty":"5","county":"Lake"},{"idcounty":"6","county":"Orange"},{"idcounty":"7","county":"Seminole"},{"idcounty":"8","county":"Volusia"},{"idcounty":"9","county":"Hillsborough"},{"idcounty":"10","county":"Polk"},{"idcounty":"11","county":"Pasco"},{"idcounty":"12","county":"Pinellas"},{"idcounty":"13","county":"Sarasota"},{"idcounty":"14","county":"Manatee"},{"idcounty":"15","county":"Charlotte"},{"idcounty":"16","county":"Alachua"},{"idcounty":"17","county":"Baker"},{"idcounty":"18","county":"Bay"},{"idcounty":"19","county":"Bradford"},{"idcounty":"20","county":"Brevard"},{"idcounty":"21","county":"Calhoun"},{"idcounty":"22","county":"Citrus"},{"idcounty":"23","county":"Clay"},{"idcounty":"24","county":"Collier"},{"idcounty":"25","county":"Columbia"},{"idcounty":"34","county":"Duval"},{"idcounty":"35","county":"Escambia"},{"idcounty":"36","county":"Flagler"},{"idcounty":"37","county":"Franklin"},{"idcounty":"38","county":"Gadsden"},{"idcounty":"39","county":"Gilchrist"},{"idcounty":"40","county":"Glades"},{"idcounty":"41","county":"Gulf"},{"idcounty":"42","county":"Hamilton"},{"idcounty":"43","county":"Hardee"},{"idcounty":"44","county":"Hendry"},{"idcounty":"45","county":"Hernando"},{"idcounty":"46","county":"Highlands"},{"idcounty":"47","county":"Holmes"},{"idcounty":"48","county":"Jackson"},{"idcounty":"49","county":"Jefferson"},{"idcounty":"50","county":"Lafayette"},{"idcounty":"52","county":"Lee"},{"idcounty":"53","county":"Leon"},{"idcounty":"54","county":"Levy"},{"idcounty":"55","county":"Liberty"},{"idcounty":"56","county":"Madison"},{"idcounty":"58","county":"Martin"},{"idcounty":"59","county":"Monroe"},{"idcounty":"60","county":"Nassau"},{"idcounty":"61","county":"Okaloosa"},{"idcounty":"62","county":"Okeechobee"},{"idcounty":"63","county":"Putnam"},{"idcounty":"64","county":"Sumter"},{"idcounty":"65","county":"Taylor"},{"idcounty":"66","county":"Union"},{"idcounty":"67","county":"Wakulla"},{"idcounty":"68","county":"Walton"},{"idcounty":"69","county":"Washington"},{"idcounty":"70","county":"DeSoto"},{"idcounty":"71","county":"IndianRiver"},{"idcounty":"72","county":"SantaRosa"},{"idcounty":"75","county":"St Johns"},{"idcounty":"77","county":"St Lucie"},{"idcounty":"78","county":"Dixie"},{"idcounty":"80","county":"Suwannee"},{"idcounty":"81","county":"Marion"}]}

You can replace the json store with a DB store, see b.e. http://blog.bhushangahire.net/2011/05/05/sencha-touch-adding-records-to-a-store-from-a-client-side-sql-lite-db/