PDA

View Full Version : Help with an Ajax call example!



nightmd
27 Aug 2011, 5:41 PM
I am trying to load an external html page in a panel to create browsable content. I am not terribly familiar with Ajax but have read through all of the examples and keep seeing the same sample code. My problem is where do I put this code? In other words, in my .js file, where where do I place the Ext.Ajax request so the html web page goes into the panel?

I realize this is a basic question, but I've spent hours looking for an answer and can't find anything.

arthurakay
29 Aug 2011, 11:51 AM
I am not terribly familiar with Ajax but have read through all of the examples and keep seeing the same sample code. My problem is where do I put this code?

What code are you referring to?

Have you tried implementing anything thus far? If you post some sample code with an explanation of what you are having specific trouble with, I'll be glad to help.

nightmd
30 Aug 2011, 8:19 AM
Maybe what I want to do is not really meant for Sencha. Essentially I want to be able to display html content inside of a panel from a file hosted on the server where the Sencha app is located. In my example code, the file is "template.html" and it is accessed through the list element. I tried using the <embed> command but found it added a weird scroll bar and would not work consistently. I read the way to do this right is to use AJAX, which honestly I don't full understand and probably should do some research on (I really don't understand what a callback is, etc.). I found the following code in the forums:



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


So now, where do I put this inside of my app.js code in order to show it inside of my "guidelines" panel? Am I asking too much of Sencha to think I could use it to create a mini-browser of sorts for hosted content? See the code below:


RediReader = new Ext.Application({
name: "RediReader",


launch: function() {


RediReader.guidelinePanel = new Ext.Panel ({
id: 'guidelines',

});

RediReader.detailPanel = new Ext.Panel({
id: 'detailpanel',
layout: 'fit',
items: [RediReader.guidelinePanel],
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
RediReader.Viewport.setActiveItem('listwrapper', {type:'slide', direction:'right'});
}
}]
}
]
});


RediReader.listPanel = new Ext.List({
id: 'disclosurelist',
store: RediReader.ListStore,
itemTpl: '<div class="guideline">{Name}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
RediReader.detailPanel.update(record.data);
RediReader.Viewport.setActiveItem('detailpanel');
}
});


RediReader.listWrapper = new Ext.Panel ({
id: 'listwrapper',
layout: 'fit',
items: [RediReader.listPanel],
dockedItems: [{
xtype: 'toolbar',
title: 'Guidelines'
}]
});


RediReader.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [RediReader.listWrapper, RediReader.detailPanel]
});


}
});




Thanks so much for your help!

arthurakay
30 Aug 2011, 9:20 AM
Ext.Ajax.request({
url: 'template.html',
method: 'GET',
callback: function(options, success, response) {
console.log(response.responseText);
}
});


Okay, so I've highlighted the code you need to change in your case.

I don't know specifically what panel you want this HTML content displayed within, but hypothetically you would do something like this:



var panel = new Ext.Panel(...);

Ext.Ajax.request({
url: 'template.html',
method: 'GET',
callback: function(options, success, response) {
panel.update(response.responseText);
}
});

nightmd
1 Sep 2011, 6:52 PM
That worked great! I appreciate the help.

nightmd
4 Sep 2011, 11:35 AM
Arthur,

What you provided works perfectly, but I have a dilemma. If the url I call is in a subdirectory, none of it's relative links work because if I tap a hyperlink, the browser looks for the file in the main app directory.

For example, I can request a page called "links.html" through the Ajax call in a directory called "files", but if I tap on a hyperlink on the links.html page that refers to a document in a directory relative to the main page, the browser says it can't find the file because it is looking for it in the same directory as my app.js sencha app.

Is there a solution to this problem besides being more specific in the links.html code? The reason I care is because I am working with heavily linked pre-existing files and don't want to have to recode them. It's almost like I have to change the path directory but don't know how to do it.

Thanks,

Chris

arthurakay
6 Sep 2011, 7:50 AM
Unfortunately, I can't think of an easier way to deal with those relative links. The only two options I can think of are:

- rewrite the code on those pages to use full URL paths
- use some sort of Regular Expression to match/replace the links in the callback of your Ext.Ajax.request()