Ext.ux.TabPanel组件的使用

Ext.ux.TabPanel组件的使用

效果:

 

HTML代码:

  Ext.onReady(function() {
  var tabtest = new Ext.ux.TabPanel({
    activeTab: 0,
    tabPosition:'left',  //choose 'left' or 'right' for vertical tabs; 'top' or 'bottom' for horizontal tabs
    textAlign:'left',
    tabStripWidth:200,
    defaults:{autoScroll: true},
    items:[{
      title: 'Tab 1',
      html: "My content was added during construction."
    },{
      title: 'Tab2',
      html: "My content was added during construction."
    },{
      title: 'Disabled Tab',
      disabled:true,
      html: "Can't see me cause I'm disabled"
    }
        ]
  });

  var win = new Ext.Window({
    width:800,
    layout:'fit',
    height:600,
    items:tabtest
  });
  win.show();
});

 

Ext.ux.TabPanel文件源码:

 Ext.namespace("Ext.ux");

/**
 * @class Ext.ux.TabPanel
 * @extends Ext.TabPanel
 *
 * Enable tabs to be positioned on the left side of a TabPanel. In order to make as few changes as possible, we reuse
 * the header element and place it on the left side
 */

/**
 * @constructor
 * @param {Object} cfg A config object
 *  @cfg {String} tabPosition 'top' (the ext default behaviour), 'bottom' (also ext default), 'left' (vertical tabs on the left side) or right (vertical tabs on the right side)
 *  @cfg {Number} tabWidth (only applies if verticalTabs is set to true)
 *  @cfg {String} textAlign 'left' or 'right', deafults to 'left' (only applies if verticalTabs is set to true)
 */
Ext.ux.TabPanel = function(cfg) {
  if (cfg.tabPosition == 'left' || cfg.tabPosition == 'right') {
    cfg.cls = cfg.cls || '';
    cfg.cls = 'verticalTabs ' + cfg.cls;
    if (cfg.textAlign && cfg.textAlign == 'right') {
      cfg.cls = 'alignRight ' + cfg.cls;
    }
    cfg.cls = (cfg.tabPosition == 'left' ? 'leftTabs ' : 'rightTabs ') + cfg.cls;
    this.intendedTabPosition = cfg.tabPosition;
    this.verticalTabs = true;
    cfg.tabPosition = 'top';
  }
  Ext.ux.TabPanel.superclass.constructor.call(this, cfg);
};

Ext.extend(Ext.ux.TabPanel, Ext.TabPanel, {
  tabWidth : 150,

  afterRender : function() {
    Ext.ux.TabPanel.superclass.afterRender.call(this);
    if (this.verticalTabs) {
      this.header.setWidth(this.tabWidth);
      this.header.setHeight(this.height || this.container.getHeight());
    }
  },

/**
 * Adjust header and footer size.
 * @param {Number} w width of the container
 * @return {Number} the body will be resized to this width
 */
  adjustBodyWidth : function(w) {
    if (this.verticalTabs) {
      if (Ext.isIE6) {
        //I got the value "3" through trial and error; it seems to be related with the x-panel-header border; if the border
        //is set to "none", then this substraction is not necessary - but it does not seem related to the border width, margin or padding of any
        //of the panels so I dont know how to calculate it; please let me know if you have any idea what's going on here
        this.bwrap.setWidth(w - 3);
      }
      return w;
    }
    else {
      return Ext.ux.TabPanel.superclass.adjustBodyWidth.call(this, w);
    }
  },

/**
 * Get the new body height and adjust the height of the tab strip if it is vertical.
 * @param h {Number}
 */
  adjustBodyHeight : function(h) {
    if (this.verticalTabs) {
      this.header.setHeight(h + (this.tbar ? this.tbar.getHeight() : 0));
    }
    return Ext.ux.TabPanel.superclass.adjustBodyHeight.call(this, h);
  },

/**
 * If the tab strip is vertical, we need to substract the "header" width.
 * @return {Number} The frame width
 */
  getFrameWidth : function() {
    return Ext.ux.TabPanel.superclass.getFrameWidth.call(this) + this.verticalTabs ? this.tabWidth : 0;
  },

/**
 * If the tab strip is vertical, we don't need to substract it's height
 * @return {Number} The frame height
 */
  getFrameHeight : function() {
    return Ext.ux.TabPanel.superclass.getFrameHeight.call(this) - (this.verticalTabs ? this.header.getHeight() : 0);
  }
});

Css源码:

.verticalTabs ul.x-tab-strip li{
  clear:both;
  margin:0;
  width:100%;
}

.verticalTabs .x-tab-strip a.x-tab-strip-close{
  display:none;
}

.verticalTabs ul.x-tab-strip li .x-tab-strip-inner {
  padding:6px 3px;
}

.verticalTabs .x-tab-left, .verticalTabs .x-tab-strip .x-tab-with-icon .x-tab-right, .verticalTabs .x-tab-strip-top .x-tab-right{
  background:none;
  padding:0;
}

.verticalTabs ul.x-tab-strip-top{
  background:none;
  border:none;
  padding-top:0;
}

.verticalTabs ul.x-tab-strip li.x-tab-edge{
  border-bottom:1px solid #99BBE8!important;
}

.verticalTabs.leftTabs .x-tab-panel-header{
 float:left;
}

.verticalTabs.rightTabs .x-tab-panel-header{
 float:right;
}

.verticalTabs.alignRight ul.x-tab-strip {
  width: 100%;
}

.verticalTabs.alignRight ul.x-tab-strip li {
  clear: both;
  margin: 0;
  text-align: right;
  width: 100%;
}

 

备注:

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