Results 1 to 4 of 4

Thread: Displaying other javascript pages from your server inside an Ext app

  1. #1
    Sencha User BukhtiarM's Avatar
    Join Date
    Mar 2014
    Location
    Salzburg, Austria
    Posts
    8
    Answers
    1

    Default Answered: Displaying other javascript pages from your server inside an Ext app

    So guys I am a bit new to Ext js. Been working with ext for the last 2 to 3 months. I am also new to web programming in general. I have a few pages on my server and i am kind of making a repository for them using ext js 4. So I have to make a tree on the east side of my page and in the center i show the web page that has been selected from the tree. I dont know the best practices honestly but going through the docs and a few threads i found out one way of doing this so i am currently doing it as:

    Code:
    Ext.define('PLUSES.view.MapPanel',{
        extend:'Ext.Panel',
        xtype: 'mapbox',
        layout:{
            type:'fit',
            align:'stretch'
        },
        config: {
            DynamicTitle:'Live Data'
        },
        
        initComponent: function() {
            this.items = [
            {
                
                title: this.DynamicTitle,
                layout: 'fit',
                dockedItems: [{
                        dock: 'top',
                        xtype: 'toolbar',
                        items: [
                        {                        
                            xtype: 'button',
                            text: 'change',
                            action: 'change'
                        }, {                       
                            xtype: 'button'
                        }, {
                            xtype: 'button'
                        }, {                        
                            xtype: 'button'
                        }]
                    }],
                items: [{
                    itemId: 'map',
                    xtype: 'box',
                    autoEl: {
                        tag: 'iframe',
                        src: 'http://localhost/ExpertSystem/resources/HexacopterMaps/Empty/index.html',
                    }
                }]
            }];
            this.callParent(arguments);
        }
        
    });
    So I am basically using an iframe with the source set to the location of the page. Now i want to know how to change this source dynamically for example by the selection of some tree node. What i have done as you can see in the code is, that I have also added a tool bar and right now i am trying to change the source on button click event. After going through several threads this is how i thought it is done.

    Code:
    Ext.define('PLUSES.controller.ChangeMap',{
        extend: 'Ext.app.Controller',
        views: [
            'livedata.MapPanel'
        ],
        stores: [
            // TODO: add stores here
            //'Ppes'
        ],
        models: [
            // TODO: add stores here
            
        ],    
        init: function() {
            this.control({
                    'mapbox button[action=change]': {
                    click: this.onclick
                }
            });        
        },
        
        onclick: function(thing) {
            var thepanel = thing.up('panel'),
            thebox=thepanel.down('#map');
            console.log(thebox.xtype);
            thebox.dom.src = 'resources/HexacopterMaps/Chemical/CO2/index.html';
        }
    });
    But this is not working in fact it says cannot set src of undefined.

    Please can someone help me with this???

    Also please guide me if there is a better way of doing what i want i mean instead of using the iframe and stuff. Any other standard way...?

  2. Still no answers i wonder where everybody from the ext community is right now. But I have kind of found a work around this issue. So this works for me now but I would be interested in finding a better solution.... Lets call it a more professional way an EXT way of doing this. What i found out is that you can also render another pdf, another webpage another, another image from your server or from external sources by setting the html of your panel to:

    Code:
    html: '<iframe src="resources/webmap-exp/chemical/index.html" width="100%" height="100%"></iframe>'
    Now all you have to do is simply change the html of your panel in the controller to the something new of the form

    Code:
    html: '<iframe src="SomeNewUrl/..." width="100%" height="100%"></iframe>'
    and it works like a bang...

    My complete code looks something like this

    View


    Code:
    Ext.define('Practice.view.Center',{
        extend:'Ext.Panel',
        xtype: 'mainpanel',
        layout:{
            type:'vbox',
            align:'stretch'
        },
        config: {
            material:'<iframe src="somefolderonserver/index.html" width="100%" height="100%"></iframe>'
        },
        
        initComponent: function() {
            this.items = [
            {
                xtype: 'toolbar',
                items:[
                {
                    xtype: 'button',
                    text: 'commit',
                    action: 'newdata'
                },{
                    xtype: 'button',
                    text: 'Cancel',
                    action: 'save',
                }]            
            },{
                xtype:'panel',
                collapsible: true,
                html: this.material,
                layout:'fit',
                flex: 10,
            }];
            this.callParent(arguments);
        }
        
    });
    Controller

    Code:
    init: function() {
            this.control({
                'mainpanel button[action=newdata]':{
                    click: this.changeIt
                }
            });
        },
        changeIt: function(button) {
            console.log('the button has been clicked');
            var main = button.up('panel'),
            newtext = '<iframe src="resources/webmap-exp/chemical/index.html" width="100%" height="100%"></iframe>',
            
            /*
            Ext.Ajax.request({
                url: 'resources/textfile.php',
                success: function(response, opts) {
                    newtext = response.responseText;
                    console.log(newtext); 
                    sub=main.down('panel');
                    main.setMaterial(newtext);
                    sub.update(main.getMaterial());              
                },
                failure: function(response, opts) {
                    console.log('server-side failure with status code ' + response.status);
                }
            });
    */
            sub=main.down('panel');
            main.setMaterial(newtext);
            sub.update(main.getMaterial());
       
        }
    You can also use ajax request to get the new url as you can see in the commented section of my controller.

    As i said in the question i am completely new to all these web development thing. So i am pretty sure i might be making some big mistakes may be this is slow or may be this causes other problems, I will find out later but for now it works fine

  3. #2
    Sencha User BukhtiarM's Avatar
    Join Date
    Mar 2014
    Location
    Salzburg, Austria
    Posts
    8
    Answers
    1

    Default

    And yes instead of itemId i have also tried this with id and used Ext.getCmp('map') to access it this still does not work. Gives the same error: cannot set src of undefined

  4. #3
    Sencha User BukhtiarM's Avatar
    Join Date
    Mar 2014
    Location
    Salzburg, Austria
    Posts
    8
    Answers
    1

    Default Wuhu atleast somebody is working....

    Still no answers i wonder where everybody from the ext community is right now. But I have kind of found a work around this issue. So this works for me now but I would be interested in finding a better solution.... Lets call it a more professional way an EXT way of doing this. What i found out is that you can also render another pdf, another webpage another, another image from your server or from external sources by setting the html of your panel to:

    Code:
    html: '<iframe src="resources/webmap-exp/chemical/index.html" width="100%" height="100%"></iframe>'
    Now all you have to do is simply change the html of your panel in the controller to the something new of the form

    Code:
    html: '<iframe src="SomeNewUrl/..." width="100%" height="100%"></iframe>'
    and it works like a bang...

    My complete code looks something like this

    View


    Code:
    Ext.define('Practice.view.Center',{
        extend:'Ext.Panel',
        xtype: 'mainpanel',
        layout:{
            type:'vbox',
            align:'stretch'
        },
        config: {
            material:'<iframe src="somefolderonserver/index.html" width="100%" height="100%"></iframe>'
        },
        
        initComponent: function() {
            this.items = [
            {
                xtype: 'toolbar',
                items:[
                {
                    xtype: 'button',
                    text: 'commit',
                    action: 'newdata'
                },{
                    xtype: 'button',
                    text: 'Cancel',
                    action: 'save',
                }]            
            },{
                xtype:'panel',
                collapsible: true,
                html: this.material,
                layout:'fit',
                flex: 10,
            }];
            this.callParent(arguments);
        }
        
    });
    Controller

    Code:
    init: function() {
            this.control({
                'mainpanel button[action=newdata]':{
                    click: this.changeIt
                }
            });
        },
        changeIt: function(button) {
            console.log('the button has been clicked');
            var main = button.up('panel'),
            newtext = '<iframe src="resources/webmap-exp/chemical/index.html" width="100%" height="100%"></iframe>',
            
            /*
            Ext.Ajax.request({
                url: 'resources/textfile.php',
                success: function(response, opts) {
                    newtext = response.responseText;
                    console.log(newtext); 
                    sub=main.down('panel');
                    main.setMaterial(newtext);
                    sub.update(main.getMaterial());              
                },
                failure: function(response, opts) {
                    console.log('server-side failure with status code ' + response.status);
                }
            });
    */
            sub=main.down('panel');
            main.setMaterial(newtext);
            sub.update(main.getMaterial());
       
        }
    You can also use ajax request to get the new url as you can see in the commented section of my controller.

    As i said in the question i am completely new to all these web development thing. So i am pretty sure i might be making some big mistakes may be this is slow or may be this causes other problems, I will find out later but for now it works fine

  5. #4
    Sencha User BukhtiarM's Avatar
    Join Date
    Mar 2014
    Location
    Salzburg, Austria
    Posts
    8
    Answers
    1

    Default

    Okay So I selected my own answer as the best answer (Why did I ever do this???)... WOW.... I must be very self obsessed. But i want to keep this thread open for answers... Is there a way to do that???

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
  •