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

From Learn About the Ext JavaScript Library

Comment remplir dynamiquement à partir d'une base de données une combo à partir du choix fait dans une 1ère combo ?

J'ai cherché plusieurs heures comment procéder à ce codage. Après avoir parcouru la doc, le forum, les tutoriaux, etc..., j'ai réussi à coder.

La première combo est appelée "application". Quand une application est sélectionnée, la seconde combo "formulaire" est remplie.

Voici le code. En espérant qu'il vous sera utile.

La partie HTML

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

Le javascript, "combo.js"

Ext.onReady(function(){
		Ext.QuickTips.init();
		/**********/
		/* Création du "magasin" pour la combo "application"*/
		/**********/
		var application = new Ext.data.JsonStore({
			url: '../Php/BDD/application.php',
			fields: [
				{name: 'id_appli'},
				{name: 'lib_appli'}
			]
		});
		application.load();
 
		/**********/
		/* Création du "magasin" pour la combo "formulaire"*/
		/**********/
		var formulaire = new Ext.data.JsonStore({
			url: '../Php/BDD/formulaire.php',
			fields: [
				{name: 'id_formulaire'},
				{name: 'lib_formulaire'}
			]
		});
 
..............
/**********/
/*J'affiche les combos dans un 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.',
/**********/
/*Pour remplir la combo "formulaire", on utilise un "listeners"*/
/*Quand l'application est sélectionnée, on recharge le "magasin" de la combo "formulaire"*/
/**********/
					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: ''
					})
				]
			}]
	});

Le script php, application.php

<?php
	include "../includes/my_sql.php";//librairie pour définir l'objet de requêtage
 
	$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
?>

Le script php, 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=".$_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;
?>

La classe php, 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
?>

Ext

Personal tools

Views

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

From Learn About the Ext JavaScript Library

Contents

Comment remplir dynamiquement à partir d'une base de données une combo à partir du choix fait dans une 1ère combo ?

La partie HTML

Le javascript, "combo.js"

Le script php, application.php

Le script php, formulaire.php

La classe php, my_sql.php

Learn Ext JS

Learn Ext GWT

Wiki Utilities

Toolbox

Ext JS

Ext GWT

Ext Core

JSBuilder

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help