XP-1000 Dovakhin ! | 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 :
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Stateful Array Grid Example</title>
- <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css" />
- <link rel="stylesheet" type="text/css" href="ext-4/examples/shared/example.css" />
- <script type="text/javascript" src="ext-4/docs/output/Ext.Base.js"></script>
- <script type="text/javascript" src="ext-4/ext-all.js"></script>
- <script type="text/javascript" src="ext-4/ext-all-debug.js"></script>
- <script type="text/javascript" src="ext-4/bootstrap.js"></script>
- <style type="text/css">
- /* style rows on mouseover */
- .x-grid-row-over .x-grid-cell-inner {
- font-weight: bold;
- }
- /* shared styles for the ActionColumn icons */
- .x-action-col-cell img {
- height: 16px;
- width: 16px;
- cursor: pointer;
- }
- /* custom icon for the "buy" ActionColumn icon */
- .x-action-col-cell img.buy-col {
- background-image: url(../shared/icons/fam/accept.png);
- }
- /* custom icon for the "alert" ActionColumn icon */
- .x-action-col-cell img.alert-col {
- background-image: url(../shared/icons/fam/error.png);
- }
- .x-ie6 .x-action-col-cell img.buy-col {
- background-image: url(../shared/icons/fam/accept.gif);
- }
- .x-ie6.x-action-col-cell img.alert-col {
- background-image: url(../shared/icons/fam/error.gif);
- }
- .x-ie6 .x-action-col-cell img {
- position:relative;
- top:-1px;
- }
- </style>
- <script type="text/javascript" src="ExtStart.js"></script>
- </head>
- <body>
- </body>
- </html>
|
Voici celui de mon script ExtStart.js :
Code :
- Ext.onReady(function() {
- Ext.QuickTips.init();
-
- Ext.define('MyApp.model.monModel', {
- extend: 'Ext.data.Model',
- fields: [{
- name: 'CHAMP1'
- },{
- name: 'CHAMP2'
- },{
- name: 'CHAMP3'
- }]
- });
- Ext.define('MyApp.store.monStore', {
- extend: 'Ext.data.Store',
- model: 'MyApp.model.monModel',
- pageSize: 5,
- proxy: {
- type: 'ajax',
- simpleSortMode: true,
- url: 'test.json',
- reader:{
- type: 'json',
- root: 'records',
- totalProperty: 'totalProperties',
- successProperty: 'success'
- }
- }
- });
- // create the Grid
- Ext.define('MyApp.view.monGrid',{
- extend : 'Ext.grid.Panel',
- id : 'monGrid',
- store : 'monStore',
- columns:[{
- dataIndex: 'CHAMP1',
- align: 'left',
- flex: 0.33
- },{
- dataIndex: 'CHAMP2',
- align: 'left',
- flex: 0.33
- },{
- dataIndex: 'CHAMP3',
- align: 'left',
- flex: 0.33
- }],
- height: 350,
- width: 600,
- title: 'Array Grid',
- renderTo: Ext.getBody(),
- });
- });
|
et enfin voici mon json :
Code :
- JSON={"records": [
- {
- "CHAMP1": "rouge",
- "CHAMP2": "long",
- "CHAMP3": "droit",
- },
- {
- "CHAMP1": "vert",
- "CHAMP2": "court",
- "CHAMP3": "gauche",
- },
- {
- "CHAMP1": "jaune",
- "CHAMP2": "moyen",
- "CHAMP3": "centre",
- }
- ],
- "totalProperties": 3,
- "success": true,
- }
|
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 :
- <code type="javascript">
- Ext.onReady(function() {
- Ext.QuickTips.init();
-
- // setup the state provider, all state information will be saved to a cookie
- Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
- // sample static data for the store
- var myData = [
- ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
- ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
- ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
- ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
- ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
- ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
- ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
- ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
- ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
- ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
- ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
- ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
- ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
- ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
- ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
- ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
- ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
- ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
- ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
- ['McDonald's Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
- ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
- ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
- ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
- ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
- ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
- ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
- ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
- ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
- ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
- ];
- //Custom function used for column renderer
- //@param {Object} val
- function change(val) {
- if (val > 0) {
- return '<span style="color:green;">' + val + '</span>';
- } else if (val < 0) {
- return '<span style="color:red;">' + val + '</span>';
- }
- return val;
- }
- //Custom function used for column renderer
- //@param {Object} val
- function pctChange(val) {
- if (val > 0) {
- return '<span style="color:green;">' + val + '%</span>';
- } else if (val < 0) {
- return '<span style="color:red;">' + val + '%</span>';
- }
- return val;
- }
- // create the data store
- var store = Ext.create('Ext.data.ArrayStore', {
- fields: [
- {name: 'company'},
- {name: 'price', type: 'float'},
- {name: 'change', type: 'float'},
- {name: 'pctChange', type: 'float'},
- {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ],
- data: myData
- });
- // create the Grid
- var grid = Ext.create('Ext.grid.Panel', {
- store: store,
- stateful: true,
- stateId: 'stateGrid',
- columns: [
- {
- text : 'Company',
- flex : 1,
- sortable : false,
- dataIndex: 'company'
- },
- {
- text : 'Price',
- width : 75,
- sortable : true,
- renderer : 'usMoney',
- dataIndex: 'price'
- },
- {
- text : 'Change',
- width : 75,
- sortable : true,
- renderer : change,
- dataIndex: 'change'
- },
- {
- text : '% Change',
- width : 75,
- sortable : true,
- renderer : pctChange,
- dataIndex: 'pctChange'
- },
- {
- text : 'Last Updated',
- width : 85,
- sortable : true,
- renderer : Ext.util.Format.dateRenderer('m/d/Y'),
- dataIndex: 'lastChange'
- },
- {
- xtype: 'actioncolumn',
- width: 50,
- items: [{
- icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
- tooltip: 'Sell stock',
- handler: function(grid, rowIndex, colIndex) {
- var rec = store.getAt(rowIndex);
- alert("Sell " + rec.get('company'));
- }
- }, {
- getClass: function(v, meta, rec) { // Or return a class from a function
- if (rec.get('change') < 0) {
- this.items[1].tooltip = 'Hold stock';
- return 'alert-col';
- } else {
- this.items[1].tooltip = 'Buy stock';
- return 'buy-col';
- }
- },
- handler: function(grid, rowIndex, colIndex) {
- var rec = store.getAt(rowIndex);
- alert((rec.get('change') < 0 ? "Hold " : "Buy ";) + rec.get('company'));
- }
- }]
- }
- ],
- height: 350,
- width: 600,
- title: 'Array Grid',
- renderTo: Ext.getBody(),
- tbar: [{
- text: 'Print',
- iconCls: 'icon-print',
- handler : function(){
- Ext.ux.grid.Printer.printAutomatically = false;
- Ext.ux.grid.Printer.print(grid);
- }
- }]
- });
- });
|
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
|