PDA

View Full Version : ComboBox and JSON



kneedragger
15 Mar 2010, 12:34 PM
Hello all, it is my first post here. I have been learning ExtJS and I really like it! Everything was going so smoothly until today. I have spent 10 hours trying to get the ComboBox sample I found here: http://www.extjs.com/deploy/dev/examples/form/combos.html to work.

I've viewed the source and I'm baffled at this point. I keep getting the error: cbsite.applyTo is not a function. I have looked through all the forums and I have also tried renderTo but to no avail. I am using ExtJS version 2.2 and Apache 2.x as my web server. I am also trying this in both IE 7 and Firefox 3.6.

Here is my .html page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="ext_main.js">
Ext.onReady(function(){

});
</script>
</head>
<body>
<h1>Simple Combo</h1>
<input type="text" id="local-states" size="20"/>
</body>
</html>

Here is my .js file called ext_main.js

/*
* Ext JS Library 1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* [email protected]
*
* http://www.extjs.com/license
*/

// some data used in the examples
Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
];

var combos = {
init : function(){

// simple array store
var store = new Ext.data.SimpleStore({
fields: ['abbr', 'state', 'nick'],
data : Ext.exampledata.states
});
var cbsite = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true
});

cbsite.applyTo('local-states');

}};
Ext.onReady(combos.init, combos);

jlmt
16 Mar 2010, 1:03 AM
applyTo is a config option not a function, you need to do something like:



var cbsite = new Ext.form.ComboBox({
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
applyTo: 'local-states'
});

Note the last property in the ComboBox's config object.

kneedragger
16 Mar 2010, 7:05 AM
Ok, that makes sense now. I dissected some examples I found on this site and after MANY hours I have a clean working example.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
.:: Ext JS - Chapter 6 - ComboBox (local) ::.
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- ExtJS Basic Template -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif'; // Setting this is VERY important as it is used in most controls
</script>
<!-- End ExtJS Basic Template -->
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var mySimpleStore = new Ext.data.ArrayStore({
fields : ['name'],
data : [['Jack Slocum'], ['Abe Elias'], ['Aaron Conran'], ['Evan Trimboli']]
});
var combo = new Ext.form.ComboBox({
store: mySimpleStore,
displayField:'name',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a name...',
selectOnFocus:true,
applyTo: 'names'
});
});
</script>
</head>
<body>
<div>
<input type="text" id="names"/>
<br />
</div>
</body>
</html>