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

Problème de cration de tableau avec ExtJS 4 [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 22-03-2012 à 16:20:51    

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.         }
  32.         .x-ie6 .x-action-col-cell img.buy-col {
  33.             background-image: url(../shared/icons/fam/accept.gif);
  34.         }
  35.         .x-ie6.x-action-col-cell img.alert-col {
  36.             background-image: url(../shared/icons/fam/error.gif);
  37.         }
  39.         .x-ie6 .x-action-col-cell img {
  40.             position:relative;
  41.             top:-1px;
  42.         }
  43.     </style>
  44.     <script type="text/javascript" src="ExtStart.js"></script>
  45. </head>
  46. <body>
  48. </body>
  49. </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. });
  15. Ext.define('MyApp.store.monStore', {
  16.     extend: 'Ext.data.Store', 
  17.     model: 'MyApp.model.monModel',
  18.     pageSize: 5,
  19.     proxy: {
  20.         type: 'ajax',
  21.         simpleSortMode: true,
  22.         url: 'test.json',
  23.         reader:{
  24.             type: 'json',
  25.             root: 'records',
  26.             totalProperty: 'totalProperties',
  27.             successProperty: 'success'
  28.         }
  29.     }
  30. });
  31.     // create the Grid
  32.     Ext.define('MyApp.view.monGrid',{
  33.     extend      : 'Ext.grid.Panel',
  34.     id          : 'monGrid',
  35.     store       : 'monStore',
  36.     columns:[{
  37.         dataIndex: 'CHAMP1',
  38.         align: 'left',
  39.         flex: 0.33
  40.     },{
  41. dataIndex: 'CHAMP2',
  42.         align: 'left',
  43.         flex: 0.33
  44. },{
  45.         dataIndex: 'CHAMP3',
  46.         align: 'left',
  47.         flex: 0.33
  48.     }],
  49.         height: 350,
  50.         width: 600,
  51.         title: 'Array Grid',
  52.         renderTo: Ext.getBody(),
  53.     });
  54. });


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


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
Reply

Marsh Posté le 22-03-2012 à 16:20:51   

Reply

Marsh Posté le 23-03-2012 à 07:50:28    

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


---------------
Blablaté par Harko
Reply

Marsh Posté le 23-03-2012 à 09:55:51    

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


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed