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

Version imprimable

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:

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:

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:

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

03/04/2016, 12h54
sekaijin

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

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:

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:

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:

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.

25/11/2016, 14h04
Bruno13

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.