Home

Relayer les évenements

A quoi peut bien servir le fait de relayer les événements ?

Et bien c'est un concept plutôt pratique qui permet qu'un évènement déclenché dans un objet A puisse être écouté par un objet B, ces deux objets étant relativement indépendants. Plus concrètement dans l'exemple présenté ici le clique sur une ligne de mon tableau doit déclencher la mise à jour du contenu d'un panel.

Et c'est là que je vous propose un petit exemple que vous retrouverez ici en mode dépouillé :

Voici donc un petit script.js :

  1. Ext.onReady(function() {
  2.  
  3.   var panel = new Ext.Panel({
  4.     region:"north"
  5.     ,margins:"5"
  6.     ,html:"birth date: "
  7.     ,bodyStyle:{padding:"0 2px"}
  8.     ,listeners:{
  9.       rowselect:function(selectionModel, rowIndex, record) {
  10.         this.body.update("birth date: " + record.data.birth_date);
  11.         this.body.highlight("#c3daf9", {block:true});
  12.       }
  13.     }
  14.   });
  15.  
  16.   var grid = new Ext.grid.GridPanel({
  17.     region:"center"
  18.     ,margins:"0 5 5 5"
  19.     ,enableHdMenu:false
  20.     ,autoExpandColumn:"last_name"
  21.     ,store:new Ext.data.ArrayStore({
  22.       fields:["first_name", "last_name", "birth_date"]
  23.       ,data:[
  24.         ["john", "smith", "12/07/1962"]
  25.         ,["steve", "brown", "24/11/1971"]
  26.       ]
  27.     })
  28.     ,columns:[
  29.       {header:"First name", dataIndex:"first_name"}
  30.       ,{id:"last_name", header:"Last name", dataIndex:"last_name"}
  31.     ]
  32.   });
  33.  
  34.   new Ext.Panel({
  35.     renderTo:"foo"
  36.     ,title:"Panel"
  37.     ,width:200
  38.     ,height:130
  39.     ,style:"margin:0 auto"
  40.     ,layout:"border"
  41.     ,layoutConfig:{padding:"5", align:"stretch"}
  42.     ,defaults:{margins:"0 0 5px 0"}
  43.     ,items:[panel, grid]
  44.     ,listeners:{
  45.       render:function() {
  46.         panel.relayEvents(grid.getSelectionModel(), "rowselect");
  47.       }
  48.     }
  49.   });
  50.  
  51. });

Avec le fichier HTML qui va bien :

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/ext-3.0.3/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext-3.0.3/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext-3.0.3/ext-all-debug.js"></script>
        <script type="text/javascript" src="/script.js"></script>
    <head>
    <body>
        <div id="foo"></div>
    </body>
</html>