1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    27
    Vote Rating
    0
    charlieholder is on a distinguished road

      0  

    Default Creating a ComboBox

    Creating a ComboBox


    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.

  2. #2
    Ext User
    Join Date
    Mar 2008
    Posts
    27
    Vote Rating
    0
    charlieholder is on a distinguished road

      0  

    Default


    SOLVED.

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Mar 2008
    Posts
    27
    Vote Rating
    0
    charlieholder is on a distinguished road

      0  

    Default


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

Thread Participants: 1