View Full Version : Simple Ext.Direct-Combobox plugin --- with Ext.Direct.Store for reuse

25 Jul 2010, 10:47 PM

this combobox plugin code for reuse with Ext.Direct + Ext.data.DirectStore
Code :
Ext.DirectCombo = Ext.extend(Ext.form.ComboBox, {
triggerAction: 'all',
forceSelection: true,
initComponent: function() {
var id = this.id, col = this.displayField;
this.valueField = id;
this.store = new Ext.data.DirectStore(Ext.apply({
paramOrder: ['table','key','field'],
api:{read:this.action || Ext.php.Combo.load},
{name:id, type:'int'},
autoLoad: true
Ext.reg('combo-direct', Ext.DirectCombo);

Sample to Use :

var cb = new Ext.DirectCombo({
renderTo: Ext.getBody(),
displayField: 'nama', //column/field name
id:'user_id', //primary key (MySQL)
name:'users', //table name
var cb1 = new Ext.DirectCombo({
renderTo: Ext.getBody(),
displayField: 'job_name', //column/field name
id:'employee_id', //primary key (MySQL)
name:'employee', //table name

etc ...


var cb = {xtype:'combo-direct',id:'user_id',name:'users', displayField: 'nama'}

and JSON response must like :


sample PHP backend return JSON :

class Combo
public function load($table, $pkey, $field) {//select ".$pkey.",".$field." from ".$table."
$arr = array(
array('user_id' => 1, 'nama' => 'ari'),
array('user_id' => 2, 'nama' => 'ana')
return $arr;

threre are 3 variable required :
1. id = this item used for initials valueField and table primary Key (Mysql)
2. name = used for initials table name to send param
3. displayField = used for initials displayField in comboBox Field and column name param to send

26 Jul 2010, 11:56 AM
To be honest I don't see a big value in this, what's the purpose?
Why do you force to define an id which you then use as valueField instead of just defined valueField when instanciating.

I think that's only for your own use, cause you force many conventions, like the store id name or how the data is loaded from server. Or that the combobox name must be the same as the table name.

I wouldn't try to override the meaning of already in combobox used properties, instead I would recommand you to use a new config, like makeStore, so a config could look like:
{xtype:'combo-direct',makeStore:{id:'user_id',name:'users'}, displayField: 'nama'}
and in the initComponent, you make an if(typeof this.makeStore === 'object') { /* create Store */ }

Best regards,