Results 1 to 8 of 8

Thread: [ExtJS 4.2.5] How to include script in a html container ?

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    24

    Default Answered: [ExtJS 4.2.5] How to include script in a html container ?

    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:

    Code:
            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:

    Code:
    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:

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

  2. 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.

  3. #2
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    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 ?

  4. #3
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    24

    Default

    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!

  5. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    For data visualization why not just use ExtJS charts:

    https://docs.sencha.com/extjs/4.2.5/...xt.chart.Chart

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

  6. #5
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    24

    Default

    because I need 3 kinds of chart from VisJS: Timeline, Chart3D, and graph edges and ExtJS hasn't them.

  7. #6
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    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.

  8. #7
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    24

    Default

    yes perfect ! exactly what I try to do !!!!Thanks a lot Jdkhamda !

  9. #8
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    No Problem! :-)

Similar Threads

  1. Include another js script
    By blade226 in forum Ext: Q&A
    Replies: 11
    Last Post: 11 Jan 2014, 11:17 AM
  2. include html file inside to extjs panel
    By draminda in forum Ext: Q&A
    Replies: 2
    Last Post: 17 Sep 2013, 8:29 AM
  3. refer to html button in ExtJS script
    By divz in forum Ext: Discussion
    Replies: 0
    Last Post: 23 Sep 2011, 12:13 AM
  4. Replies: 4
    Last Post: 1 Apr 2011, 6:16 AM
  5. html links with extjs script
    By ByteLess in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 5 Sep 2009, 7:34 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •