PDA

View Full Version : TabPanel resize



andy_ghg
3 Aug 2009, 4:31 AM
Hi all,I found a BUG,
Browser:IE8&Chorme
when resize browser , Tabpanel's style have a bug.look this image:
http://www.dojochina.com/bbs/attachment.php?attachmentid=54&d=1249302043

after resize browser:
http://www.dojochina.com/bbs/attachment.php?attachmentid=55&d=1249302112

evant
3 Aug 2009, 4:32 AM
Please post more info, see: http://extjs.com/forum/showthread.php?t=71015

andy_ghg
3 Aug 2009, 8:11 AM
i'm sorry.
Ext version tested:

Ext 3.0.0


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3 (firebug 1.3.0.10 installed)
Safari 4


Operating System:

Windows Server 2008 Stander


Description:


when resize browser , Tabpanel's style have a bug.look this image:
http://www.dojochina.com/bbs/attachment.php?attachmentid=54&d=1249302043

after resize browser:
http://www.dojochina.com/bbs/attachment.php?attachmentid=55&d=1249302112


Test Case:



Ext.namespace("Module.Rabbion");
/**
* @description ??menu?????????????????
* @class Module.Rabbion.Menu
* @extends Ext.menu.Menu
*/
Module.Rabbion.Menu=Ext.extend(Ext.menu.Menu,{
initComponent:function(){
Module.Rabbion.Menu.superclass.initComponent.call(this,arguments);

this.add(new Ext.menu.Item({
text:"My Story"
}));
},
loadMenu:function(){
Ext.Ajax.request({
url:"",
success:function(){}
})
}
})

Module.Rabbion.RabbionBar=Ext.extend(Ext.TabPanel,{
height:125,
deferredRender:false,
enableTabScroll : true,
minTabWidth: 200,
resizeTabs : true,
activeTab:0,
initComponent:function(){
Module.Rabbion.RabbionBar.superclass.initComponent.call(this,arguments);
var proxy=this;
this.addEvents("menuItemClick");
this.panel=new Ext.Panel({
title: 'My Blog',
iconCls:"house",
tbar: [{
xtype: 'buttongroup',
columns: 3,
title: 'Articles',
items: [{
text: 'new',
scale: 'large',
rowspan: 3,
iconCls: 'write',
iconAlign: 'top',
cls: 'x-btn-as-arrow',
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
},{
xtype:'splitbutton',
text: 'My Articels',
scale: 'large',
rowspan: 3,
iconCls: 'articels',
iconAlign: 'top',
arrowAlign:'bottom',
menu: new Module.Rabbion.Menu(),
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
},{
text: 'Rep', iconCls: 'page_white_edit'
},{
text: 'Message', iconCls: 'user_comment'
},{
text: 'Home', iconCls: 'house'
}]
},{
xtype:"buttongroup",
columns:2,
title:"Video",
items:[{
text:"Video Manage",
scale:"large",
rowspan:3,
iconCls:"video-opration",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
},{
text:"Video List",
scale:"large",
rowspan:3,
iconCls:"videos",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
}]
},{
xtype:"buttongroup",
columns:2,
title:"??",
items:[{
text:"Music Manage",
scale:"large",
rowspan:2,
iconCls:"music-opration",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
},{
text:"Music List",
scale:"large",
rowspan:2,
iconCls:"music",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
}]
},{
xtype:"buttongroup",
columns:2,
title:"Photo",
items:[{
text:"Photo Manage",
scale:"large",
rowspan:3,
iconCls:"photo-opration",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
},{
text:"Photos",
scale:"large",
rowspan:3,
iconCls:"photo",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
}]
},{

xtype:"panel",
layout:"form",
frame:true,
height:90,
width:200,
defaultType:"textfield",
defaults:{anchor:"100%",readOnly:true},
labelWidth:35,
items:[{
fieldLabel:"??"
},{
fieldLabel:"??"
},{
fieldLabel:"??"
}]
},{
xtype:"buttongroup",
columns:2,
title:"Setting",
items:[{
text:"User setting",
scale:"large",
rowspan:3,
iconCls:"myinfo",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
},{
text:"Chart",
scale:"large",
rowspan:3,
iconCls:"chart",
iconAlign:"top",
cls:"x-btn-as-arrow",
handler:function(){
proxy.fireEvent("menuItemClick",this);
}
}]
}]
});
this.add(this.panel);

}
});

Ext.onReady(function(){
var panel=new Module.Rabbion.RabbionBar({renderTo:Ext.getBody()});
});


Debugging already done:

none


Possible fix:

not provided

mjlecomte
3 Aug 2009, 8:43 AM
I think your link requires logging into your other forum. Please provide a direct link or attach to your post.

mjlecomte
3 Aug 2009, 8:46 AM
Also, can you trim down your example code to eliminate anything not needed to reproduce the problem you are experiencing? We would rather not have to debug someone else's class if not needed for example.

Animal
3 Aug 2009, 10:14 AM
This is just user error surely?

The OP is expecting the TabPanel to magically resize on browser resize? That's not how TabPanel works.

Put it into a layout: 'fit' Viewport, and it will be always the size of the browser window.

andy_ghg
4 Aug 2009, 3:31 AM
I can not open Google Picasa

this is bug's shortscreen over there....

Thanks every body.....

http://picasaweb.google.com/andyghg/Desktop#5366067022642618066

Animal
4 Aug 2009, 3:48 AM
The TabPanel is not going to automagically resize itself.

Use a Viewport.

andy_ghg
4 Aug 2009, 8:34 AM
Oh...thanks , Is my code wrong....sorry everybody......very sorry.....

thanks every body again.....:((