PDA

View Full Version : Really weird behavior using boxWrap()



zhegwood
23 Dec 2009, 4:21 PM
So, I have a tab panel and I'm using only the tabs to create a scrolling option effect. Anyway, I call boxWrap() on the element on render and do some other stuff and it works for a bit, but if I click on another tab, refresh the browser, and come back the boxwrap loses containment. I've attached screenshots of working and not. My code and CSS is below. I've also tested this with the default box wrap styles and it breaks there as well in both IE8 and FF3



//This is how I call the 'NeatTabStrip' object
items: new AV.NeatTabStrip({
width: 628,
height: 80,
listeners: {
render: function(obj) {
obj.el.boxWrap("tab-strip-wrap");
var w = obj.width+20; //+20 is for padding
obj.el.up(".tab-strip-wrap").setStyle("width",w+"px");
var items = obj.el.query("li");
var classes = ["easy-setup","publish","events","email","payments","forms","documents","security","configurable","help"];
for (var a = 0; a < items.length; a++) {
Ext.get(items[a]).addClass(classes[a]);
}
}
}
})

//the neat tab strip object
Ext.ns("AV");
AV.NeatTabStrip = Ext.extend(Ext.TabPanel,{

initComponent: function() {

Ext.apply(this,{
title: "Features for Community Leaders",
cls: "home-tab-strip",
enableTabScroll: true,
scrollDuration: .5,
scrollIncrement: 84,
headerCfg: {
height: 80
},
items: [
{ title: "Easy Setup", cls:"easy-setup"},
{ title: "Publish", cls:"publish"},
{ title: "Events"},
{ title: "Email"},
{ title: "Payments"},
{ title: "Forms"},
{ title: "Documents"},
{ title: "Security"},
{ title: "Configurable"},
{ title: "Help"}
]
});
AV.NeatTabStrip.superclass.initComponent.apply(this,arguments);
}
});

//and the css
/*************************
HOme TAb STrip STyles
**************************/
.home-tab-strip .x-tab-panel-header, .home-tab-strip .x-tab-panel-footer {
background-color: transparent;
padding-bottom:0px;
}
.home-tab-strip .x-tab-panel-header {
border: 0px;
padding:0px;
}
.home-tab-strip .x-tab-scroller-right, .home-tab-strip .x-tab-scroller-left {
border-bottom:0px;
}
.home-tab-strip ul.x-tab-strip-top {
height: 80px;
background-color:Transparent;
background-image:none;
border-bottom:0px;
padding-top:0px;
}
.home-tab-strip .x-tab-panel-body {
border: none;
}
.home-tab-strip ul.x-tab-strip li {
margin-left:0px;
padding-top:55px;
width: 84px;
height: 25px;
text-align:center;
background-repeat: no-repeat;
background-position: center top;
cursor: pointer;
}
.home-tab-strip ul.x-tab-strip li.easy-setup {
background-image:url(../images/tabstrip/iconEasySetup.gif);
}
.home-tab-strip ul.x-tab-strip li.publish {
background-image:url(../images/tabstrip/iconPublish.gif);
}
.home-tab-strip ul.x-tab-strip li.events{
background-image:url(../images/tabstrip/iconEvents.gif);
}
.home-tab-strip ul.x-tab-strip li.email{
background-image:url(../images/tabstrip/iconEmail.gif);
}
.home-tab-strip ul.x-tab-strip li.payments{
background-image:url(../images/tabstrip/iconPayments.gif);
}
.home-tab-strip ul.x-tab-strip li.forms{
background-image:url(../images/tabstrip/iconForms.gif);
}
.home-tab-strip ul.x-tab-strip li.documents{
background-image:url(../images/tabstrip/iconDocuments.gif);
}
.home-tab-strip ul.x-tab-strip li.security{
background-image:url(../images/tabstrip/iconSecurity.gif);
}
.home-tab-strip ul.x-tab-strip li.configurable{
background-image:url(../images/tabstrip/iconConfigurable.gif);
}
.home-tab-strip ul.x-tab-strip li.help{
background-image:url(../images/tabstrip/iconHelp.gif);
}
.home-tab-strip .x-tab-strip-top .x-tab-right, .home-tab-strip .x-tab-strip-top .x-tab-left, .home-tab-strip .x-tab-strip-top .x-tab-strip-inner {
background-image:none;
}
.home-tab-strip .x-tab-strip-top .x-tab-right {
padding-left:0px;
}
.home-tab-strip .x-tab-strip-top .x-tab-left {
padding-right:0px;
}
.home-tab-strip .x-tab-strip span.x-tab-strip-text {
font-family: verdana;
letter-spacing: 1px;
font-size:8px;
color:#999;
text-transform:uppercase;
}
.home-tab-strip .x-tab-scroller-left {
background-image: url(../images/tabstrip/arrowLeft.gif);
background-position: 0 bottom;
height: 80px !important;
width: 18px;
}
.ext-ie .home-tab-strip .x-tab-scroller-left, .ext-ie .home-tab-strip .x-tab-scroller-right {
filter: (OPACITY=0);
}
.home-tab-strip .x-tab-scroller-left, .home-tab-strip .x-tab-scroller-right {
opacity: 1;
}
.home-tab-strip .x-tab-scroller-right {
background-image: url(../images/tabstrip/arrowRight.gif);
background-position: 0 bottom;
height: 80px !important;
width: 18px;
}

/*************************
TAb strip wrap styles
************************/
.tab-strip-wrap-tl {
background: url(../images/tabstrip/topLeft.gif) transparent no-repeat 0 0;
zoom:1;
}

.tab-strip-wrap-tc {
height: 18px;
background: transparent url(../images/tabstrip/top.gif) repeat-x 0 0;
overflow: hidden;
}

.tab-strip-wrap-tr {
background: transparent url(../images/tabstrip/topRight.gif) no-repeat right 0px;
}

.tab-strip-wrap-ml {
background: transparent url(../images/tabstrip/left.gif) no-repeat 0;
padding-left: 10px;
overflow: hidden;
zoom:1;
}

.tab-strip-wrap-mc {
background-color: #fff;
font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;
color: #393939;
font-size: 12px;
}

.tab-strip-wrap-mc h3 {
margin: 0 0 4px 0;
zoom:1;
font-size: 14px;
font-weight: bold;
}

.tab-strip-wrap-mr {
background: transparent url(../images/tabstrip/right.gif) no-repeat right;
padding-right: 10px;
overflow: hidden;
}

.tab-strip-wrap-bl {
background: transparent url(../images/tabstrip/bottomLeft.gif) no-repeat 0 0;
zoom:1;
}

.tab-strip-wrap-bc {
background-image: ;
background: transparent url(../images/tabstrip/bottom.gif) repeat-x 0 0;
height: 2px;
overflow: hidden;
}

.tab-strip-wrap-br {
background: transparent url(../images/tabstrip/bottomRight.gif) no-repeat right 0;
}

.tab-strip-wrap-tl, .tab-strip-wrap-bl {
padding-left: 10px;
overflow: hidden;
}

.tab-strip-wrap-tr, .tab-strip-wrap-br {
padding-right: 10px;
overflow: hidden;
}

zhegwood
29 Dec 2009, 10:02 AM
I filed this as a bug, but turns out it's not a bug. The fix is here though:

http://www.extjs.com/forum/showthread.php?t=88514