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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU] Problème de cration de tableau avec ExtJS 4

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

Publicité

gatsu35

Blablaté par Harko

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

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

XP-1000

Dovakhin !

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 :

Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
fields: [{
name: 'CHAMPS1'
},{
name: 'CHAMPS2'
},{
name: 'CHAMPS3'
}]
});
var store = new Ext.data.Store({
model: 'Book',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'sheldon.json',
reader: {
type: 'json',
root: 'records',
totalProperty: 'totalProperties',
successProperty: 'success'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "CHAMPS1", flex: 1, dataIndex: 'CHAMP1', sortable: true},
{text: "CHAMPS2", flex: 1, dataIndex: 'CHAMP2', align: 'left', flex: 0.33},
{text: "CHAMPS3", flex: 1, dataIndex: 'CHAMP3', align: 'left', flex: 0.33}
],
renderTo:'example-grid',
width: 540,
height: 200
});
});

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

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

Page générée en 0.138 secondes