Douglas on Web Applications

Linked Remote Comboboxes with EXTJS

To created linked combo boxes with EXTJS it requires 3 steps:

1. 1. create server-side code
2. 2. create component
3. 3. link combo boxes

For the server-side code I use PHP and return the data in JSON format (important: I use a specific db access wrapper found at Ultimate MySql). Of course, you will need one for each combo.Here is an example query:

 
public function displayProductsForSpecificVendor($vid) {
    if(!$vid) return false;
        $sql = "SELECT p.product_id AS id,
                  CONCAT(p.product_name,' (',p.product_code,')
                  Price: $',p.product_price,' Size: ',p.product_size) AS productNames
                  FROM product AS p
	     LEFT JOIN product_to_vendor AS ptv USING(product_id)
	     LEFT JOIN vendor AS v USING(vendor_id)
	     WHERE ptv.vendor_id = ".$vid."
	         AND p.active = 1
	         AND v.active = 1
	     ORDER BY productNames  ASC";
        if(!$this->Query($sql)){
            unset($objs);
            $objs[]=$this->Error();
            echo '{"Products":'.json_encode($objs).'}';
        }else{ //we have results
            if($this->RowCount()) {
                $this->MoveFirst();
	    while (! $this->EndOfSeek()) {
	    $row = $this->Row();
	    $arr[] = $row;
            }
            echo '{"Products":'.json_encode($arr).'}';
        }
    }
}
 

Once you have to have the EXTJS build installed, proper includes and form created, you construct the two combo box components:

 
//vendor choices start
Ext.ux.vendorsCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {
        // call parent initComponent
        Ext.ux.vendorsCombo .superclass.initComponent.call(this);
    } // end of function initComponent
});
Ext.reg('vendorscombo', Ext.ux.vendorsCombo);
//vendor choices eo
 
//product choices start
Ext.ux.productsCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {
        // call parent initComponent
        Ext.ux.productsCombo.superclass.initComponent.call(this);
    } // end of function initComponent
});
Ext.reg(productscombo, Ext.ux.productsCombo);
//product choices eo
 

Next, insert the components into the form using their xtypes:

 
...form code here
xtype:'fieldset',
checkboxToggle:false,
title: 'Vendor & Products',
autoHeight:true,
items:[{
    xtype:'vendorscombo',
    fieldLabel:'Available Vendors',
    name: "vendor_id",
    hiddenName: "vendor_id",
    valueField: "vid",
    displayField: "vendorName",
    triggerAction: "all",
    typeAhead: true,
    anchor:'98%',
    allowBlank: false,
    store: new Ext.data.Store({
        autoLoad:true,
        proxy: new Ext.data.HttpProxy({url: 'formManager.php?type=load_vendors'}),
        reader: new Ext.data.JsonReader({root: 'Vendors'},
            [{name: 'vid'}, {name: 'vendorName'}])
        }),
        emptyText:'Select a vendor...',
        selectOnFocus: true,
        forceSelection: true,
        tabIndex: 1,
        mode: 'remote'
...form code...
    xtype:'productscombo',
    id: "productcombo",
    fieldLabel:'Available Products',
    name: "product_id",
    hiddenName: "product_id",
    valueField: "id",
    displayField: "productNames",
    triggerAction: "all",
    typeAhead: false,
    anchor: "98%",
    allowBlank: false,
    store: new Ext.data.Store({
        autoLoad:true,
        proxy: new Ext.data.HttpProxy({url: '/formManager.php?type=load_products'}),
        baseParams:{vid: 0},//this parameter's passed for HTTP request
        reader: new Ext.data.JsonReader({root: 'Products'},
            [{name: 'id'},{name: 'productName'}])
        }),
        emptyText:'Select a Product...',
        selectOnFocus: true,
        forceSelection: false,
        tabIndex: 2,
        mode: 'remote',
        editable:false
   }]
 
form code continues...