IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

[ExtJS4.2.5] Inclure du Javascript dans un Container ?


Sujet :

Ext JS / Sencha

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    614
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 614
    Points : 193
    Points
    193
    Par défaut [ExtJS4.2.5] Inclure du Javascript dans un Container ?
    Bonjour à tous,

    Ne trouvant rien comme Wrapper sur le net pour VisJS, je voudrais savoir si il est possible
    d'inclure du javascript dans un Container ?

    J'ai essayé pendant plusieurs heures hier mais hélas sans succès.

    Je crée un container et dans la propriété html de celui-ci j'y ajoute le code javascript comme ci-dessous mais cela ne fonctionne pas,

    j'ai l'impression que tout ce qui se trouve dans les balises script n'est pas exécuté...



    Voici le XTemplate que j'ajoute dans la propriété html du container

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
            TplTimeLine : new Ext.XTemplate(
                    '<head>',
                    '<link rel="stylesheet" type="text/css" href="http://..../application/ux/VisJS/dist/vis.css">',
                    '<script type="text/javascript" src="http://...../application/ux/VisJS/dist/vis.js"></script>',
                    '</head>',
     
                    '<body>',
                    'Under Testing',
                    '<div id="visualization"></div>',
     
                    '<script type="text/javascript">',
                    '   var container = document.getElementById("visualization");',
                    '   var items = new vis.DataSet([',
                    '       {id: 1, content: "item 1", start: "2013-04-20"},',
                    '       {id: 2, content: "item 2", start: "2013-04-14"},',
                    '       {id: 3, content: "item 3", start: "2013-04-18"},',
                    '       {id: 4, content: "item 4", start: "2013-04-16", end: "2013-04-19"},',
                    '       {id: 5, content: "item 5", start: "2013-04-25"},',
                    '       {id: 6, content: "item 6", start: "2013-04-27"}',
                    '   ]);',
     
                    '  var options = {};',
     
                    '  var timeline = new vis.Timeline(container, items, options);',
                    '</script>',
                    '</body>'
            )
    Je sais que ce n'est pas top comme solution mais j'essaie d'avancer un peu sur mon projet.

    Voici ma View

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Ext.define("PP.view.sheet.TimeLine", {
        extend      : 'Ext.container.Container',
        alias       : 'widget.timeline',
     
        style       : { backgroundColor:'#FFFFFF'},
        padding     : '10px',
     
        layout      : 'border',
        autoScroll  : true,
     
        html        : '<div id="mytimelinesheet"></div>'
    });
    et voici le code dans mon controller:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
        onTimeLineRendered: function() {
            this.refreshTimeLineSheet(this.application.currentRecord);
        },
     
        refreshTimeLineSheet: function(aRecord) {
            var el = Ext.get("mytimelinesheet");                        
            PP.util.Templates.TplTimeLine.overwrite(el, aRecord.data);
        }
    Bien sûr pour l'instant, tout est en dur pour les données mais ensuite l'intérêt du XTemplate sera de remplir les DATAs.

    Si quelqu'un a déjà fait ça je suis preneur !

    D'avance merci !
    Bruno

  2. #2
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    juillet 2004
    Messages
    4 176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : juillet 2004
    Messages : 4 176
    Points : 8 640
    Points
    8 640
    Par défaut
    un container est un objet graphique
    un javascript est du code exécutable
    la question n'a pas beaucoup de sens.

    pour revenir à ton problème de base VIS

    il te faut revoir ta façon d'aborder la chose.

    un composant dérivé de Panel te permet de générer l'affichage
    un Model te permet de récupérer les données

    et enfin un contrôleur va te permettre de relier le panel au données.
    A+JYT

  3. #3
    Membre averti
    Homme Profil pro
    Directeur de projet
    Inscrit en
    novembre 2014
    Messages
    196
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Directeur de projet
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2014
    Messages : 196
    Points : 330
    Points
    330
    Par défaut
    Tu tente d'intégré une librairie tierce dans ExtJs, c'est faisable mais différent pour chaque librairie, pour certaine c'est très simple pour d'autre plus compliqué.

    Dans un premier temps il vait mieux mettre tes références aux script et aux css de la librairies tiers dans le fichier app.json.
    Quand tu builderas ton application elle rentrerons dans le processus de build (minimification) .

    Tu copie les fichiers vis.js et vis.css dans un répertoire resources/libs de ton application par exemple.
    app.json
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
     
     "js": [
            {
                "path": "app.js",
                "bundle": true
            },
            {
                "path": "resources/libs/vis.js"
            },
     
        ],
    "css": [
            {
                "path": "${build.out.css.path}",
                "bundle": true,
                "exclude": ["fashion"]
            },
            {
                "path": "resources/libs/vis.css"
            }
        ],
    Ensuite il te faut créer un composant qui vas Wrapper ta librairie. Voici comment je fait pour wrapper OpenLayer3 dans une classe qui hérite de Panel :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
     
     initComponent: function () {
            var me = this;
            me.mapElId = Ext.id();
            me.mapEl = document.createElement('div');
            me.mapEl.id = me.mapElId;
            document.getElementsByTagName('body')[0].appendChild(me.mapEl);
     
            me.map = new ol.Map({
                layers: [],
                controls: ol.control.defaults(),
                target: me.mapElId,
                view: new ol.View({
                    center: [-6655.5402445057125, 6709968.258934638],
                    zoom: 13,
                    projection: 'EPSG:3857'
                })
            });
            this.items = [          
                {
                    xtype: 'container',
                    flex: 1,
                    layout: 'fit',
                    contentEl: me.mapEl,
                    listeners: {
                        resize: function (panel, width, height, oldWidth, oldHeight, eOpts) {
     
                            var viewportEls = panel.getEl().query('div.ol-viewport');
                            if (viewportEls.length > 0)
                            {
                                var viewportEl = viewportEls[0];
     
                                viewportEl.setAttribute("style", "display:block;width:" + width + "px;height:" + height + "px;");
                                viewportEl.style.width = width + 'px';
                                viewportEl.style.height = height + 'px';
                            }
                            me.mapEl.style.width = width;
                            me.mapEl.style.height = height;
                            me.map.setSize([width, height]);
                            me.map.updateSize();
     
                        }
                    }
                }
            ];
            this.callParent(arguments);
    }
    ci-dessus :
    - je crée un div à la main en générant sont id
    - je l'ajoute au document
    - je créer une Map OpenLayer en lui spécifiant l'id du div créer comme target
    - je crée un conteneur ExtJs dans le quel j'affiche le div créer
    - le code de resizing permet de synchroniser la taille de la map OpenLayer avec le conteneur quand on le redimensionne

    (Attention en cas de destruction il y aurais d'autre chose à faire mais dans mon cas c'est simple je n'ai qu'une map dans l'application).

    dans ton un cas cela donnerais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
     
    initComponent: function () {
            var me = this;
            me.visElId = Ext.id();
            me.visEl = document.createElement('div');
            me.visEl .id = me.visElId ;
            document.getElementsByTagName('body')[0].appendChild(me.visEl );
            // Create a DataSet (allows two way data-binding)
            var items = new vis.DataSet([
              {id: 1, content: 'item 1', start: '2013-04-20'},
              {id: 2, content: 'item 2', start: '2013-04-14'},
              {id: 3, content: 'item 3', start: '2013-04-18'},
              {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
              {id: 5, content: 'item 5', start: '2013-04-25'},
              {id: 6, content: 'item 6', start: '2013-04-27'}
            ]);
     
            // Configuration for the Timeline
            var options = {};
     
            me.timeline = new vis.Timeline( me.visEl, items, options);
     
            this.items = [          
                {
                    xtype: 'container',
                    flex: 1,
                    layout: 'fit',
                    contentEl: me.visEl,
                    listeners: {
                        resize: function (panel, width, height, oldWidth, oldHeight, eOpts) {
     
                           // a voir si tu as besoin de resize vis ou si il se met à jour tout seul
     
                        }
                    }
                }
            ];
            this.callParent(arguments);
    }
    La seul différence est que vis à besoin d'un element DOM alors qu'OpenLayer se satisfait d'un id, mais le concept reste le même.

    Bon courage.

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    mars 2005
    Messages
    614
    Détails du profil
    Informations personnelles :
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : mars 2005
    Messages : 614
    Points : 193
    Points
    193
    Par défaut
    Salut,

    depuis le temps j'avais trouvé la solution. Effectivement c'est quasiment ce que j'ai fait

    désolé de ne pas avoir mis à jour le status de cette discussion je m'en excuse.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Inclure du javascript dans une chaine php
    Par hack4sick dans le forum Langage
    Réponses: 3
    Dernier message: 18/02/2015, 12h38
  2. Inclure du javascript dans une APPLI java
    Par Tsushi dans le forum Développement Web en Java
    Réponses: 0
    Dernier message: 27/04/2010, 15h23
  3. [PHP-JS] inclure du javascript dans du php
    Par phoque.r dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 16/04/2007, 18h00
  4. [PHP-JS] inclure du javascript dans php
    Par CB56 dans le forum Langage
    Réponses: 4
    Dernier message: 13/09/2006, 14h53
  5. Inclure une page dans dans une tableau avec javascript
    Par pierrot10 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/09/2005, 12h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo