PDA

View Full Version : TabPanel content in Ext.nd 2



tarikonen
7 Feb 2008, 8:47 AM
How can i retrieve document from a tabPanel?

I want to intercept the event "beforeremove" of tabPanel and verify that the document present in the tabPanel is in EditMode. For this i have inserted this line


this.ui.tabPanel.on('beforeremove',confirmRemove);

when i build Ext.nd.DominoUI, when the system call the function confirmRemove i want to verify that the document that is inside tabPanel is in EditMode.

Thanks in advance

RWaters
7 Feb 2008, 12:08 PM
Since documents are contained within an iFrame you will have to get a hold of the Ext.nd.UIDocument within the iFrame.

Something like:


function confirmRemove(container, panel) {
panel.getEl().child('iframe',true).Ext.nd.UIDocument.editMode;
}

I didn't test that, but I think it should work. Also we plan on looking into making it easier to access document properties from outside the iFrame easier in the future.

bhaidaya
7 Feb 2008, 12:42 PM
Speaking of which, Rich, have you seen this?

ux.ManagedIframe
- provides an update method for writing content directly (or via UpdateManager) to IFrames document.
- adds execScript method for 'eval' js source modules directly into the Iframe's window context.
- adds print method to programatically print the iframes contents.
http://extjs.com/forum/showthread.php?t=16608&highlight=managediframe

RWaters
7 Feb 2008, 12:49 PM
Speaking of which, Rich, have you seen this?

ux.ManagedIframe
- provides an update method for writing content directly (or via UpdateManager) to IFrames document.
- adds execScript method for 'eval' js source modules directly into the Iframe's window context.
- adds print method to programatically print the iframes contents.
http://extjs.com/forum/showthread.php?t=16608&highlight=managediframe

I have. Doug has been doing some really nice work with that extension. There is an Ext 2.x version available as well. We will look into it further.

tarikonen
7 Feb 2008, 1:30 PM
Hi Rich, it didn't work...


panel.getEl().child('iframe',true)

this don't return the dom of the iframe... i have read the help but i don't understand how it work...

RWaters
7 Feb 2008, 1:58 PM
Hi Rich, it didn't work...


panel.getEl().child('iframe',true)

this don't return the dom of the iframe... i have read the help but i don't understand how it work...

Hmmm, it is returning the dom of the iFrame when I test it. The problem is that there is already a beforeremove listener that Ext.nd puts there to clean up the iframe and prevent IE memory leaks. The other beforeremove event fires first so the values are not there when we try to find them with this handler.

Let me look into it a bit more, I should be able to come up with a workaround.

doddsilla
1 Apr 2008, 7:01 AM
I am trying to modify an application to use Ext.nd with the outline and tabbed interface. I have modified the Ext.nd js file to populate new tabs with links from the tree outline using iframes:

in openEntry:
if(!entry){
var iframe = Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
src: extndHref,
id : entryId
});
var panel = new Ext.ContentPanel(iframe, {
title: title,
fitToFrame:true,
autoScroll: false,
closable:true
});
this.layout.add('center', panel);
}

Most of the outline links are to dhtml views we previously built and want to use instead of the Ext.nd UI view (we have tons of categorization). The extndHref variable is pointing to a ?openview url. When I open multiple iframed-tabs, I start getting miserable performance in IE and real sluggishness in FF. I tried implementing using the ManagedIFrame extension, but I get an error when trying to load the library:

"sp has no properties" on the first line of ext-base.js

I'm not a seasoned Ext.nder, so does anyone have a solution or experience with these performance issues?

Thanks,

Jason

Zakaroonikov
1 Apr 2008, 12:58 PM
I am trying to modify an application to use Ext.nd with the outline and tabbed interface. I have modified the Ext.nd js file to populate new tabs with links from the tree outline using iframes:

in openEntry:
if(!entry){
var iframe = Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
src: extndHref,
id : entryId
});
var panel = new Ext.ContentPanel(iframe, {
title: title,
fitToFrame:true,
autoScroll: false,
closable:true
});
this.layout.add('center', panel);
}

