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

Signaler
Messages postés
2
Date d'inscription
lundi 23 novembre 2009
Statut
Membre
Dernière intervention
10 août 2010
-
Messages postés
2
Date d'inscription
lundi 23 novembre 2009
Statut
Membre
Dernière intervention
10 août 2010
-
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.

2 réponses

Messages postés
2
Date d'inscription
lundi 23 novembre 2009
Statut
Membre
Dernière intervention
10 août 2010

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.
Messages postés
7
Date d'inscription
dimanche 11 juillet 2010
Statut
Membre
Dernière intervention
9 août 2010