PDA

View Full Version : How to made dependants combobox with databases and JSON



ricardorios
16 Nov 2010, 1:27 PM
Hello people thanks for reading my post, i am working with Framework extjs 3.X, and i want to make various dependant combobox, i started with two, so i can continue learning by myself, i used an example from here, and modified by me and it stills does not work (the second combobox load everything and no changes when i select an option on the first one)

Here is my code, i hope you can help me




var paises = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '../JSON/paises.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'dpaises'
}, [
{name: 'cod'},
{name: 'pais'}
])
});
var provincias = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '../JSON/provincias.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'dprovincias'
}, [
{name: 'cod'},
{name: 'codp'},
{name: 'provincia'}
])
});
var seleccion_pais = new Ext.form.ComboBox({
store:paises,
hiddenName:'pais',
allowBlank:false,
labelStyle: 'font-weight:bold;',
triggerAction: 'all',
allowBlank:false,
mode:'remote',
forceSelection:true,
valuefield: 'cod',
width:450,
emptyText:'Seleccione País de la Obra...',
displayField:'pais',
selectOnFocus:true,
minChars: '1',
fieldLabel:'País',
listeners:{
select:function(obj,record,index){
var dept = Ext.getCmp('seleccion_provincia');
dept.store.loadData(record.data.cod);
}
}
});
var seleccion_provincia = new Ext.form.ComboBox({
fieldLabel:'Provincia',
hiddenName:'provincia',
allowBlank:false,
labelStyle: 'font-weight:bold;',
id:'seleccion_provincia',
store: provincias,
triggerAction:'all',
editable:false,
mode:'remote',
emptyText:'Seleccione Provincia de la Obra...',
selectOnFocus:true,
width:450,
valuefield: 'codp',
displayField:'provincia',
minChars: '1',
fieldLabel:'Departments',
});

Here are my php files
paises.php



<?php
require_once('../Connections/obras.php');
require_once('../funciones/funciones.php');

mysql_select_db($database_obras, $obras);
$query_Recordset1 = "SELECT codigopais, pais FROM de_paises ORDER BY pais ASC";
$Recordset1 = mysql_query($query_Recordset1, $obras) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

$paises = array();

do { //step 3
if ((!empty($row_Recordset1["codigopais"])) || (!empty($row_Recordset1["pais"]))) {
array_push($paises,array(
"cod" => $row_Recordset1["codigopais"],
"pais" => $row_Recordset1["pais"],
));
}
} while($row_Recordset1 = mysql_fetch_assoc($Recordset1));

echo json_encode( //step 4
array(
"success" => true,
"dpaises" => $paises
));

mysql_free_result($Recordset1);
?>
and
provincias.php



<?php
require_once('../Connections/obras.php');
require_once('../funciones/funciones.php');

mysql_select_db($database_obras, $obras);
$query_Recordset1 = "SELECT codigopais, codigoprovincia, provincia FROM de_provincias ORDER BY provincia ASC";
$Recordset1 = mysql_query($query_Recordset1, $obras) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

$provincias = array();

do { //step 3
array_push($provincias,array(
"cod" => $row_Recordset1["codigopais"],
"codp" => $row_Recordset1["codigoprovincia"],
"provincia" => $row_Recordset1["provincia"]
));
} while($row_Recordset1 = mysql_fetch_assoc($Recordset1));

echo json_encode( //step 4
array(
"success" => true,
"dprovincias" => $provincias
));

mysql_free_result($Recordset1);
?>

ricardorios
19 Nov 2010, 5:49 AM
Hello,

I already could do it with two combobox, based on quizzpot tutorial, but if somebody have an example with more than two dependant combobox i will apreciate if you post the example here or you can guide me.

Here is my code

My JS Script (Extjs)


this.paisesStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '../JSON/select_anidados.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'dpaises'
}, [
{name: 'value'},
{name: 'label'}
])
});

this.provinciasStore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '../JSON/select_anidados.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'dprovincias'
}, [
{name: 'value'},
{name: 'label'}
])
});

this.select_pais = new Ext.form.ComboBox({
store: this.paisesStore,
id: 'pais',
valueField: 'value',
width:450,
displayField: 'label',
triggerAction: 'all',
labelStyle: 'font-weight:bold;',
emptyText: 'Seleccione el País de la Obra...',
fieldLabel: 'País'
});

this.select_provincias = new Ext.form.ComboBox({
store: this.provinciasStore,
width:450,
disabled: true,
id: 'provincia',
valueField: 'value',
displayField: 'label',
triggerAction: 'all',
mode: 'local',
labelStyle: 'font-weight:bold;',
emptyText: 'Seleccione un País Primero...',
fieldLabel: 'Provincia'
});

this.select_pais.on('select',function(cmb,record,index){
this.select_provincias.enable();
this.select_provincias.clearValue();
this.provinciasStore.load({
params:{
id:record.get('value')
}
});
},this);

And my php code

<?php
require_once('../Connections/obras.php');
require_once('../funciones/funciones.php');


mysql_select_db($database_obras, $obras);
$query_Recordset1 = "SELECT codigopais, pais FROM de_paises ORDER BY pais ASC";
$Recordset1 = mysql_query($query_Recordset1, $obras) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);

$paises = array();
$provincias = array();

do {
array_push($paises,array(
"value" => $row_Recordset1["codigopais"],
"label" => $row_Recordset1["pais"]
));

mysql_select_db($database_obras, $obras);
$query_Recordset2 = "SELECT codigopais, codigoprovincia, provincia FROM de_provincias WHERE codigopais = '".$row_Recordset1["codigopais"]."' ORDER BY provincia ASC";
$Recordset2 = mysql_query($query_Recordset2, $obras) or die(mysql_error());
$row_Recordset2 = mysql_fetch_assoc($Recordset2);
$totalRows_Recordset2 = mysql_num_rows($Recordset2);

do {

$provincias[$row_Recordset2["codigopais"]][] = array(
"value" => $row_Recordset2["codigoprovincia"],
"label" => $row_Recordset2["provincia"]
);


} while($row_Recordset2 = mysql_fetch_assoc($Recordset2));

} while($row_Recordset1 = mysql_fetch_assoc($Recordset1));


$id = isset($_POST['id'])?$_POST['id']:-1;

if (!empty($provincias[$id])) {
$respuesta = $provincias[$id];
} else {
$respuesta = array(
"value" => "No Existen Registros",
"label" => "No Existen Registros"
);
}
if($id > -1) {
echo json_encode( //step 4
array(
"success" => true,
"dprovincias" => $respuesta
));
}else{
echo json_encode( //step 4
array(
"success" => true,
"dpaises" => $paises
));
}

mysql_free_result($Recordset1);
mysql_free_result($Recordset2);

?>