Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1799 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] Problème de cration de tableau avec ExtJS 4

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] Problème de cration de tableau avec ExtJS 4

n°2132530
XP-1000
Dovakhin !
Posté le 22-03-2012 à 16:20:51  profilanswer
 

Bonjour à toutes et à tous,
 
Je viens vers vous aujourd'hui car j'ai un problème que je ne parviens pas à résoudre.
 
Mon but est de créer une page contenant un tableau contenant lui-même une liste d’éléments lus dans un fichier json.
 
J'ai suivi la documentation sencha pour créer mon tableau mais quand je vais visualiser ma page, elle est blanche ..
 
voici le code de ma page html :
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Stateful Array Grid Example</title>
  6.     <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css" />
  7.     <link rel="stylesheet" type="text/css" href="ext-4/examples/shared/example.css" />
  8. <script type="text/javascript" src="ext-4/docs/output/Ext.Base.js"></script>
  9. <script type="text/javascript" src="ext-4/ext-all.js"></script>
  10. <script type="text/javascript" src="ext-4/ext-all-debug.js"></script>
  11.     <script type="text/javascript" src="ext-4/bootstrap.js"></script>
  12.  <style type="text/css">
  13.         /* style rows on mouseover */
  14.         .x-grid-row-over .x-grid-cell-inner {
  15.             font-weight: bold;
  16.         }
  17.         /* shared styles for the ActionColumn icons */
  18.         .x-action-col-cell img {
  19.             height: 16px;
  20.             width: 16px;
  21.             cursor: pointer;
  22.         }
  23.         /* custom icon for the "buy" ActionColumn icon */
  24.         .x-action-col-cell img.buy-col {
  25.             background-image: url(../shared/icons/fam/accept.png);
  26.         }
  27.         /* custom icon for the "alert" ActionColumn icon */
  28.         .x-action-col-cell img.alert-col {
  29.             background-image: url(../shared/icons/fam/error.png);
  30.         }
  31.         .x-ie6 .x-action-col-cell img.buy-col {
  32.             background-image: url(../shared/icons/fam/accept.gif);
  33.         }
  34.         .x-ie6.x-action-col-cell img.alert-col {
  35.             background-image: url(../shared/icons/fam/error.gif);
  36.         }
  37.         .x-ie6 .x-action-col-cell img {
  38.             position:relative;
  39.             top:-1px;
  40.         }
  41.     </style>
  42.     <script type="text/javascript" src="ExtStart.js"></script>
  43. </head>
  44. <body>
  45. </body>
  46. </html>


Voici celui de mon script ExtStart.js :
 

Code :
  1. Ext.onReady(function() {
  2.     Ext.QuickTips.init();
  3.    
  4. Ext.define('MyApp.model.monModel', {   
  5.     extend: 'Ext.data.Model',
  6.     fields: [{
  7.         name: 'CHAMP1'
  8.     },{
  9.         name: 'CHAMP2'
  10.     },{
  11.         name: 'CHAMP3'
  12.     }]
  13. });
  14. Ext.define('MyApp.store.monStore', {
  15.     extend: 'Ext.data.Store', 
  16.     model: 'MyApp.model.monModel',
  17.     pageSize: 5,
  18.     proxy: {
  19.         type: 'ajax',
  20.         simpleSortMode: true,
  21.         url: 'test.json',
  22.         reader:{
  23.             type: 'json',
  24.             root: 'records',
  25.             totalProperty: 'totalProperties',
  26.             successProperty: 'success'
  27.         }
  28.     }
  29. });
  30.     // create the Grid
  31.     Ext.define('MyApp.view.monGrid',{
  32.     extend      : 'Ext.grid.Panel',
  33.     id          : 'monGrid',
  34.     store       : 'monStore',
  35.     columns:[{
  36.         dataIndex: 'CHAMP1',
  37.         align: 'left',
  38.         flex: 0.33
  39.     },{
  40. dataIndex: 'CHAMP2',
  41.         align: 'left',
  42.         flex: 0.33
  43. },{
  44.         dataIndex: 'CHAMP3',
  45.         align: 'left',
  46.         flex: 0.33
  47.     }],
  48.         height: 350,
  49.         width: 600,
  50.         title: 'Array Grid',
  51.         renderTo: Ext.getBody(),
  52.     });
  53. });


et enfin voici mon json :
 

