PDA

View Full Version : [1.1.1] add/remove tab in LayoutRegion causes iframe reload (导致页面刷新) (FF & Opera)



demonhqm
28 Sep 2007, 1:33 AM
在FireFox或者Opera 浏览器中使用,我的网页上有一个 center 区域


center: {alwaysShowTabs:false,
initialSize: 300,
collapsible:true,
floatable: false,
closeOnTab: true,
preservePanels: true}
innerLayout.add('center', new Ext.ContentPanel('inner2', {title: '目录', fitToFrame:true, closable:false}));

当此区域由单页面切换到多页面,或者多页面关闭后只剩下单页面,此时由于alwaysShowTabs设置的false,所以tabs会出现,或者消失。
问题:这个时候,我的panel(0),即panel('inner2')必会出现刷新。
查看ext的源码得知,在remove或者add Panel时,有判断this.panels.getCount() == 1 && !this.config.alwaysShowTabs,当页面由单页面变成多页面或者相反时整个区域会重画,此时由于div中iframe无法保存其内显示对象,所以导致区域内显示的iframe都重新刷新。IE浏览器无此问题,因为IE浏览器在COPY对象时,可以将iframe内显示的网页内容对象一同copy,所以即使重画也不会重新刷新,但是非IE浏览器却无此能力,所以导致iframe内的页面重新加载。

在得知原因后,本人采用了两种解决办法:

将alwaysShowTabs设为true,此方法简单OK,但是由于单页面时也显示tab,破坏了我的网页效果,导致界面十分难看,不被大家接受。
修改Ext.extend的remove 和 add 方法,判断this.panels.getCount() == 1 时,并不重画整个区域,而是简单的隐藏tabs,即
this.config.hideTabs = true;
this.tabs.stripWrap.setDisplayed(false);

经过一些测试,暂无发现有什么问题。
但由于我只是个ext的初学者,所以不敢确定这样修改是否会引起其它的BUG,请大侠们指导一下。

evant
28 Sep 2007, 2:40 AM
http://extjs.com/forum/showthread.php?t=8887

Please read the above and keep your post in english please.

mystix
28 Sep 2007, 5:42 AM
/:) what in the world...
the FIRST ever bug report entirely in chinese, with a light sprinkling of english... /:)

Ext version: unknown.
affected browsers: FF & Opera

[translation (@demonhqm, pls perform your own translation / get someone to do it for you before posting in future =;)]


the dude / dudette has a center LayoutRegion with that config above
the ContentPanels being added to the center region contain <iframe>s
when tabs in the center region are closed, because the preservePanels config is set to true, their corresponding ContentPanels (along with the panel's <iframe>) will be hidden (and not destroyed)
because the alwaysShowTabs config is false by default, as panels are added to / removed from the center region, the region will show / hide it's TabPanel accordingly, causing a layout() (and a browser redraw) to occur each time the TabPanel is shown / hidden
for some strange reason, only FF and Opera will reload the hidden <iframe>'s state AND content whenever a layout() (and thus browser redraw) is performed (state here i would take to mean in-memory js values)
according to the OP, IE somehow manages to maintain the <iframe>'s state, so it is unaffected by browser redraws
the OP first tried to overcome this problem by setting alwaysShowTabs to true, thus preventing the re-layout and browser redraw as the center region's tabs are opened / closed. this however messed up his page layout, this proved unacceptable to his users, so he abandoned this solution
the OP next tried to overcome this problem by directly modifying the source for Ext.LayoutRegion's add and remove methods, and disabling the call to layout() when the TabPanel is hidden (i.e. when the tab count drops to 1) like so


this.config.hideTabs = true;
this.tabs.stripWrap.setDisplayed(false);

the OP has successfully implemented this solution without encountering any problems so far
since the OP is an Ext newbie, he / she would like to know if this solution is safe for use, and if it will introduce any other bugs

mystix
28 Sep 2007, 5:46 AM
@demonhqm, this isn't an Ext bug.

see this thread:
11055

and this screencast by @djliquidice on the problem in FF:
http://screencast.com/t/lB0bKrzB

FireBug (www.getfirebug.com) reveals that even switching TabPanel tabs causes an iframe reload in FF.

demonhqm
28 Sep 2007, 5:26 PM
First very grateful to the help of @mystix , @evant and all concerns!
Beacuse my English is very poor,only know a few words,so I can't post in english all.
So sorry!My first posting is not meeting norms,I'll pay attention in the future.