Cascading Combo Box Example

Good post - thanks!

/ica/icaGetGeoData.php i don't know what query i have to write in this:
icaGetGeoData.php

select * from icagetGeoData.php or How can i work this is with JSON

where can i get database for continent,country and state.....

Hello keckeroo,

Do you have an updated version of your code that works with Ext JS 4?

I'm trying to make it work with version 4 with no luck.

Thanks.

i 'm able to get only single value for drop down my xml is like
<country>
<state name='test'>Mh</state>
<state name='test'>Ap</state>
<state name='test'>Tn</state>
<state name='test'>Mp</state>
<country>

i am getting only 'Mh' in the drop down
any solution?

please give link for GXT code

Hi,

Thanks for your post , which saved my time and i am able to get the combo boxes loading successfully , but with small problem.

I am able to load the country combo box from the database, and states combo box is not populating with values for first time, but am able to see the states in firebug. If i again click and select the country from the country combo box, then states are loading in the combo box successfully. Same thing is happening for the City combo boxes also.

Please find my code below. I am using extjs 3

var country_store = new Ext.data.SimpleStore({
//autoLoad: true,
pruneModifiedRecords: true,
fields: ['id', 'name'],
url: "/get_testdata_tables?qry=table",
});

var state_store = new Ext.data.SimpleStore({
pruneModifiedRecords: true,
fields: ['id', 'name'],
url: "/get_testdata_tables?qry=columns",
});

var city_store = new Ext.data.SimpleStore({
pruneModifiedRecords: true,
fields: ['id', 'name'],
url: "/get_testdata_tables?qry=data",
});

var ValueForm = new Ext.form.FormPanel({
title: 'Giving a Value to Command',
frame:true,
//defaultType: 'textfield',
labelAlign: "top",
autoScroll: true,
bodyStyle: 'position:relative;',
items: [{
xtype: "combo",
id: "cmb_testdata_table",
width: 150,
name:"cmb_testdata_table",
hiddenname:"cmb_testdata_table",
fieldLabel: "Value",
minChars:2,
triggerAction: "all",
forceSelection: true,
//editable: false,
displayField: "name",
valueField: "name",
typeAhead:true,
//mode:'remote',
//selectOnFocus:true,
allowBlank: false,
emptyText: "Select a Value",
store: country_store,
listeners: {
'select' : function(cmb, rec, idx)
{
testdata_column = Ext.getCmp('cmb_testdata_column');
testdata_column.clearValue();
testdata_column.store.load({
params: {'tablename': Ext.getCmp('cmb_testdata_table').getValue() }
});
//alert(Ext.getCmp('cmb_testdata_table').getValue().substring(0,2));
testdata_column.show();
testdata_column.enable();
testdata = Ext.getCmp('cmb_testdata');
testdata.clearValue();
testdata.store.removeAll();
testdata.disable();
}
},

},
{
xtype: "combo",
id: "cmb_testdata_column",
width: 150,
name:"cmb_testdata_column",
hiddenname:"cmb_testdata_column",
fieldLabel: "TestData Columns",
triggerAction: "all",
forceSelection: true,
editable: false,
disabled: true,
hidden:true,
displayField: "name",
valueField: "name",
typeAhead:true,
//mode:'remote',
//selectOnFocus:true,
allowBlank: false,
emptyText: "Select a Value",
store: state_store,
listeners: {
'select' : function(cmb, rec, idx)
{
testdata = Ext.getCmp('cmb_testdata');
testdata.clearValue();
testdata.store.load({
params: {'columnname': Ext.getCmp('cmb_testdata_column').getValue() }
});
testdata.enable();
testdata.show();
}
}
},
{
xtype : "combo",
id : "cmb_testdata",
width: 150,
fieldLabel: "TestData",
name: "cmb_testdata",
triggerAction: "all",
forceSelection: true,
editable: false,
disabled: true,
hidden:true,
displayField: "name",
valueField: "name",
typeAhead:true,
//mode:'remote',
//selectOnFocus:true,
allowBlank: false,
emptyText: "Select a Value",
store: city_store,
}
]
}); //End ValueForm

Please let me know where i am wrong!

Thanks
Naveen Kumar Madipally

Hi Folks,

I am able to solve the issue on my own , by replacing following code

