Ext JS - Learning Center

Tutorial:Linked Combos Tutorial for Ext 2 (French)

From Learn About the Ext JavaScript Library

Revision as of 06:45, 30 June 2009 by Senacle (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Summary: Exemple trés simple de combos liées pour Ext 2
Author: Jozef Sakalos (Traduction: Damien Serve)
Published: October 20, 2007 (Traduction: 26/02/2009)
Ext Version: 2.0
Languages: en.png Englishcn.png Chinesefr.png French

br.png Portuguese

Contents

Préface

Ceci est plus un exemple qu'un tutoriel, c'est si simple que cela ne nécessite qu'une brève explication plutôt qu'une approche de réalisation pas à pas du plus simple au plus complexe. L'exemple tient dans 2 fichiers: lcombo.html et lcombo.js.

lcombo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
    <script type="text/javascript" src="lcombo.js"></script>
    <!-- Le script de localisation s'insère ici -->
    <script type="text/javascript">
        Ext.onReady(LCombo.app.init, LCombo.app);
    </script>
    <title>Exemple de combos liées</title>
</head>
<body>
</body>
</html>

Ceci représente le code html minimal permettant à une application Ext de fonctionner. N'oubliez pas de changer les références aux bibliothèques Ext et aux ressources en fonction de votre installation Ext.

lcombo.js

/**
  * Ext 2.0 Tutoriel de combos liées
  * par Jozef Sakalos, aka Saki
  * traduction par Damien Serve
  * http://extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2_(French)
  */
 
// référence l'image vierge locale
Ext.BLANK_IMAGE_URL = '../extjs-2.0/resources/images/default/s.gif';
 
Ext.namespace('LCombo', 'LCombo.countries', 'LCombo.cities');
 
LCombo.countries = [
     ['USA', 'United States of America']
    ,['D', 'Germany']
    ,['F', 'France']
    ,['GB', 'Great Britain']
];
 
LCombo.cities = [
     [1, 'USA', 'New York']
    ,[2, 'USA', 'Cleveland']
    ,[3, 'USA', 'Austin']
    ,[4, 'USA', 'Los Angeles']
    ,[5, 'D', 'Berlin']
    ,[6, 'D', 'Bonn']
    ,[7, 'F', 'Paris']
    ,[8, 'F', 'Nice']
    ,[9, 'GB', 'London']
    ,[10, 'GB', 'Glasgow']
    ,[11, 'GB', 'Liverpool']
];
 
// crée l'application
LCombo.app = function() {
    // ne PAS accéder au DOM depuis ici; les éléments n'existent pas encore
 
    // variables privées
 
    // fonctions privées
 
    // espace publique
    return {
 
        // méthodes publiques
        init: function() {
            var form = new Ext.FormPanel({
                 renderTo:document.body
                ,width: 400
                ,height: 300
                ,style:'margin:16px'
                ,bodyStyle:'padding:10px'
                ,title:'Linked Combos'
                ,defaults: {xtype:'combo'}
                ,items:[{
                     fieldLabel:'Sélectionner un pays'
                    ,displayField:'country'
                    ,valueField:'cid'
                    ,store: new Ext.data.SimpleStore({
                         fields:['cid', 'country']
                        ,data:LCombo.countries
                    })
                    ,triggerAction:'all'
                    ,mode:'local'
                    ,listeners:{select:{fn:function(combo, value) {
                        var comboCity = Ext.getCmp('combo-city');        
                        comboCity.clearValue();
                        comboCity.store.filter('cid', combo.getValue());
                        }}
                    }
 
                },{
                     fieldLabel:'Sélectionner une ville'
                    ,displayField:'city'
                    ,valueField:'id'
                    ,id:'combo-city'
                    ,store: new Ext.data.SimpleStore({
                         fields:['id', 'cid', 'city']
                        ,data:LCombo.cities
                    })
                    ,triggerAction:'all'
                    ,mode:'local'
                    ,lastQuery:''
                }]
            });
        }
    };
}(); // fin de l'application
 
// fin fu fichier

Un formulaire avec 2 combos (listes déroulantes) est créé dans ce fichier avec 2 petites fonctionnalités sympathiques:

  • la combo des pays (combo mère) a un gestionnaire d'événement sur sélection (select event listener) qui, lorsqu'il s'exécute, filtre la combo des villes (la combo fille) en fonction du pays sélectionné
  • la combo des villes a l'option lastQuery:"". Cela sert à duper les routines internes de filtrage de la combo lors du premier chargement de la page. La combo des villes pense qu'elle a déjà été développée une fois.

Pour aller plus loin

Cette exemple est trés simple et ne prend pas en compte que la logique de filtrage interne du ComboBox filtre également son store. C'est à dire que si vous commencez à taper du texte dans la combo des villes, le filtre mis en place par le gestionnaire d'évènement de la combo des pays est effacé et les lettres tapées sont utilisées pour filtrer la combo des villes.

Si vous souhaitez une application plus judicieuse des combos liées, la meilleures façon de faire est d'écouter l'évènement beforequery du combo, faire votre propre logique de filtrage dans le gestionnaire d'évènement et de renvoyer false pour empêcher l'exécution de la logique interne de requête. Utiliser la méthode doQuery du ComboBox Ext comme modèle.


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

Ajout de Senacle : Allez dans l'onglet "discussion".



Retrieved from "http://www.extjs.com/learn/Tutorial:Linked_Combos_Tutorial_for_Ext_2_(French)"