PDA

View Full Version : Displaying other javascript pages from your server inside an Ext app



BukhtiarM
23 Jun 2014, 9:14 AM
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:


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.


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

BukhtiarM
23 Jun 2014, 9:41 AM
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

BukhtiarM
24 Jun 2014, 8:57 AM
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:


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


html: '<iframe src="SomeNewUrl/..." width="100%" height="100%"></iframe>'

and it works like a bang...

My complete code looks something like this

View


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


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

BukhtiarM
24 Jun 2014, 9:15 AM
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??? :D