Creating a ComboBox

**charlieholder** · 14 Apr 2008 10:57 AM

The ComboBox does render. The options are "there", but you can't see them. Screen shot.

main.html:

Code:

<html>
<head>
	<title>Curriculum Example</title>

	<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
	<script type="text/javascript" src="ext_sample.js"></script>
	<script type="text/javascript" src="AIRAliases.js"></script>
	<script type="text/javascript" src="AIRIntrospector.js"></script>
	<script type="text/javascript">
		function logStuff()
		{
		    var c_box = document.getElementById("local-states");
		    air.Introspector.Console.log(c_box);
		}
	</script>

	<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />
	<link rel="stylesheet" type="text/css" href="ext_sample.css" />
</head>
<body id="home">

<form class="x-combo-list-item">
<input id="local-states" type="text" name="local-states" onfocus="logStuff();" />
</form>

</body>
</html>

ext_sample.js:

Code:

var combo = new Ext.XTemplate(
	'<tpl for="."><div class="x-combo-list-item"></div></tpl>'
);
Ext.onReady(function(){
	var myData = [
		['AL', 'Alabama'],
		['AK', 'Alaska'],
		['AZ', 'Arizona'],
		['AR', 'Arkansas'],
		['CA', 'California'],
		['CO', 'Colorado'],
		['CN', 'Connecticut'],
		['DE', 'Delaware'],
		['DC', 'District of Columbia']
	];
	var theData = new Ext.data.SimpleStore({
		fields: ['abbr', 'state'],
		data : myData
	});
	var cbox = new Ext.form.ComboBox({
		el: 'local-states',
		store: theData,
		tpl: combo,
		displayField: 'state',
		valueField: 'abbr',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select A State',
		selectOnFocus: true
	});
	cbox.render();
});

Can anyone offer advice? The AIRIntrospector is very difficult to understand IMO. I was able to find that when inspecting the HTML that is being parsed, each of the combo list items have no HTML associated with them.

**charlieholder** · 14 Apr 2008 12:01 PM

SOLVED.

**jay@moduscreate.com** · 15 Apr 2008 3:35 PM

posting your solution is as valuable - if not more - than your problem.

**charlieholder** · 21 Apr 2008 7:56 AM

Code:

var combo = new Ext.XTemplate(
	'<tpl for="."><div class="x-combo-list-item">{state}</div></tpl>'
);
Ext.onReady(function(){
	// some data used in the examples
	var myData = [
		['AL', 'Alabama'],
		['AK', 'Alaska'],
		['AZ', 'Arizona'],
		['AR', 'Arkansas'],
		['CA', 'California'],
		['CO', 'Colorado'],
		['CN', 'Connecticut'],
		['DE', 'Delaware'],
		['DC', 'District of Columbia']
	];
	var theData = new Ext.data.SimpleStore({
		fields: ['abbr', 'state'],
		data : myData
	});
	var cbsite = new Ext.form.ComboBox({
		el: 'local-states',
		store: theData,
		tpl: combo,
		displayField: 'state',
		valueField: 'abbr',
		typeAhead: true,
		mode: 'local',
		triggerAction: 'all',
		emptyText: 'Select A State',
		selectOnFocus: true
	});
	
	cbsite.render();
});

Creating a ComboBox

Thread Tools

Search Thread

Display

Creating a ComboBox

Creating a ComboBox