[Ext js] Afficher un grid [Résolu]

Trinou 2 Messages postés lundi 23 novembre 2009Date d'inscription 10 août 2010 Dernière intervention - 6 août 2010 à 11:03 - Dernière réponse : Trinou 2 Messages postés lundi 23 novembre 2009Date d'inscription 10 août 2010 Dernière intervention
- 10 août 2010 à 09:18
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.
Afficher la suite 

Votre réponse

2 réponses

Meilleure réponse
Trinou 2 Messages postés lundi 23 novembre 2009Date d'inscription 10 août 2010 Dernière intervention - 10 août 2010 à 09:18
3
Merci
C'est gentil mais j'ai fini par trouver toute seule.

Mes fichiers joins n'étaient pas bons. J'ai modifié ext-all.js et ext-base.js du coup j'ai pu avoir ma grid.

Merci Trinou 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 98 internautes ce mois-ci

Commenter la réponse de Trinou
libertux 7 Messages postés dimanche 11 juillet 2010Date d'inscription 9 août 2010 Dernière intervention - 9 août 2010 à 23:17
Commenter la réponse de libertux

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.