1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    liberte is on a distinguished road

      0  

    Default Two-level (nested) tabs with integrated style

    Two-level (nested) tabs with integrated style


    After writing a longish description of how I built my nested tabs, I hit Ctrl-W accidently (Emacs bindings in my fingers) and closed the window. I don't want to write it again, but the attached image will give you and idea what I was up to, and you can ask if interested.
    Attached Images

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    MarkB is on a distinguished road

      0  

    Thumbs up


    Very nice looking. Are you going to put up the source code for it?

    Also, quick question, does it support 2nd tier scrolling icons?

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    France
    Posts
    223
    Vote Rating
    0
    tof is on a distinguished road

      0  

    Default


    Good, indeed I'm interested
    Christophe Badoit
    aka Tof

    My work : Lesiteimmo.com - Unobstrusive ExtJs Powered !

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    liberte is on a distinguished road

      0  

    Default


    I don't know how the scrolling icons would look without the usual background.

    The way I did the two levels of tabs is very specific to our application, so you'll probably need to make adjustments. But for all the top-level tabs, I use the following html, and apply the subtab panel to the span with given id.

    Code:
    tabSpec.html = '<table class="" style="margin:0px 0em; border:0px">\n' + ' <tr><td style="height:4px"></td></tr>\n' + // spacer row ' <tr>' + ' <td><span id="' + tabData.id + '_extSubTabs' + '"></span></td>' + ' </tr>\n' +
    '</table>\n';
    The main trick is simply to add a class to each level of tabs (with e.g. cls: (topLevel ? 'ssExtTab' : 'ssExtSubTab') ) and specify the appropriate styles for each. Below are all the style changes. (Sorry about the lack of indentation - this editor doesn't know how to preserve what I pasted in.) There are two tabs-sprite.gif used for the inactive top level (blue) and active sub level (white), that are attached.

    Code:
    /*=====================================*/ /* ExtJS tabs * Override also for second level style */ .ssExtTab { height: 54px; /* Critical sizing, shouldnt be needed. */ }
    .ssExtTab .x-tab-panel-header { border-color: transparent; background-color: transparent; border-bottom-color: #DEECFD; /* #EAEAEA; */ border: 0px; padding-bottom:0px; height:23px; }
    .ssExtTab .x-panel-body { border: 0px; background-color: #DEECFD; }
    .ssExtTab ul.x-tab-strip-top { background: none; }
    .ssExtTab .x-tab-strip-spacer { border:0px; height:0px; }
    .ssExtTab .x-tab-panel-body { border: 0px; height:auto; } .ssExtTab .x-tab-strip-top span.x-tab-strip-text { color:#FFFFFF; text-decoration: none; }
    .ssExtTab .x-tab-strip-active span.x-tab-strip-text { color:#15428b; /* from ExtJS */ text-decoration: none; }
    /* inactive tabs, turn on borders */
    .ssExtTab .x-tab-strip-top .x-tab-right
    { background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-blue.gif) no-repeat 0 -51px;
    padding-left:10px; } .ssExtTab .x-tab-strip-top .x-tab-left
    {
    background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-blue.gif) no-repeat right -351px;
    padding-right:10px; } .ssExtTab .x-tab-strip-top .x-tab-strip-inner
    {
    background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-blue.gif) repeat-x 0 -201px;
    }
    .ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-right
    {
    background: transparent url(dhtml/extjs/resources/images/default/tabs/tabs-sprite.gif) no-repeat 0 -51px;
    padding-left:10px; }
    .ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-left
    {
    background: transparent url(dhtml/extjs/resources/images/default/tabs/tabs-sprite.gif) no-repeat right -351px;
    padding-right:10px; }
    .ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner
    {
    background: transparent url(dhtml/extjs/resources/images/default/tabs/tabs-sprite.gif) repeat-x 0 -201px;
    }
    .ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-right
    {
    background-position: 0 0;
    }
    .ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-left
    {
    background-position: right -301px;
    }
    .ssExtTab .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner
    {
    background-position: 0 -151px;
    }
    .ssExtSubTab .x-panel-body
    { background-color: #0082bd; /* #EAEAEA; */ border-top: 0px; }
    .ssExtSubTab ul.x-tab-strip-top
    { border-color: #0082bd; /* #d0d0d0; */ /* #dbdbdb url(dhtml/extjs/resources/images/gray/tabs/tab-strip-bg.gif) repeat-x left top;*/ padding-bottom:0px; }
    .ssExtSubTab .x-tab-panel-header
    { background-color: transparent; border: 0px; border-color: #0082bd; /* #d0d0d0; */ padding-top: 0px; }
    .ssExtSubTab .x-tab-strip-spacer
    { border:0px; height:0px; }
    .ssExtSubTab .x-tab-strip-top span.x-tab-strip-text
    { color:#15428b; /* from ExtJS */ } /* when mousing over tabs , underline inactive tabs */ .ssExtSubTab .x-tab-strip-over span.x-tab-strip-text { color:#010101; text-decoration: underline; }
    .ssExtSubTab .x-tab-strip-active span.x-tab-strip-text
    { color:#15428b; /* from ExtJS */ text-decoration: none; }
    /* inactive tabs, turn off borders */
    .ssExtSubTab .x-tab-strip-top .x-tab-right
    {
    background: transparent;
    padding-left:10px; } .ssExtSubTab .x-tab-strip-top .x-tab-left
    {
    background: transparent;
    padding-right:10px; } .ssExtSubTab .x-tab-strip-top .x-tab-strip-inner
    {
    background: transparent;
    }
    /* active tabs, turn on borders */
    .ssExtSubTab .x-tab-strip-top .x-tab-strip-active .x-tab-right
    {
    background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-white.gif) no-repeat 0 -51px;
    padding-left:10px; } .ssExtSubTab .x-tab-strip-top .x-tab-strip-active .x-tab-left
    {
    background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-white.gif) no-repeat right -351px;
    padding-right:10px; } .ssExtSubTab .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner
    {
    background: transparent url(dhtml/extjs/ScanScout/tabs-sprite-white.gif) repeat-x 0 -201px;
    }
    Attached Images

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    6
    Vote Rating
    0
    anacab is on a distinguished road

      0  

    Default


    Can you also post example code? I would greatly appreciate it. Thanks.

Thread Participants: 3