PDA

View Full Version : Ext.Panel Load HTML from external file?



80g
21 Jun 2010, 6:24 AM
Hello all, I'm new to ExtJS. I've googled it quite a bit before posting here and I see examples of autoLoad and load and some other misc. types of methods for loading HTML snippets externally into Ext.Panel. However in the "Sencha Touch" docs I don't see a way to do it currently. Am I missing something?

-Andy

TommyMaintz
21 Jun 2010, 10:53 AM
It seems like we haven't put that functionality into Sencha Touch yet. This is definitely something we will do in the next release.

For now try doing something like:


Ext.Ajax.request({
url: 'yoururl.html',
callback: function(response) {
yourPanel.update(response.responseText);
}
});

80g
21 Jun 2010, 12:16 PM
Thanks for pointing me in a good direction! That example threw some event errors for me. I did a little bit a digging and this seems to work OK from initial observation:



Ext.Ajax.request({
url: 'yoururl.html',
success: function(response, opts) {
yourPanel.update(response.responseText);
}
})

stephans
15 Jul 2010, 5:24 AM
Thanks, sorry for stupid question : but, where put this code please ?
Thanks !

Chromatik
20 Aug 2010, 10:08 AM
Hi, Has this functionality been added? If so, can you provide a simple example? Thnaks

evant
20 Aug 2010, 9:53 PM
Currently not in a release, we're looking into it for future so you also load components from a remote source as well.

lteti77
29 Aug 2010, 11:24 PM
Hi, i tried to use the code above to load a local html page fragment (only a 'div' containing simple text not a full html page) inside a panel using AJAX but i noticed that the success function is not called.
I logged the response.status and it gave me 0 even if the response.responseText has been loaded...
Using the failure function i can set the panel content with the responseText but this is not really "elegant" and clear in my opinion.
Is there an alternative way to handle the loading of local text file using Ext.Ajax?
Thanks,
Luca

evant
29 Aug 2010, 11:27 PM
What do you mean by "local" text file?

lteti77
30 Aug 2010, 1:14 AM
I have a native application that uses phonegap framework and sencha touch. The app basically loads an index.html file from a 'www' folder inside a webview. I need to display a page if the device is in portrait mode and another page if it's in landscape mode.
Actually i use a single html page with 2 'divs' containing the portrait and landscape html code: the divs are loaded in 2 panels and on orientation change i switch the panels. Here's the code:

Ext.setup({
onReady: function() {
panel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items:[{xtype:'panel',contentEl:'portrait-container',scroll:'vertical'},
{xtype:'panel',contentEl:'landscape-container',scroll:'false'}]
});
Ext.EventManager.onWindowResize(setActivePanel);
}
});

function setActivePanel(){
if (Ext.getOrientation()=="landscape") {
panel.getLayout().setActiveItem(1);

} else {
panel.getLayout().setActiveItem(0);
}
};
Now i would like to load only the page i need to display, so i tried to use AJAX to perform page loading when needed.
I hope it's more clear now, sorry for my english...

findktk
25 Mar 2011, 11:08 PM
I have a similar issue

All i need to do is have my own html page say xyz.html which has a <h1>hello world</h1> inside it to load in the panel, instead of html: 'hello world', I would need something like html: {url: 'xyz.html'}, assuming xyz.html is in the same folder as index.js

I also tried the Ajax code bit, it dint work, where do i call it from, does it need to be initialized with new Ext.Ajax...

also i found that there is an autoload parameter in ext js here http://dev.sencha.com/deploy/dev/examples/tabs/tabs.html, doesnt seem to work in sencha touch
Thanks

cpsp
27 Apr 2011, 8:46 PM
I am using phonegap as well and I also would like to load the contents of a html file that resides in the same folder as the Sencha application.

thetallbloke
17 Jun 2011, 6:45 AM
Hi findktk,

I was able to do something similar to what you described...

I really wanted to do the following:


{iconCls: 'settings', title: 'Settings', html: url('MyFile.html')}

But this didn't work...

So what I did was:
1) I stuck this bit of code at the top of my index.js file:

