Utiliser ExtJS et jQuery sur la même page

Il est déconseillé d'utiliser plusieurs frameworks JavaScript sur une même page car cela pourrait rendre caduques certaines fonctionnalités. Cependant, les frameworks étant tous différents, l'envie est parfois forte de rajouter un plugin venant d'une autre bibliothèque pour palier au manque de celle que l'on utilise à la base. L'auteur vous propose un mariage particulier entre ExtJS et jQuery.
Cet article est la traduction de Using ExtJS and JQuery on the same pageUsing ExtJS and JQuery on the same page publié sur ExtJS TutorialsExtJS Tutorials.

Article lu   fois.

Les deux auteur et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Explications

Ce composant montre un Panel ExtJS et une image, ainsi que le plugin jQuery DeepLiquid Jcrop qui permet de sélectionner une zone sur une image.

Essayez-le en faisant glisser votre souris sur l'image. Vous pouvez également déplacer la zone de sélection.

Démo.

Image non disponible

II. Code

L'ajout des bibliothèques :

 
Sélectionnez
<!-- ExtJS -->
<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

<!-- jQuery -->
<link rel="stylesheet" href="http://deepliquid.com/Jcrop/css/jquery.Jcrop.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//deepliquid.com/Jcrop/js/jquery.Jcrop.min.js"></script>


Le code JavaScript :

 
Sélectionnez
Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',

    title: 'Faites glisser votre souris sur l\'image',
    width:710,
    height: 364,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'image',
                    src: 'http://www.searchenginepeople.com/wp-content/uploads/2011/12/Vancouver-Skyline.jpg'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Ext.onReady(function() {

    var f = new MyPanel({
        renderTo: Ext.getBody()
    });
    
    var referenceToImage = f.down('image').el.dom;
    
    $(referenceToImage).Jcrop();

});

III. Remerciements

Cet article a été publié avec l'aimable autorisation de Neil McGuigan. L'article original peut être lu sur le blog ExtJS TutorialsExtJS Tutorials : Using ExtJS and JQuery on the same pageUsing ExtJS and JQuery on the same page.
Je remercie également Torgar pour sa relecture attentive.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Neil McGuigan. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.