Ext JS - Learning Center

Manual:Forms:ComboBox

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Ext Manual > Forms >

Ext.form.ComboBox

After some frustration with documentation and examples trying to get a simple combobox created, I distilled one of the examples down to the essentials. You should be able to install Ext, copy/paste the code below and you should be good to go. There are just two files you are creating, a HTML and ext_main.js...

HTML: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>my combo</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />

    <!-- GC --> <!-- LIBS -->     
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>   
<script type="text/javascript" src="lib/ext/ext-all.js"></script>

<script type="text/javascript" src="ext_main.js"></script>

</head>
  
<body>
	
<h1>Simple Combo</h1>

<input type="text" id="local-states" size="20"/>

</body>
</html>


Code in ext_main.js: 

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
	
// some data used in the examples
Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
        ['AL', 'Alabama'],
        ['AK', 'Alaska'],
        ['AZ', 'Arizona'],
        ['AR', 'Arkansas'],
        ['CA', 'California'],
        ['CO', 'Colorado'],
        ['CN', 'Connecticut'],
        ['DE', 'Delaware'],
        ['DC', 'District of Columbia'] ];
			
var combos = {
    init : function(){
        

   // simple array store
var store = new Ext.data.SimpleStore({
    fields: ['abbr', 'state'],
    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);

Submitting Values

If you have been wondering how to submit the values to the server using a combo box, this is the way to do it.

The two options to use for defining what is displayed and what the values are for a selection combo box are displayField and valueField.

displayField : String
The underlying data field name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'text' if transforming a select)

valueField : String
The underlying data value name to bind to this ComboBox (defaults to undefined if mode = 'remote' or 'value' if transforming a select) Note: use of a valueField requires the user to make a selection in order for a value to be mapped.

hiddenName : String
When an Ext form is submitted, it simply submits the input elements that exist in the form DOM element. Obviously, what you see is what you get. Selecting a Combobox option populates a text input with the display field as you can see on the screen.

To submit the value field, requires that a hidden input be created to hold the selected value field. The name of this is specified by the config option hiddenName

So, if you want to post the value of the combo box as a param with the rest of your form, add: 

hiddenName: 'nameOfParamHere'

to your combo box initializing config.

If you do not want the display value submitted, do not specify a name in the configuration object.

Links

Retrieved from "http://www.extjs.com/learn/Manual:Forms:ComboBox"
  • This page was last modified on 20 May 2008, at 07:29.
  • This page has been accessed 27,484 times.