PDA

View Full Version : [ExtJS 4.2.5] How to include script in a html container ?



Bruno13
31 Mar 2016, 4:50 AM
Hi All,

As I can't found a VisJS wrapper, I'm testing to include directly a javascript in a container in the property html.

I use a XTemplate to fill data but nothing work.

I mean nothing is shown.
It seams that nothing is executed inside script tag.

I think it's not the best solution to include a script in a container but I would like to provide a temporary functionnality until I develop the wrapper.

Many thank for your help !

My XTemplate is:


TplTimeLine : new Ext.XTemplate(
'<head>',
'<link rel="stylesheet" type="text/css" href="https://..../application/ux/VisJS/dist/vis.css">',
'<script type="text/javascript" src="https://..../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>'
)




My view:


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


My part of controller:


onTimeLineRendered: function() {
this.refreshTimeLineSheet(this.application.currentRecord);
},

refreshTimeLineSheet: function(aRecord) {
var el = Ext.get("mytimelinesheet");
PP.util.Templates.TplTimeLine.overwrite(el, aRecord.data);
}

jdkhamba
31 Mar 2016, 6:30 AM
I am not sure what is the question here that is ExtJS specific. Do you intend to somehow use VisJS along with ExtJS ? Or just ExtJS ?

Bruno13
31 Mar 2016, 7:14 AM
Hi Jdkhamda,

I'm sorry if my question is not clear, in fact I try to use VisJS library inside my ExtJS project.

As I can't find a wrapper ExtJS->Vis.js, I try to find a solution to use VisJS with other methods (without wrapper). The first method I try is to include script in a html container property and it don't work.

If you have a solution for me it will be very great!

jdkhamba
31 Mar 2016, 7:18 AM
For data visualization why not just use ExtJS charts:

https://docs.sencha.com/extjs/4.2.5/#!/api/Ext.chart.Chart

Using another framework with ExtJS can get extremely messy. Believe me.

Bruno13
31 Mar 2016, 7:27 AM
because I need 3 kinds of chart from VisJS: Timeline, Chart3D, and graph edges and ExtJS hasn't them.

jdkhamba
31 Mar 2016, 7:40 AM
I see. Well in that case I wouldn't use templates to load visjs. Just load them in the main index.html script tags. Take a look:

https://fiddle.sencha.com/#fiddle/181l

You can download the fiddle provided to see the entire source code.

Bruno13
31 Mar 2016, 7:48 AM
yes perfect ! exactly what I try to do !!!!Thanks a lot Jdkhamda !

jdkhamba
31 Mar 2016, 7:50 AM
No Problem! :-)