1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

[Ext js] Afficher un grid

Résolu
Trinou
Messages postés
2
Date d'inscription
lundi 23 novembre 2009
Statut
Membre
Dernière intervention
10 août 2010
 - 6 août 2010 à 11:03
Trinou
Messages postés
2
Date d'inscription
lundi 23 novembre 2009
Statut
Membre
Dernière intervention
10 août 2010
 - 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.

2 réponses

Réponse 1 / 2
Trinou
Messages postés
2
Date d'inscription
lundi 23 novembre 2009
Statut
Membre
Dernière intervention
10 août 2010
10 août 2010 à 09:18
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.
3
Réponse 2 / 2
libertux
Messages postés
7
Date d'inscription
dimanche 11 juillet 2010
Statut
Membre
Dernière intervention
9 août 2010
9 août 2010 à 23:17
Bonsoir,
Je vous invite a visiter :

http://www.farkess.com/tutoriels/558/utilise-extjs-exemples-pas-a-pas/
http://www.farkess.com/tutoriels/698/apprendre-extjs-exemples-pas-a-pas-2ieme-partie/

Bonne continuation
0