.:: CODE SNIPPET ::.

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

Control comboBox in EXT


Firstly, you have to create a database named “test” with a table named “compnay: [‘id’,’company’,’price’]”.

Now we make a program call data from above database.

On the time of first load, the form seems like this:

We have two combo box in a relationship as master-slave. That means company combo box controls two data Stores

Now, you create 2 data files

+ comp-name.php:

<?php
$conn=mysql_connect(“localhost”,”root”,””);
mysql_select_db(“test”,$conn);
$sql=”select * from company”;
$r=mysql_query($sql);
$arr = array();
while($result = mysql_fetch_object($r)){
$arr[] = $result;
}
echo ‘{companies:’.json_encode($arr).’}’;
?>

+ comp-price.php:

<?php
$conn=mysql_connect(“localhost”,”root”,””);
mysql_select_db(“test”,$conn);
if(isset($_REQUEST[‘makeId’])){
$sql=”select * from company where id = “.$_REQUEST[‘makeId’];
$r=mysql_query($sql);
$arr = array();
while($result = mysql_fetch_object($r)){
$arr[] = $result;
}
echo ‘{prices:’.json_encode($arr).’}’;
}
?>

Then, you create a php file named Control-combo.php:

here, we have 3 javascript files need to be included, note to change the directories of those files

<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” src=”extin/examples/ux/CheckColumn.js”></script>

<script type=”text/javascript”>
Ext.onReady(function() {
//Ext.QuickTips.init();
var storCompany = new Ext.data.JsonStore({
url:’comp-name.php’,
root:’companies’,
//baseParams:{cmd:’companies’},  //this parameter is not needed in this occasion, it’s used to pass parameters to HTTP //request
fields:[
{name:’id’,dataColumn:’id’,type:’int’},
{name:’company’,dataColumn:’company’},
{name:’price’,dataColumn:’price’,type:’float’},
{name:’change’,dataColumn:’change’,type:’float’},
{name:’pctChange’,dataColumn:’pctChange’,type:’float’},
{name:’lastChange’,dataColumn:’lastChange’}]
});

var storPrice=new Ext.data.JsonStore({
url:’comp-price.php’,
root:’prices’,
//baseParams:{cmd:’prices’},
fields:[
{name:’id’,dataColumn:’id’,type:’int’},
{name:’company’,dataColumn:’company’},
{name:’price’,dataColumn:’price’,type:’float’},
{name:’change’,dataColumn:’change’,type:’float’},
{name:’pctChange’,dataColumn:’pctChange’,type:’float’},
{name:’lastChange’,dataColumn:’lastChange’}]
});
//the first comboBox is the master, it’s so important you notice the properties at : id, mode. With the property ” mode:’remote’  ” , you load data from a server,

var cmb1={
id:’compName’,
xtype:’combo’,
store:storCompany,
emptyText:’Select…’,
displayField:’company’,
valueField:’id’,
typeAhead:true,
mode:’remote’, //
forceSelection:true,
triggerAction:’all’,
selectOnFocus:true,
fieldLabel:’Company’,
listeners:{
‘select’:function(cmb,rec,idx){
var tamObj=Ext.getCmp(‘compPrice’);
tamObj.clearValue();
tamObj.store.load({
params:{‘makeId’:this.getValue()}, // this property sends parameter  “makeId” to ” comp-price.php” http request
callback:function(r,o,s){ // this’s not needed in this condition. It’s called when params is executed and finished
Ext.Msg.alert(s);
}
});
tamObj.enable();// this will enable the second ComboBox
}
}
}
var cmb2={
id:’compPrice’,
xtype:’combo’,
store:storPrice,
emptyText:’Select…’,
displayField:’price’,
typeAhead:true,
selectOnFocus:true,
mode:’local’,  // this is a important property, you have to use ‘local’
forceSelection:true,
triggerAction:’all’,
fieldLabel:’Price’,
//selectOnFocus:true,
editable:false,
disabled:true
}
var frm=new Ext.FormPanel({
frame:true,
title:’Review’,
bodyStyle:’padding:59px’,
width:420,
id:’make-selector-frm’,
url:”,
items:[cmb1,cmb2],
buttons:[{
text:’Submit’
},{
text:’Cancel’
}]
});
frm.render(document.body);
});
</script>
</head>
<body>

</body>
</html>

After create those files, the result is showed below:

 

Good luck

(prmhuitedu)

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: