ExtJS垂直TabPanel

JS

VerticalTabPanel = Ext.extend(Ext.Panel, {
	layout: 'card',
	activeItem: 1,
	style: 'padding:5px',
	tabWidth: 80,
	tabPosition: 'left',
	defaults: {
		border: false
	},
	
	initComponent: function(){
		var tabs = this.tabs = [], items = this.items;
		for (var i = 0; i < items.length; i++) {
			var item = items[i];
			item.header = false;
			tabs.push({
				title: item.title,
				iconCls: item.iconCls
			});
		}
		VerticalTabPanel.superclass.initComponent.call(this);
	},
	
	onRender : function(ct, position){
		VerticalTabPanel.superclass.onRender.call(this, ct, position);
		
		this.body.addClass('x-tab-panel-body-' + this.tabPosition);
		this.on('afterlayout', function(component, layout){
			var w = component.bwrap.getWidth();
			this.strip.setWidth(this.tabWidth);
			component.body.setWidth(w - this.tabWidth);
		}, this);
		
		var itemTpl = new Ext.XTemplate('<ul><tpl for=".">',
				'<li class="x-tab-panel-strip-item common" index="{[xindex-1]}">',
					'<span class="x-tab-panel-strip-item-icon {iconCls}"></span>',
					'<span>{title}</span>',
				'</li></tpl></ul>');
		
		this.strip = this.bwrap.createChild({
			tag: 'div', 
			cls: 'x-tab-panel-strip x-tab-panel-strip-' + this.tabPosition
		}, this.body);
		
		this.strip.update(itemTpl.apply(this.tabs));
		
		this.setActiveStrip(this.activeItem);
		
		this.strip.on('click', function(evt, el){
			this.setActiveStrip(el.getAttribute('index') - 0);
		}, this, {delegate: '.x-tab-panel-strip-item.common'});
	},
	
	setActiveStrip: function(activeIndex){
		var items = this.strip.select('ul li.x-tab-panel-strip-item');
		items.removeClass('actived');
		items.addClass('common');
		
		var item = items.item(activeIndex);
		item.removeClass('common');
		item.addClass('actived');
		try {
			this.layout.setActiveItem(activeIndex);
			this.doLayout();
		} catch(err) {}
	}
	
});

Css

.x-tab-panel-body-left {
	float: right;
}

.x-tab-panel-body-right {
	float: left;
}

.x-tab-panel-strip {
	width: 150px;
}

.x-tab-panel-strip ul {
	padding-top: 5px;
}

.x-tab-panel-strip-left {
	float: left;
}

.x-tab-panel-strip-right {
	float: right;
}

.x-tab-panel-strip-item {
	height: 30px;
	margin: 1px 0 0 0;
	color: #15428b;
	cursor: pointer;
	background: url(images/a.png);
}

.x-tab-panel-strip-item span {
	display: inline-block;
	line-height: 30px;
}

.x-tab-panel-strip-left .x-tab-panel-strip-item {
	background-position: left -30px;
}

.x-tab-panel-strip-right .x-tab-panel-strip-item {
	background-position: right -120px;
}

.x-tab-panel-strip-left .x-tab-panel-strip-item span {
	float: left;
}

.x-tab-panel-strip-right .x-tab-panel-strip-item span {
	float: right;
}

.x-tab-panel-strip-left .x-tab-panel-strip-item.actived {
	background-position: left 0;
	font-weight: bold;
}

.x-tab-panel-strip-right .x-tab-panel-strip-item.actived {
	background-position: right -90px;
	font-weight: bold;
}

.x-tab-panel-strip-left .x-tab-panel-strip-item.common:hover {
	background-position: left -60px;
	cursor: pointer;
}

.x-tab-panel-strip-right .x-tab-panel-strip-item.common:hover {
	background-position: right -150px;
	cursor: pointer;
}

.x-tab-panel-strip-item-icon {
	height: 100%;
	width: 16px;
	padding: 0 4px;
	background-repeat: no-repeat;
	background-position: center center;
}

测试代码：

xinghao.test.Control = function(config){
    Ext.apply(this, config);
    this.init();
};

xinghao.test.Control.prototype = {
    init: function(){
    	var url = this.rootPath + '/test/grid.json';
    	var tp = new VerticalTabPanel({
    		region: 'center',
    		tabWidth: 100,
    		tabPosition: 'left',
    		items: [{
    			title: '基本信息',
    			xtype: 'grid',
    			store: new Ext.data.JsonStore({
    				autoLoad: true,
    				url: url,
    				root: 'rows',
    				fields: ['userId', 'name', 'age']
    			}),
    			columns: [{
    				header: '编号',
    				dataIndex: 'userId'
    			}, {
    				header: '姓名',
    				dataIndex: 'name'
    			}, {
    				header: '年龄',
    				dataIndex: 'age'
    			}]
    		}, {
				title: '生成菜单',
				iconCls: 'add',
				html: 'aaaaaaaaaaa'
			}, {
				title: '授权',
				html: 'bbbbbbbbbbbb'
			}]
    	});
    	
    	new Ext.Viewport({
    		layout: 'border',
    		items: [tp]
    	});
    }
};