Tutorial talk:Linked Combos Tutorial for Ext 2 (Legacy)

This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.

Go to the new Sencha Learning Center

From Sencha - Learn

Jump to: navigation, search

Contents

How to populate dynamically from a database a combobox from another combobox ?

I was searching how to populate dynamically from a database a combobox from another combobox. After searching the doc, the forum, the tutorial, etc..., I did some code.

The first combo is "application". When an application is selected, the second combo "formulaire" is populated.

Here's the code. Hope this will be helpfull for you.


The HTML part. 

<head>
<TITLE></TITLE>
<META HTTP-EQUIV="Content-Type" content="text/html;charset=ISO-8859-15">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<link rel="stylesheet" type="text/css" href="../CSS/css/ext-all.css">
<script type="text/javascript" src="../Javascript/Extjs/ext-base.js"></script>
<script type="text/javascript" src="../Javascript/Extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="../Javascript/Extjs/ext-lang-fr.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = 'CSS/images/default/s.gif'</script>
<script type="text/javascript" src="../Javascript/combo.js"></script>
 
</head>
<body>
</body>
</html>

The javascript part, "combo.js" 

Ext.onReady(function(){
		Ext.QuickTips.init();
		/**********/
		/* Create the store for the combo "application"*/
		/**********/
		var application = new Ext.data.JsonStore({
			url: '../Php/BDD/application.php',
			fields: [
				{name: 'id_appli'},
				{name: 'lib_appli'}
			]
		});
		application.load();
 
		/**********/
		/* Create the store for the combo "formulaire"*/
		/**********/
		var formulaire = new Ext.data.JsonStore({
			url: '../Php/BDD/formulaire.php',
			fields: [
				{name: 'id_formulaire'},
				{name: 'lib_formulaire'}
			]
		});
 
..............
/**********/
/*I display the combos in a formpanel*/
/**********/
	new Ext.FormPanel({
		id: 'option_stat',
		frame: true,
		labelAlign: 'left',
		labelWidth: 100,
		width:'auto',
		waitMsgTarget: true,
		items:[{
			xtype:'fieldset',
			autoHeight: true,
			layout: 'form',
			cls: 'x-check-group-alt',
			bodyCfg: {
				tag:'center',
			},
			items:[
				new Ext.form.ComboBox({
					fields: ['id_appli', 'lib_appli'],
					id: 'idjs_application',
					store: application,
					fieldLabel: 'Application ',
					hiddenName:'idjs_appli',
					valueField:'id_appli',
					displayField:'lib_appli',
					typeAhead: true,
					triggerAction: 'all',
					emptyText:'Sélectionner une application...',
					selectOnFocus:true,
					allowBlank: false,
					blankText:'Veuillez sélectionner une application.',
/**********/
/*To populate the "formulaire" combo, we use a listeners*/
/*When the application is selected, we reload the store of the "formulaire" combo*/
/**********/
					listeners: {
						select: 
							function() {
							var appli = Ext.getCmp('idjs_application').getValue();
							var form = Ext.getCmp('idjs_formulaire');
							form.store.reload({params: {id_application: appli}});
								}
						},
					anchor:'50%'
                    }),
				new Ext.form.ComboBox({
					id: 'idjs_formulaire',
					fieldLabel: 'Formulaire ',
					hiddenName:'idjs_form',
				        store: formulaire,
					valueField:'id_formulaire',
					displayField:'lib_formulaire',
					typeAhead: true,
					triggerAction: 'all',
					emptyText:'Sélectionner un formulaire...',
					selectOnFocus:true,
					allowBlank: true,
					anchor:'50%',
					lastQuery: ''
					})
				]
			}]
	});


The php script, application.php 

<?php
	include "../includes/my_sql.php";//library to define the query as an object
 
	$arr = array();
	$rec['id_appli'] = 'toutes';
	$rec['lib_appli'] = 'Toutes';
	$arr[] = $rec;
	$application = new my_sql($mysqlserver, $mysqlloggin, $mysqlpassword, $mysqlmaindb);
	$application->query("SELECT A.ID_APPLI, A.LIB_APPLI FROM APPLICATION A ORDER BY LIB_APPLI;");
	$nb_appli = $application->num_rows();
	if($nb_appli != 0) {
		while ($application->fetch_array()) {
			$rec['id_appli'] = $application->row['ID_APPLI'];
			$rec['lib_appli'] = $application->row['LIB_APPLI'];
			$arr[] = $rec;
		}
	}
	$jsonresult = json_encode($arr);
	echo $jsonresult;//return the result as a json array
?>

The php script, formulaire.php 

<?php
	include "../includes/my_sql.php";
 
	$arr = array();
	$rec['id_formulaire'] = 'tous';
	$rec['lib_formulaire'] = 'Tous';
	$arr[] = $rec;
	$formulaire = new my_sql($mysqlserver, $mysqlloggin, $mysqlpassword, $mysqlmaindb);
	$formulaire->query("SELECT ID_FORMULAIRE, LIB_FORMULAIRE FROM FORMULAIRE WHERE ID_APPLI=".mysql_real_escape_string($_POST['id_application'])." ORDER BY LIB_FORMULAIRE;");
	$nb_formulaire = $formulaire->num_rows();
	if($nb_formulaire != 0) {
		while ($formulaire->fetch_array()) {
			$rec['id_formulaire'] = $formulaire->row['ID_FORMULAIRE'];
			$rec['lib_formulaire'] = htmlentities($formulaire->row['LIB_FORMULAIRE']);
			$arr[] = $rec;
		}
	}
	$jsonresult = json_encode($arr);
	echo $jsonresult;
?>


The php class, my_sql.php 

<?php
	class my_sql{
		// déclaration et Initialisation des variables dont on aura besoin (option explicite)
		var $db_id  = false;
		var $mysqlserver   = '';
		var $mysqlmaindb = '';
		var $login  = '';
		var $mysqlpassword   = '';
	    var $mysqlloggin   = '';
 
	    var $res    = '';										//Il s'agit du "dataset" (connexion + commande)
	    var $row    = array();									//Il s'agit du tableau où seront stockés les résultats ligne à ligne de la requête sql
		var $all    = array();									//Il s'agit du tableau où seront stockés les résultats de la requête sql
	    var $num    = 0;
 
		//constructeur de la classe
		function my_sql(
		$mysqlserver    = '',       
		$mysqlloggin    = '',        
		$mysqlpassword    = '',									// string    Mot de passe
		$mysqlmaindb  = '',										// string    Nom de la base de données
		$connect = true											// boolean    Connexion lors de la création de l'objet
		)
		{
		    $this->host   = (string)$mysqlserver;
		    $this->pass   = (string)$mysqlpassword;
		    $this->user   = (string)$mysqlloggin;
			$this->dbname = (string)$mysqlmaindb;
 
			if ( (bool)$connect === true ) {					// Etablie la connexion à la base de données
				$this->connect();
			}
		}
 
		//Méthode de connection à la bdd
		function connect(){
			if ( (bool)$this->db_id === false ) {
		        $this->db_id = mysql_connect($this->host, $this->user, $this->pass);// Connexion au serveur MySQL
				if ( $this->db_id )	{							// Selection de la base de données
		            if ( ! mysql_select_db( $this->dbname ) ) {	// Fermeture de la connexion si la connexion à la base de données échoue
		                $this->close();
		            }
		            return $this->db_id;
		        } else {
		            return false;
		        }
		    } else {
				return $this->db_id;
		    }
		} 
 
		//Execute la requete SQl et enregistre le resultset dans les attributs
		function query($query) {
		    $this->num = 0;
		    $this->row = array();
		    $this->res = mysql_query($query, $this->db_id );
		    return $this->res;
		}
 
		// Ferme la connexion si celle-ci est active
		function close(){
		    if ( $this->db_id ) {
		        if ( $this->res ) {
		            mysql_free_result( $this->res );
		            return mysql_close( $this->db_id );
				}
		    } else {
		        return false;
		    }
		}
 
		//Fonction qui lit la requete SQL et l'enregistre dans un datarow
		function fetch_array($res = false) {
		    if ( (bool)$res === false )
 
		    $res = $this->res;
		    $this->row = mysql_fetch_array( $res, MYSQL_ASSOC );
		    return $this->row;
		}
 
 
		function fetch_all($res = false) {
		    if ( (bool)$res === false )
 
		    // $res = $this->res;
			// $this->all = mysqli_fetch_all($res); il faut php>=5.3.0
			while ($this->fetch_array()) {
				$all[] = $this->row;
			}
			return $all;
		}
 
		//Méthode qui compte le nombre de lignes retournées par la requete SQL
		function num_rows($res = false) {
		    if ( (bool)$res === false )
 
		    $res = $this->res;
		    $this->num = mysql_num_rows( $res );
			return $this->num;
		} 
 
		//Méthode qui retourne l'id qui vient d'être enregistré par la requete INSERT INTO
		function next_id(){
			$this->res = mysql_insert_id( $this->db_id );
			return $this->res;
		}
 
	} //fin de la classe
?>
Retrieved from "http://www.sencha.com/learn/legacy/Tutorial_talk:Linked_Combos_Tutorial_for_Ext_2"
This page was last modified on 21 January 2010, at 17:37. This page has been accessed 8,961 times.