dialog.body = new ContentPanel(...) ?

[SmyersM]

This is my first post :)

I have been trolling the forums for a while, and decided to rewrite my VB.NET smart client app into a website "lite" version. I'm going to throw out the 10 years experience in the M$ world and jump into the J$ world.

So here is my first test app. I want to have a hyperlink that says "help me". When a pidly stupid user is confused they would click that button and a dialog would open with a help page describing their obvious mistake.

I'd like to use a content panel to AJAX load the HTML webpage.

Somewhere else in the code i have a function


registerHelpLink(element, correspondingWebpage);



Ext.onReady(function() {

var dialog = new Ext.BasicDialog('help-dlg', {
modal:true,
autoCreate: true,
autoTabs:false,
width:500,
height:300,
proxyDrag: true,
shadow:true,
minWidth:300,
minHeight:300
});
dialog.body = new Ext.ContentPanel('help-content', {
autoCreate: true,
url: 'http://msn.com'
}, 'inner html');

dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

});


The plan was going smooth. I got the hyperlink to show up on the webpage, and I got a blank dialog to show up (this took about 3 months of work) BUT NO CONTENT!

"bd.getMargins is not a function"

Its when i use autoCreate:true

Thoughts?

[SmyersM]

I made some progress that I'd like to report.

First of all, since J$ is not a strongly typed language, rather than telling me the real error (not valid parent type) i get a weird "that function is not found" error.

So the moral of the story is that in order to use a ContentPanel you need to use some LayoutManager.add("location", reference); type of code.


var dialog = new Ext.LayoutDialog('help-dlg', {
modal:true,
autoCreate: true,
autoTabs:false,
width:500,
height:300,
proxyDrag: true,
shadow:true,
minWidth:300,
minHeight:300,
center: {

}
});
dialog.getLayout().beginUpdate()
dialog.getLayout().add('center', new Ext.ContentPanel('help-content', {
autoCreate: true,
}));
dialog.getLayout().endUpdate()


Ok for my second question:

How do i get http://msn.com to show up in the new window that popped up?

I'm getting some sort of Access denied exception in firebug. Cannot call XML***.Load when Event handler or something.

Here is the problematic code:


function registerHelpTarget(id, path, dialog) {
Ext.get(id).on('click', function() {
dialog.setTitle('Help');
dialog.getLayout().findPanel('help-content').setUrl('http://www.msn.com', {
test: 'loading'
}, false);

dialog.getLayout().findPanel('help-content').refresh();

dialog.center();
dialog.show(id)
});
}


I am just trying to do some basic things to get a better handle on the object model.

Can anyone see anything i'm doing wrong?

[Animal]

Why bother with a ContentPanel (unless you are wanting muliple tabs)?

Why not just update the body Element?

BTW, you can't load cross-domain content, so www.msn.com won't work unless the page was served from www.msn.com



function registerHelpTarget(id, path, dialog) {
Ext.get(id).on('click', function() {
dialog.setTitle('Help'); // <-- Set in create code, not on every click
dialog.body.load('http://www.msn.com');
dialog.center(); //<-- not needed if config fixedcenter:true
dialog.show(id);
});
}

[SmyersM]

function registerHelpTarget(id, path, dialog) {
Ext.get(id).on('click', function() {
dialog.setTitle('Help');
dialog.getLayout().findPanel('help-content').setUrl('help/course_id.htm', {
test: 'loading'
}, false);
dialog.getLayout().findPanel('help-content').refresh();

dialog.show(id)
});
}


I am executing the above code to test some ajax loading of some 'dynamic' content.

When a user clicks a hyperlink a dialog pops up with some help information about the link.

Pretty cooool!

Except that it doesn't work. I get a 504 Resource Not Allowed error in firebug.

Question: "Is this an error with my localhost setup, or is this an error in my code."

Thanks!

(Also, I am using a content panel because I want to async load other webpages and i'm kind of noob.)

[JeffHowden]

Except that it doesn't work. I get a 504 Resource Not Allowed error in firebug.

That sort of error is one returned by a webserver.

[SmyersM]

function registerHelpTarget(id, path, dialog) {
Ext.get(id).on('click', function() {
dialog.setTitle('Help');
dialog.getLayout().findPanel('help-content').setUrl('help/course_id.htm', {
test: 'loading'
}, false);
dialog.getLayout().findPanel('help-content').refresh();

dialog.show(id)
});
}


I am executing the above code to test some ajax loading of some 'dynamic' content.

When a user clicks a hyperlink a dialog pops up with some help information about the link.

Pretty cooool!

Except that it doesn't work. I get a 504 Resource Not Allowed error in firebug.

Question: "Is this an error with my localhost setup, or is this an error in my code."

Thanks!

(Also, I am using a content panel because I want to async load other webpages and i'm kind of noob.)


By the way, I am 120% sure that the address loaded is correct. I cut and paste the link from the firebug debug and saw the blank help page loaded.

[SmyersM]

That sort of error is one returned by a webserver.

Wow lightning fast response.

Firebug said

"POST: http://localhost/y_app/help/course_id.htm 405"

Is this something I could instantly solve by uploading my localhost website to a server? I've never encountered the error before, and am not familiar with which setting i'd need to tweak on this computer.

[SmyersM]

Ok, a little more information.

I changed the second arg of setUrl from { test: "test" } to null and the page is not firing an error anymore.

However, the content on my page "asdflkjasdfsfd" isn't showing up in the dialog!

I'll tweak a bit and post my lessons.

[SmyersM]

OK!

So firefox was caching my page. Even though I explicitly said .refresh() FF was using the 3 day old copy instead of the one I was actively using.

This isn't really a huge deal, but so this does not bite me in the future, how can I avoid this in code. (I can't touch all my friend computers)

[brian.moeskau]

If you are using a static content type (like .htm) it will cache by default unless you give it a unique url. Many people add a unique value to their querystring (or add a fake querystring just for this purpose) like mypage.htm?123.

Regarding your async post errors, I would guess that it's because you are posting to a plain html page, which cannot actually process a post by default. Look at this page for info on what your 405 error means:

http://www.checkupdown.com/status/E405.html

I would assume that the error is because your page is not accepting POST as a valid method. Changing your parameter to null just means that you were no longer posting anything to the page, so the error went away.

You actually can configure the HTML content type to process on the server (if you're writing server script in the page) by changing settings at the web server level, but I would NOT recommend that approach. You really need to post to something that can actually process HTTP requests properly on the server (.php, .aspx, a Rails controller, Java servlet, etc.). Depending on which backend technology you're most comfortable with (I would guess ASP.NET if you're a VB programmer) I would search the forums for examples as there are many people using every technology I mentioned (and more).