PDA

View Full Version : Questions: IFRAME, Memory, SEO, Best Practices



markos
22 Aug 2007, 9:41 AM
Here's what I'm going for:

http://mostroth.googlepages.com/layout-question.gif

Very simply, main page will have a BroderLayout. There will be a north div with links to set content in center div. Center div will need to access Ext functions, but of course I don't want to reload Ext. West div will have a tree, dynamically generated based on content in center div.

The pages loaded into the center div ('content pages') need to be spiderable by Google.

Ideally, if someone links to a content page or gets to it through Google, it should have the same functionality. Therefore, content pages must test to see if they were loaded into the center div, and if not they must load Ext on their own. Otherwise they skip loading Ext because it's already loaded in the main page.

Some questions here. Do I use IFRAMEs or just UpdateManager into a the center div? How do you let the loaded IFRAME access Ext functions? How do you test for Ext being loaded? Anyone know if there will be huge memory issues, like in this post:
http://extjs.com/forum/showthread.php?t=6860

Any help would be appreciated.

evant
22 Aug 2007, 3:13 PM
In my project, we began by using iframes in the center panel of a layout. We ran in to a number of issues, specifically:
1) Memory consumption
2) Having to reload Ext in each frame to access DOM elements correctly.

Unless you have a specific reason not to, you'd be much better off to load things via an UpdateManager, which injects the content directly into the DOM.

You could make your content pages 'smart' to detect whether they are being loaded via your application or via some other external source and modify the output depending on each case (when you use an UpdateManager you shouldn't provide the full DOM, only the relevant fragment).

mystix
22 Aug 2007, 7:38 PM
In my project, we began by using iframes in the center panel of a layout. We ran in to a number of issues, specifically:
1) Memory consumption
2) Having to reload Ext in each frame to access DOM elements correctly.

Unless you have a specific reason not to, you'd be much better off to load things via an UpdateManager, which injects the content directly into the DOM.

You could make your content pages 'smart' to detect whether they are being loaded via your application or via some other external source and modify the output depending on each case (when you use an UpdateManager you shouldn't provide the full DOM, only the relevant fragment).

interesting... are you all still using iframes then?
or have u all gone the UpdateManager way?
we're just using iframes in TabPanelItems and it's already a memory vacuum cleaner.

evant
22 Aug 2007, 7:40 PM
No, we went the UpdateManager path. We basically created a mini garbage collector, whenever a ContentPanel loads, it registers it's components (grids etc) with the GC, then we catch the close event of the CP and clean up the appropriate items.

mystix
22 Aug 2007, 7:43 PM
No, we went the UpdateManager path. We basically created a mini garbage collector, whenever a ContentPanel loads, it registers it's components (grids etc) with the GC, then we catch the close event of the CP and clean up the appropriate items.

very good idea indeed. thanks for the tip :D

markos
22 Aug 2007, 8:46 PM
That's a lot to chew...


(when you use an UpdateManager you shouldn't provide the full DOM, only the relevant fragment).
Do you mean, use UpdateManager to access the XHTML page, but have it only grab what's between the body tags and put that into the content panel? How is that done?


then we catch the close event of the CP and clean up the appropriate items.
A. Why doesn't Ext do this automatically
B. How exactly do you clean up all the items?

Thanks for all the help :D

evant
22 Aug 2007, 9:10 PM
1) No, I usually just return the fragment itself in the page, however you could make your server side page a bit more clever, like:


if (isAjax)
//print header

//print body fragment

if (isAjax)
//print footer


2a) There's no real way for Ext to know what you're loading in a ContentPanel, so it isn't really possible for it to clean up.
2b) This is reasonably complicated, so I'll just explain it in broad terms:
When cp loads, it should make a call to some central collector, that passes references to the objects that need destroying and the current CP.
Catch the beforeremove event of the LayoutRegion, and destroy all of the objects related to the content panel being destroyed.

hendricd
23 Aug 2007, 11:47 AM
I believe what you would want to consider here is a custom renderer for the CP.



your.ContentPanel.getUpdateManager().setRenderer({render:function(el,response){
//chop it, slice-it, dice-it
var sliced_up_response = '.......';
el.update(sliced_up_response);

}});


That way you can strip out the conflicting <style>, <Script> tags (and other unwanted stuff) to suite your needs just prior to rendering it in the Panel.