Introduction

La librairie ExtJS est une API Javascript qui permet de construire des interfaces web riches et modulaires.

Il y a une version Open-Source “Community” et une version commerciale. La version open-source est sous licence MIT.

Le noyau ressemble à jQuery, avec un moteur de sélection CSS. Mais le principal intérêt est de fournir un ensemble très complet de widgets pour construire des interfaces web rapidement et de manière modulaire.

Le poids est réduit: 25KB minifié et envoyé gzippé par le serveur (177KB en version debug)

(…en comparaison, jQuery donne 20 KB minifié+gzippé, 120KB en debug…)

Pour exemple d'application complexe: ExtJS est utilisé dans SugarCRM. http://www.sugarcrm.com/

ExtCore

AJAX

NOTE: Quand un appel Ext.load() est effectué sans paramètre POST, ExtJS ajoute un paramètre par défaut _dc pour le timestamp.

Installation

La version 3.0 est actuellement disponible en RC1.

Il suffit de la télécharger pour pouvoir essayer les exemples.

De nombrex tutoriels existent:

http://extjs.com/learn/Tutorial:Basic_Page_Setup

Exemple minimum

On rassemble dans le dossier “extjs” les différents fichiers nécessaires:

extjs/
extjs/ext-core.js
extjs/ext-all.js
extjs/ext-core-debug.js
extjs/ext-all-debug.js
extjs/resources/
extjs/adapter/

Pour commencer rapidement, il faut insérer dans le header html

le fichier CSS extjs/resources/css/ext-all.css
le fichier JS noyau extjs/ext-core-debug.js
le fichier JS base extjs/adapter/ext/ext-base.js
le fichier JS widget extjs/ext-all-debug.js

<?php
$MWA=array();
$MWA['url_site']="/wp271/";
$MWA['url_theme']=$MWA['url_site']."wp-content/themes/mwa-extjs/";
?>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo $MWA['url_theme']; ?>extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="<?php echo $MWA['url_theme']; ?>extjs/ext-core-debug.js"></script>
<script type="text/javascript" src="<?php echo $MWA['url_theme']; ?>extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?php echo $MWA['url_theme']; ?>extjs/ext-all-debug.js"></script>
<script type="text/javascript" >
 
alert('loading...5%');
 
Ext.onReady(function(){
	alert('ready');
    var win;
    var button = Ext.get('show-btn');
 
    button.on('click', function(){
	alert('hello');    
	// create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                el:'hello-win',
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,
 
                items: new Ext.TabPanel({
                    el: 'hello-tabs',
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                }),
 
                buttons: [{
                    text:'Submit',
                    disabled:true
                },{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });
});
</script>
</head>
<body>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
 
<div id="hello-win" class="x-hidden">
 
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
 
            <p>... World!</p>
        </div>
    </div>
</div>
 
</body>
</html>