Results 1 to 2 of 2

Thread: Really weird behavior using boxWrap()

  1. #1
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default Really weird behavior using boxWrap()

    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

    Code:
    //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;
    }
    Attached Images Attached Images

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •