Home

Références

L'utilisation des "ref" d'ExtJS permet d'obtenir une référence à un objet qui aurait été déclaré implicitement. ExtJS autorise la déclaration d'objet en "lazzy mode", une façon de décrire un objet et ses enfants sous la forme d'une arborescence. Cette technique en plus d'optimiser le processus de construction des objets, donne un ratio code/rendu très bas. Idéal pour les flemmards et les pressés. A consommer avec modération si on ne veut pas basculer du coté des crados.

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

Voici ce que peut donner le contenu d'un fichier script.js:

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

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>

Ce qu'il faut noter c'est qu'à la ligne 14 et à la ligne 27 du JavaScript on peut voir l'ajout d'une référence à un panel et à un grid sous la forme:

ref:"panel"
ref:"grid"

et son utilisation à la ligne 41:

this.panel.mypanel.relayEvents(this.panel.mygrid.getSelectionModel(), "rowselect");