Bonjour à tous,
Je débute en JS, et je voudrais afficher un array grid. J'ai essayé et cherché mais je n'arrive pas à comprendre ce qui ne va pas dans mon code.
Mon fichier ArrayGrid.js :
Ext.onReady(function(){ //var myData
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// sample static data for the store
var myData = [
...tableau...
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val){
if(val > 0){
return '' + val + '';
}else if(val < 0){
return '' + val + '';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val){
if(val > 0){
return '' + val + '%';
}else if(val < 0){
return '' + val + '%';
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'ID', type: 'int'},
{name: 'Coucil Chair', type: 'int'},
{name: 'Metric ID', type: 'int'},
{name: 'Root Cause'},
{name: 'Impact'},
{name: 'Target Date', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'Status', type: 'int'},
{name: 'Last update', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'Comment'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'ID',header: 'ID', width: 160, sortable: true, dataIndex: 'ID'},
{header: 'CouncilChair', width: 75, sortable: true, renderer: CouncilChair, dataIndex: 'Council Chair'},
{header: 'Metric ID', width: 75, sortable: true, renderer: Metric ID, dataIndex: 'Metric ID'},
{header: 'Root Cause', width: 75, sortable: true, dataIndex: 'Root Cause'},
{header: 'Impact', width: 160, sortable: true, dataIndex: 'Impact'},
{header: 'Target Date', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Target Date'}
{header: 'Status', width: 75, sortable: true, renderer: Status, dataIndex: 'Status'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Last Updated'}
{header: 'Comment', width: 75, sortable: true, dataIndex: 'Comment'},
],
stripeRows: true,
autoExpandColumn: 'Impact',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid');
renderTo: 'grid';
});
Mon fichier Template dans lequel je dois afficher la grid :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<!-- meta data -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="robots" content="index,follow" />
<meta http-equiv="expires" content="0" />
<!-- css styles -->
<link rel="stylesheet" type="text/css" href="css/default.css" media="screen, tv, projection" title="Default" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<!-- javascript -->
<script type="text/javascript" src="Ecom/grid/ext-base.js"></script>
<script type="text/javascript" src="Ecom/grid/ext-all.js"></script>
</head>
<script type="text/javascript" src="Ecom/grid/ArrayGrid.js"></script>
<?php include "views/header.php"; ?>,
----
<?php echo $response->getContent(); ?>,
,
----
<?php include "views/footer.php"; ?>
Datagrid avancee
[javascript:void(0); Lancer la boite de dialogue]
</html>
Est ce que je fais mal les inclusions de fichiers ? Vraiment je ne sais plus quoi faire !
Merci de votre aide.
112 internautes nous ont dit merci ce mois-ci