Most of the outline links are to dhtml views we previously built and want to use instead of the Ext.nd UI view (we have tons of categorization). The extndHref variable is pointing to a ?openview url. When I open multiple iframed-tabs, I start getting miserable performance in IE and real sluggishness in FF. I tried implementing using the ManagedIFrame extension, but I get an error when trying to load the library:

"sp has no properties" on the first line of ext-base.js

I'm not a seasoned Ext.nder, so does anyone have a solution or experience with these performance issues?

Thanks,

Jason

Which Ext.nd are you using? What version of ExtJS? You will get a performance hit with iframes because it has to load all the framework js/css everytime since the iframe is self-contained.. To speed it up you are best to combine all the JS and CSS and then GZIP them. Also put the CSS in the header of the document and the JS in the body after all the html. That way you see something as the page is loading the JS files.

doddsilla
1 Apr 2008, 4:51 PM
Which Ext.nd are you using? What version of ExtJS? You will get a performance hit with iframes because it has to load all the framework js/css everytime since the iframe is self-contained.. To speed it up you are best to combine all the JS and CSS and then GZIP them. Also put the CSS in the header of the document and the JS in the body after all the html. That way you see something as the page is loading the JS files.

I am using Ext.nd based off Ext 1.1. The page I am trying to load in the iframe does not have any links to the Ext css or js. I thought the re-loading of the framework was a problem, so I removed them and tested load times. The tabs/iframes still load really slowly. Any other options?

jratcliff
2 Apr 2008, 5:21 AM
can you use Firebug or Fiddler and watch the http requests between the browser and your server and see which requests that take a really long time?

doddsilla
2 Apr 2008, 9:16 AM
can you use Firebug or Fiddler and watch the http requests between the browser and your server and see which requests that take a really long time?

Using firebug, I've clocked the ?openview url for the iframe eating the most bandwith with load times between 7 and 16 seconds for 1.2Mb to 2.6Mb's of data. I expected the individual view downloads to be rather large, but they should be deleted from the cache once the iframe/tab is closed. In IE, the browser virtually crawls after opening a view or two. Firefox handles the process a bit better, but not by much. Is there a routine to follow to ensure the iframes are cleared from the memory when closed?

Thanks,

Jason

Zakaroonikov
2 Apr 2008, 12:53 PM
Using firebug, I've clocked the ?openview url for the iframe eating the most bandwith with load times between 7 and 16 seconds for 1.2Mb to 2.6Mb's of data. I expected the individual view downloads to be rather large, but they should be deleted from the cache once the iframe/tab is closed. In IE, the browser virtually crawls after opening a view or two. Firefox handles the process a bit better, but not by much. Is there a routine to follow to ensure the iframes are cleared from the memory when closed?

Thanks,

Jason

On the removal of the tab set the url to 'javascript:false'. This should unload the current content in the iframe from memory. You should also check your memory usage of the browser to see how much leakage is occuring. I found that due to ExtJS 2.0's better component model there is less memory problems.

doddsilla
3 Apr 2008, 2:59 AM
On the removal of the tab set the url to 'javascript:false'. This should unload the current content in the iframe from memory. You should also check your memory usage of the browser to see how much leakage is occuring. I found that due to ExtJS 2.0's better component model there is less memory problems.

I'm using the default Ext X on the tab to close it. Do I need to code something to set the URL to be 'javascript:false' on the close event of the tab, or is Ext supposed to do this for me? I would love to use Ext 2.0, but I haven't seen a version of Ext.nd based off the 2.0 code yet(if I'm living in a cave here, let me know). Thanks for all the help on this.

RWaters
3 Apr 2008, 6:13 AM
The current release of Ext.nd (Beta 1) uses Ext 2.0. We have an event listener for the tab beforeremove event that applies the 'hack' of setting the iframe url to javascript:false, this was present in Alpha 2 as well. The key is that you must be using DominoUI, if you are creating your own layout then you will need to attach this function to beforeremove.


fixIFrame: function(container, panel) {
var iFrame = panel.getEl().dom;
if(iFrame.src) {
iFrame.src = "javascript:false";
}
Ext.removeNode(iFrame);
},