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

Question

Posez votre question Signaler

[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

Javascript / DHTML Posez votre question Signaler

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

Répondre au sujet

2 réponses

Signaler Commenter la réponse de libertux

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

0

Merci

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

Votre réponse

Répondre au sujet

Posez votre question

Accepted Answer

Meilleure réponse

Signaler Commenter la réponse de Trinou

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

codes-sources a aidé 87155 internautes ce mois-ci

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

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

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