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

**Bruno13** · 31/03/2016, 10h08

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

**sekaijin** · 03/04/2016, 12h54

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

**champsy_dev** · 24/11/2016, 17h29

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);
}