teststdata_column.store.load({
params: {'tablename': Ext.getCmp('cmb_testdata_table').getValue() }
});

with

teststdata_column.store.reload({
params: {'tablename': Ext.getCmp('cmb_testdata_table').getValue() }
});

Thanks
Naveen Kumar Madipally

in firefox 15.01 has bug

hi ... this is shashidhar. am newbie to extjs. started working on extjs since from 2 weeks. am developing some application. in that am using cascading combobox.
my problem is ,
first combobox will get the data from database and display the field "group_name",and this is working fine. :D
but,second combobox must get "serial_numbers" based on the group_name selected in first combobox. this is not working.i strucked here till from morning. :((
can any one please check the source code and help me out of this.

data stores am using are:

Code:

---

var gname = Ext.create('Ext.data.Store', {
fields:['group_name'],
 proxy: {
            type: 'ajax',
            url: 'group_name.php',
            actionMethods: {
            read: 'POST'
        },
        noCache: false,
            reader:{
                type: 'json',
                root: 'results'
                }
            },
            autoLoad: true,
            sortInfo: {
            field: 'group_name',
            direction: 'ASC'
            },
            storeId: 'gname_id'
        });
       
       
        var sname= Ext.create('Ext.data.Store',{
        fields:['serial_number'],
        proxy: {
            type: 'ajax',
            url: 'database1.php',
            actionMethods: {
            read: 'POST'
        },
        noCache: false,
            reader:{
                type: 'json',
                root: 'results'
                }
            },
            autoLoad: true,
            sortInfo: {
            field: 'serial_number',
            direction: 'ASC'
            },
            storeId: 'sname_id'
    });

---

comboboxes am using are:

Code:

---

var panel= Ext.create('Ext.form.Panel',{
                                id: 'formcom',
                                title: 'combo',
                                width: 500,
                                frame: true,
                                renderTo: Ext.getBody(),
                                defaultType: 'combo',
                                items:{
                                    xtype: 'combo',
                                    id: 'combo1',
                                    fieldLabel: 'group_name',
                                    labelWidth: 60,
                                    emptyText: 'select',
                                    editable: false,
                                   
                                    store: gname,
                                    displayField: 'group_name',
                                    valueField: 'group_name',
                                    triggerAction: 'all',
                                    queryMode: 'local',
                                    selectOnFocus: true,
                                    listeners: {
                                    select: function (combo,value)
                                            {
                                                comboserial = Ext.getCmp('combo2');
                                                comboserial.clearValue();
                                                comboserial.store.load({
                                                    params: {
                                                    'groupname': combo.getValue()
                                                    }
                                                });
                                               
                                                comboserial.enable();
                                               
                                               
                                            }
                                    }
                                }
                               
                               
                              });
       
    var scombox=Ext.create('Ext.form.field.ComboBox',{
                            id: 'combo2',
                           
                            fieldLabel: 'serialNumber',
                            labelWidth: 20,
                            store: sname,
                            editable: false,
                            queryMode: 'local',
                            displayField: 'serial_number',
                            valueField: 'serial_number',
                            disabled: true,
                            margin: '-1 0 0 180',
                            emptyText: 'select',
                            triggerAction: 'all',
                            renderTo: Ext.getCmp('formcom').getEl()
                           
                            });

---

my php script "database1.php" to get serial_number is:

Code:

---

<?php
$var1=$_POST['groupname'];


echo $var1;
$conn_string = "host=localhost port=5432 dbname=tagbase user=postgres password=postgres"; 
$con=pg_connect($conn_string) or die('unable to connect');


  if(!$con){
  echo "connection error";
  exit;
  }
 
  $query="select serial_number from group_tags_info where group_name='$var1'";
  $result=pg_query($query);
 
  $totaldata = pg_num_rows($result);
    $data = array();
    while($row = pg_fetch_object($result))
    {
       
        $data[] = $row;
    }
   
   
    echo '({"total":"'.$totaldata.'","results":'.json_encode($data).'})';
 
?>

---

lastly for your kind information,
first combobox is working fine . i.e getting group_names from backend.
but second combobox is not working. i.e on selecting the "group_name" from first combobox , the related serial_numbers are not displaying .

thanks in advance. :>