PDA

View Full Version : 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 (http://www.charlieholder.com/img/other/Picture9.png).

main.html:

<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:

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
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();
});