var oRequest = new XMLHttpRequest();
oRequest.open('GET', 'Settings.htm', false);
oRequest.setRequestHeader("User-Agent", navigator.userAgent);
oRequest.send(null)
This gets the HTML from my file..

2) Added the object into the correct spot..

{iconCls: 'settings', title: 'Settings', html: oRequest.responseText }

Dirty, but it worked for what I needed...

If anyone has a better way, please share it...!!!

Thanks

lewisc
21 Jun 2011, 1:11 PM
Hi findktk,

I was able to do something similar to what you described...

I really wanted to do the following:


{iconCls: 'settings', title: 'Settings', html: url('MyFile.html')}

But this didn't work...

So what I did was:
1) I stuck this bit of code at the top of my index.js file:

var oRequest = new XMLHttpRequest();
oRequest.open('GET', 'Settings.htm', false);
oRequest.setRequestHeader("User-Agent", navigator.userAgent);
oRequest.send(null)
This gets the HTML from my file..

2) Added the object into the correct spot..

{iconCls: 'settings', title: 'Settings', html: oRequest.responseText }

Dirty, but it worked for what I needed...

If anyone has a better way, please share it...!!!

Thanks

When using the application offline this doesn't work for me, it always gives errors

thetallbloke
21 Jun 2011, 2:36 PM
sorry lewisc.. I've not played around with offline apps yet...

maybe when I have time... say 24/06.......2014.... :(

interfasys
23 Jul 2011, 5:23 AM
You can try the Sencha way


Ext.Ajax.request({
url: 'resources/html/about.html',
method: 'GET',
callback: function(options, success, response) {
console.log(response.responseText);
}
});

You have to use the callback function because it will always return success=false.

Roger_K
23 Jul 2011, 11:30 PM
Hi,
Then how do we display url frm external sources like www.google.com?

interfasys
24 Jul 2011, 1:29 AM
Just assign the full URL to the url variable, make sure you get a 'success = true' response before showing/umasking the result and write some code to deal with the errors.

Roger_K
24 Jul 2011, 2:54 AM
Hi, however, when I tried to alert(success), it keeps coming up as false. I am trying to use it on the OAuth of Facebook so that my users can login to their facebook without being redirected away from my app.

Here's the code I am using.


Ext.Ajax.request({
url: "https://www.facebook.com/dialog/oauth?client_id=XXXXXXXXXX&redirect_uri=XXXXXXX&scope=user_status,publish_stream,read_stream&display=popup&response_type=token",
method: 'GET',
callback: function(options, success, response) {
alert(success)
}

anikralhan
5 Oct 2011, 12:52 AM
Currently not in a release, we're looking into it for future so you also load components from a remote source as well.

Hi Buddy,
I'm newbie to Sencha touch. I'm have been working on phonegap and mobile jquery for making an app for ipad but shifted to Sencha Touch because of it's nice page transitions as mobile jquery is not promising to me for that.
Now page transition is smooth but I have been facing an issue since long.
I want to display an html page inside panel which has a toolbar(made using Sencha touch).

I have been discussing it in below thread but no success.
http://www.sencha.com/forum/showthread.php?144847-Load-Ext.Panel-content-from-external-HTML-file-answer&p=656428#post656428



What I want is to display an html page inside the panel.
Kindly guide me How can I solve my issue.

Thanks in advance

anikralhan
5 Oct 2011, 1:10 AM
Hi Buddy,
I'm newbie to Sencha touch. I'm have been working on phonegap and mobile jquery for making an app for ipad but shifted to Sencha Touch because of it's nice page transitions as mobile jquery is not promising to me for that.
Now page transition is smooth but I have been facing an issue since long.
I want to display an html page inside panel which has a toolbar(made using Sencha touch).

I have been discussing it in below thread but no success.
http://www.sencha.com/forum/showthread.php?144847-Load-Ext.Panel-content-from-external-HTML-file-answer&p=656428#post656428



What I want is to display an html page inside the panel.
Kindly guide me How can I solve my issue.

Thanks in advance