.:: CODE SNIPPET ::.

"Your time is limited, so don't waste it living someone else's life"

How to make Combobox and explain the meaning in EXT


//You have to insert the Javascript file, ext-all.css; ext-base.js; xt-all.js;

<html>
<head>
<title>Ext Example</title>
<link rel="stylesheet" type="text/css" href="extin/resources/css/ext-all.css">
<script type="text/javascript" src="extin/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extin/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();

//Create a simple data array with the array below
var dat=[['1','Hoang Minh'],['2','Van Quang'],['3','Diem An'],
['4','Hong Hanh'],['5','Van An']];

//Now, you create a Store to store the data of the ComboBox  like this
var store=new Ext.data.ArrayStore({
fields:['ms','name'], // this is the field of the data above, in this occasion, we have 2 field in every row of data, they are 'ms' and 'name'
data:dat //this property will pour the data into the store with the data 'dat' above
});<!--more-->

//This is the main step to create a combobox, use the constructor Ext.form.ComboBox as below
var cbx=new Ext.form.ComboBox({
id:'cmb',  // the id of this comboBox, this help the document find where you want to interact
store:store, //inportant property of a combobox to indicate what store is used for this combobox
typeAhead:true, //this property help user in typing and choose what he want to use in the combobox, this means when write one word, there //are all the appropriate words appear below to support your chosen.
displayField:'name', //this property indicate what field of data you want to display in this combo box.
mode:'local', // show the place where support the data for this combo box, usually there are just two region are 'server' and 'local', and server //is default
triggerAction:'all', //when the component is actived, it will call the actions defined in the config option. Those are queries, up to now, i don't //know exactly what is this

forceSelection:true,//if this is true, you can only use the values in this combobox from the data, that mean you can't write any word in the //below textfield. and if false is against
emptyText:'Select a state...',// this is a easy property
selectOnFocus:true,//
applyTo:'local-states'
});
var btn=new Ext.Button({
text:'Click Me',
renderTo:document.body,
handler:function(){
var txt=Ext.getCmp('cmb').getValue();
Ext.Msg.alert(txt);
}
});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;input type="text" id="local-states" size="20"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: