begin process at 2012 05 29 05:50:25
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

[Ext js] Afficher un grid

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

[Ext js] Afficher un grid

vendredi 6 août 2010 à 11:03:46 | [Ext js] Afficher un grid

Trinou
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 :
Code Javascript :
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 '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        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 :
Code HTML :
<!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>
<body>
<script type="text/javascript" src="Ecom/grid/ArrayGrid.js"></script>
<table width="100%" border="0" cellspacing="0">
	<tr><td colspan="3" bgcolor="#FF1199"><?php include "views/header.php"; ?></td></tr>
	<tr>
		<td width="80%"><?php echo $response->getContent(); ?></td>
        <td width="2%" bgcolor="#FF1199"></td>
	</tr>
	<tr><td colspan="3" bgcolor="#FF1199"><?php include "views/footer.php"; ?></td></tr>	
</table>
<h2 style="font-size:18px;">Datagrid avancee</h2>

	<a href="javascript:void(0);" onclick="grid.show();" >Lancer la boite de dialogue</a>
	<br /><br />
<div id="grid"></div>
</body>
</html>


Est ce que je fais mal les inclusions de fichiers ? Vraiment je ne sais plus quoi faire !
Merci de votre aide.
lundi 9 août 2010 à 23:17:15 | Re : [Ext js] Afficher un grid

libertux

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
mardi 10 août 2010 à 09:18:14 | Re : [Ext js] Afficher un grid

Trinou
Réponse acceptée !
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.


Cette discussion est classée dans : true, grid, width, val, ext

Répondre à ce message

Sujets en rapport avec ce message

Ext JS - Exploitation de la réponse du serveur [ par malemdev ] Bonjour à tous, Je développe une application web basée sur le framework Ext JS. Mais je débute sur le modèle AJAX et je rencontre mes premiers problè ExtJS -> Tab + grid [ par yannickiwi ] Bonjour,Je cherche a mettre une grid dans mon tab extJs. pour ce faire voici le code que j'ai développer:fichier html:TabPanel Tutorial<!-- Ext CSS an extjs [ par yosrounaw ] salut, j'ai utilisé EXTjs: j'ai créer une fenêtre composée de grid de nom des utilisateurs et des textfield pour les détails des utilisateurs, je veu comment remplir une Ext grid à partir d'une DB à l'aide du JAVA ?? [ par 3askou ] SVP je me galere .. j'ai une Ext grid et je sais pas comment la remplir depuis ma base MySql ?? en fete je travaille sur un projet web dynamique du ja affecter des valeurs à des colonnes d'un tableau [ par patingfree ] Bonsoir à tous, J'ai un formulaire contenant une liste déroulante permettant d'ouvrir une fenêtre popup dans laquelle une fois un choix opéré, une lig Taille d'ecran sur code css [ par badvirus ] Bonjour, mon probleme avec ce code est que je voudrais l'adapter a n'importe quelle taille d'ecran et je n'y arrive pas. voici le code CSS : body { ajouter une div contenant une image dans un script de commentaire [ par brutos ] Bonjour à toutes et à tous, Je me permets de poster ici pour avoir quelques explications astuces concernant un script en ajax pour poster des comment Problème css sous mozilla [ par boninou ] Bonjour à tous, J'ai un petit souci de mise en page sous Mozilla que je n'ai pas sous IE et Chrome. Mon code est le suivant : [code=html]#profil d valeur inserer dynamiquement dans javascript [ par mdh12 ] salut, j'espère que je suis dans le bon espace de forum pour traiter mon problème le code suivant sert a afficher le statistique sous forme de comenb Insertion d'un élement dans un fieldset [ par asmagh ] Bonjour, s'il vous plait j'aimerai savoir comment je peux inserer un élément dans un fieldset existant de la bibliotheque ext Js. sachant que mon e


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,404 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)