Douglas on Web Applications

Hide & Show Fileds and Labels in EXTJS 3.01

Code to hide and show both a field and label whenever a checkbox is select. Note as of 3.01 just hidden a field will cause its label to be hidden as well.

Before form rendering code add:

Ext.layout.FormLayout.prototype.trackLabels = true;

Checkbox that invokes the action:

xtype:'checkbox',
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Use an existing GCC as a template',
name: 'use-existing-gcc',
id: 'use-existing-gcc',
  onClick:function(el) {
	  if(this.getValue()==true) Ext.getCmp('field-to-toggle').show();
	  else Ext.getCmp('field-to-toggle').hide();
}

Tags: extjs 3.01, form, hide, show

Passing Arrays to PHP via AJAX

I've written on processing AJAX queries before but neglected discussing how to pass an array to PHP for processing. This is an example of getting all checked rows in an EXTJS grid and posting them to an awaiting PHP script.

First we have the users confirm they really want to process all checked records:

 
Ext.MessageBox.confirm('Confirm', 'Are you sure your want to email login info to all selected users?', confirmEmailUsers);
 

Now the jQuery method:

 
function confirmEmailUsers(btn){
   if(btn=='yes'){
	   var recArray=new Array();
	   var ids=new Array();
	   var recArray = mailqueueGrid.getSelectionModel().getSelections();
	   for (var i = 0 ; i < recArray.length ;i++) {
		  ids[i] = recArray[i].get('id');
	   }
	  $.ajax({
		type: "POST",
		dataType: 'json',
		url: '/cpsia/?c=form&m=processqueue',
		data: 'ids='+ids,
		success: function(msg){
			alert(msg)
		}
	  });
   }
}
 

Finally, the PHP script to processes it:

 
$ids = explode(",",$_POST['ids']);
foreach ($ids as $id) {
   echo $id .'';
}
 

Tags: array, jQuery, json, php

EXTJS 3 Combo in Window Bug Fix

Issue:
Often after closing a window containing a from, upon relaunching the combo boxes do not expand correctly. This is a z-index problem. The simplest solution is to add this CSS to your stylesheet:

 
.x-combo-list{z-index:100000 !important;}
 

Tags: combo, css, extjs, z-index

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...
 

Tags: comboboxes, component, datastore, extjs, json, linked, remote