Code :
  1. JSON={"records":      [
  2.                     {
  3.                "CHAMP1": "rouge",
  4.                 "CHAMP2": "long",
  5.                 "CHAMP3": "droit",
  6.           },
  7.                     {
  8.                "CHAMP1": "vert",
  9.                 "CHAMP2": "court",
  10.                 "CHAMP3": "gauche",
  11.           },
  12.                     {
  13.                "CHAMP1": "jaune",
  14.                 "CHAMP2": "moyen",
  15.                 "CHAMP3": "centre",
  16.           }
  17.      ],
  18.      "totalProperties": 3,
  19.      "success": true,
  20. }


Quelques détails :
- Mon serveur est créé avec WAMP
- Mes librairies ExtJS 4 sont bien présentes et téléchargées sur le site officiel
- En fournissant directement les données (sans lire un json externe), ca fonctionne très bien avec ce code :

Code :
  1. <code type="javascript">
  2. Ext.onReady(function() {
  3.     Ext.QuickTips.init();
  4.    
  5.     // setup the state provider, all state information will be saved to a cookie
  6.     Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
  7.     // sample static data for the store
  8.     var myData = [
  9.         ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
  10.         ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
  11.         ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
  12.         ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
  13.         ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
  14.         ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
  15.         ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
  16.         ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
  17.         ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
  18.         ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
  19.         ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
  20.         ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
  21.         ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
  22.         ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
  23.         ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
  24.         ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
  25.         ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
  26.         ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
  27.         ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
  28.         ['McDonald's Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
  29.         ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
  30.         ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
  31.         ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
  32.         ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
  33.         ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
  34.         ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
  35.         ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
  36.         ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
  37.         ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
  38.     ];
  39.     //Custom function used for column renderer
  40. //@param {Object} val
  41.     function change(val) {
  42.         if (val > 0) {
  43.             return '<span style="color:green;">' + val + '</span>';
  44.         } else if (val < 0) {
  45.             return '<span style="color:red;">' + val + '</span>';
  46.         }
  47.         return val;
  48.     }
  49.     //Custom function used for column renderer
  50.     //@param {Object} val
  51.     function pctChange(val) {
  52.         if (val > 0) {
  53.             return '<span style="color:green;">' + val + '%</span>';
  54.         } else if (val < 0) {
  55.             return '<span style="color:red;">' + val + '%</span>';
  56.         }
  57.         return val;
  58.     }
  59.     // create the data store
  60.     var store = Ext.create('Ext.data.ArrayStore', {
  61.         fields: [
  62.            {name: 'company'},
  63.            {name: 'price',      type: 'float'},
  64.            {name: 'change',     type: 'float'},
  65.            {name: 'pctChange',  type: 'float'},
  66.            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
  67.         ],
  68.         data: myData
  69.     });
  70.     // create the Grid
  71.     var grid = Ext.create('Ext.grid.Panel', {
  72.         store: store,
  73.         stateful: true,
  74.         stateId: 'stateGrid',
  75.         columns: [
  76.             {
  77.                 text     : 'Company',
  78.                 flex     : 1,
  79.                 sortable : false,
  80.                 dataIndex: 'company'
  81.             },
  82.             {
  83.                 text     : 'Price',
  84.                 width    : 75,
  85.                 sortable : true,
  86.                 renderer : 'usMoney',
  87.                 dataIndex: 'price'
  88.             },
  89.             {
  90.                 text     : 'Change',
  91.                 width    : 75,
  92.                 sortable : true,
  93.                 renderer : change,
  94.                 dataIndex: 'change'
  95.             },
  96.             {
  97.                 text     : '% Change',
  98.                 width    : 75,
  99.                 sortable : true,
  100.                 renderer : pctChange,
  101.                 dataIndex: 'pctChange'
  102.             },
  103.             {
  104.                 text     : 'Last Updated',
  105.                 width    : 85,
  106.                 sortable : true,
  107.                 renderer : Ext.util.Format.dateRenderer('m/d/Y'),
  108.                 dataIndex: 'lastChange'
  109.             },
  110.             {
  111.                 xtype: 'actioncolumn',
  112.                 width: 50,
  113.                 items: [{
  114.                     icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
  115.                     tooltip: 'Sell stock',
  116.                     handler: function(grid, rowIndex, colIndex) {
  117.                         var rec = store.getAt(rowIndex);
  118.                         alert("Sell " + rec.get('company'));
  119.                     }
  120.                 }, {
  121.                     getClass: function(v, meta, rec) {          // Or return a class from a function
  122.                         if (rec.get('change') < 0) {
  123.                             this.items[1].tooltip = 'Hold stock';
  124.                             return 'alert-col';
  125.                         } else {
  126.                             this.items[1].tooltip = 'Buy stock';
  127.                             return 'buy-col';
  128.                         }
  129.                     },
  130.                     handler: function(grid, rowIndex, colIndex) {
  131.                         var rec = store.getAt(rowIndex);
  132.                         alert((rec.get('change') < 0 ? "Hold " : "Buy ";) + rec.get('company'));
  133.                     }
  134.                 }]
  135.             }
  136.         ],
  137.         height: 350,
  138.         width: 600,
  139.         title: 'Array Grid',
  140.         renderTo: Ext.getBody(),
  141.         tbar: [{
  142.             text: 'Print',
  143.             iconCls: 'icon-print',
  144.             handler : function(){
  145.              Ext.ux.grid.Printer.printAutomatically = false;
  146.              Ext.ux.grid.Printer.print(grid);
  147.             }
  148.         }]
  149.     });
  150. });


Merci d'avance pour votre aide,
 
Je suis en train de me taper la tête contre le mur avec ce problème.
 
Je paye ma bière à celui qui me dépanne ca ^^ (pour Parisiens et balieusards, pour les autres j'envoie par la poste)
 
Bonne continuation


Message édité par XP-1000 le 23-03-2012 à 09:51:37
mood
Publicité
Posté le 22-03-2012 à 16:20:51  profilanswer
 

n°2132568
gatsu35
Blablaté par Harko
Posté le 23-03-2012 à 07:50:28  profilanswer
 

On te dépanne seulement si tu utilises la balise [code] :o


---------------
Blablaté par Harko
n°2132588
XP-1000
Dovakhin !
Posté le 23-03-2012 à 09:55:51  profilanswer
 

Je ne peux rien refuser à un fan de berserk (balises modifiées).
 
Je me suis dit que comme j'avais beaucoup de code et que la balise ne fonctionne, a priori, qu'avec du C/C++, ce sera mieux pour la lisibilité de le mettre en spoiler. Je n'avais pas penser au numéro des lignes.
 
Sinon j'ai résolu mon problème. Voici le code js fonctionnel :
 

Code :
  1. Ext.require([
  2.     'Ext.data.*',
  3.     'Ext.grid.*'
  4. ]);
  5. Ext.onReady(function(){
  6.     Ext.define('Book',{
  7.         extend: 'Ext.data.Model',
  8.         fields: [{
  9.         name: 'CHAMPS1'
  10.     },{
  11.         name: 'CHAMPS2'
  12.     },{
  13.         name: 'CHAMPS3'
  14.     }]
  15.     });
  16.     var store = new Ext.data.Store({
  17.         model: 'Book',
  18.         autoLoad: true,
  19.         proxy: {
  20.             type: 'ajax',
  21.   url: 'sheldon.json',
  22.             reader: {
  23.    type: 'json',
  24.    root: 'records',
  25.    totalProperty: 'totalProperties',
  26.    successProperty: 'success'
  27.         }
  28.         }
  29.     });
  30.     var grid = Ext.create('Ext.grid.Panel', {
  31.         store: store,
  32.         columns: [
  33.   {text: "CHAMPS1", flex: 1, dataIndex: 'CHAMP1', sortable: true},
  34.   {text: "CHAMPS2", flex: 1, dataIndex: 'CHAMP2', align: 'left', flex: 0.33},
  35.   {text: "CHAMPS3", flex: 1, dataIndex: 'CHAMP3', align: 'left', flex: 0.33}
  36.  ],
  37.         renderTo:'example-grid',
  38.         width: 540,
  39.         height: 200
  40.     });
  41. });


---------------
Pourquoi linux est meilleur ?

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] Problème de cration de tableau avec ExtJS 4

 

Sujets relatifs
[XML] Problème avec formulaire envoiméthode en java qui permet de séléctionner une chaine dans un tableau
Probleme pour compiler un fichier javaProbleme couleur de fond newsletter
pointeur de tableau 2D d'entiers...Fonction qui retourne un tableau dynamique
couleur de cellule tableau automatique fichier odt phpwx-widget - Problème de conception avec Thread
probléme d'installation et compilation de QWT sous netbeanstableau de chaine de caractère : enregistrement
Plus de sujets relatifs à : [RESOLU] Problème de cration de tableau avec ExtJS 4


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR