第17到23行，这是设置了ComboBox的显示下拉内容，将原来的显示文字修改成了显示图片加文字，这个没有什么问题，但是如果图片太大，就需要修改CSS了。
第25到34行，这里设置了ComboBox中显示的内容方式，ExtJs使用了一个很好的方式，Ext.DomHelper.append，这个是ExtJs的一个Dom API，主要对Html的Dom进行操作，这个代码的意思就是使用Dom在wrap这个单元中添加一个新的标记，这个标记的tag是div，并且使用了position:absolute这个样式。这就是问题出现的原因。对于现在的浏览器来说，对于div的背景图片是没有办法修改的。于是我将其修改为img，通过这个来修改图片的大小，这样就可以了。具体的效果如下：
ExtJS扩展：垂直tabLayout
最近在做一个项目时，项目中使用了ExtJS，有些内容要分页签显示，而出于项目要求，页签只能垂直分布，但ExtJS中的TabPanel只能水平显示，搜索了一下Ext论坛，发现有垂直TabLayout的扩展，但垂直tab的页签内容是水平显示的，且页签多了之后也不能通过设置enableScroll属性使其能滚动，为了适应项目的需求，本人对TabLayout进行了扩展，使其支持垂直页签显示，支持页签很多时的滚动。效果如下：
该组件有两种使用方式，一是扩展方式，二是复写方式。其中第一种方式需要引入附件中的TabPanel.js以及ext-patch.css，同时需要将两个图片放在ext-patch.css同目录下，在创建组件时需要创建Ext.ux.TabPanel； 例：
aa = new Ext.ux.TabPanel({ tabPosition: 'left', autoScroll: true,
deferredRender: false, activeTab: 0,
enableTabScroll: true, applyTo: 'aaa', items: [
bb = new Ext.Panel({layout:'fit', title:'基础资料', iconCls:'aaa', closable: true, html: '基础资料'
}),cc = new Ext.Panel({layout:\ title:\基础资料\ closable: true, html: '基础资料' })] });
第二种方式需要引入附件中的TabPanel2.js以及ext-patch.css，同时需要将两个图片放在ext-patch.css同目录下，在创建组件时需要创建Ext.TabPanel。 例：
aa = new Ext.TabPanel({
tabPosition: 'left', autoScroll: true,
deferredRender: false, activeTab: 0,
enableTabScroll: true, applyTo: 'aaa', items: [
bb = new Ext.Panel({layout:'fit', title:'基础资料', iconCls:'aaa', closable: true, html: '基础资料'
}),cc = new Ext.Panel({layout:\ title:\基础资料\ closable: true, html: '基础资料' })] });
两种使用方式展现效果相同，tabPosition属性同时支持top/right/bottom/left。
附件文件说明：
TabPanel.js 扩展Ext.TabPanel
TabPanel2.js 复写Ext.TabPanel中的相关方法 ext-patch.css 本文组件所使用的css
*.gif 为设置了enableScroll属性时需要的两个滚动按钮图片
扩展Ext中的组件
引言
起初，Ext.extend()干的不错，它使你能够建立强大的面向对象的JavaScript类层次结构。你可以用它构建你自己的类和派生类，当然也可以扩展Ext的内建类。如果不熟悉Ext.extend()，你应该先读一下Manual:Intro:Inheritance。
Jozef Sakalos写的Tutorial:Extending_Ext_Class详细介绍了怎样在Ext1.X下实现继承。因为自建的构造函数在Ext2.X下仍能够工作，而且毫无疑问你将会遇到2.X之前构造方式的代码，所以本文还是很值得一读的。 Ext.Component
大多数Ext窗口小部件（如Form elements, Panels, Toolbars, ..）继承自Ext.Component(那些没有继承的将在Ext3中实现继承)。
预配置类
最简单的扩展Ext.Component的方式（或者任何继承自它的类）就是延续Ext1.X中利用Ext.extend()的做法。然而还有个差别，就是你不需要定义自己的构造函数（构造函数将由initComponent()来处理，文章后面将会讲到）。如果你所需的是定义一些自己的缺省类来重用（指的是这里和ExtJS社区作为预配置类），所有你所需要做的就是：
//定义组件Ext.some.component的预配置类MyComponent MyComponent = Ext.extend(Ext.some.component, { myDefault1: '..', myDefault2: '..' });
//注册成xtype以便延迟加载
Ext.reg('mycomponentxtype', MyComponent);
在以上示例中，Ext.extend()中的第二个参数对象包含的自定义参数可覆盖Ext.some.component中已经支持的缺省参数。
以上示例看上去较简单，但能够让你从程序中重构除去相当数量重复的代码，并生成可重用的对象。举个例子，你可以用预配置选项创建一个Ext.some.component的实例，代码如下：
var myComponent = new MyComponent();
或者通过你注册过的Component XType延迟加载，下面示例作为Panel的组件项：
{..
items: [ {xtype: 'mycomponentxtype'} ] ..}
扩展Ext.Component
好的，虽然预配置类很有用，但是目前为止我们还没有添加任何其他的功能给继承类。我们需要覆盖一些方法来实现。这是Ext2.X精彩的地方。
Ext.Component源自1.x，但是在2.x中，它得到了扩展和加强，使它成为了整个架构中最基础的类。现在组件提供统一的组件创建、渲染、事件处理、状态维护、销毁模型，而且Ext中的每个组件，凡是需要这些特性的现在都扩展自Component。Ext_2_Overview#Component_Model。
你应该好好的学习下上面的 Ext_2_Overview，文章详细描述了组件的方方面面。当你一行行的跟踪Ext.Component中的源代码（在ExtJS的src目录下的widgets子目录下的Component.js中），你会明白the Component Life Cycle,Ext_2_Overview#Rendering和Ext_2_Overview#Destruction中的步骤描述所解释的实现，将对你了解Ext如何运行很有启发。
现在，既然本文是关于扩展Ext.Component的，主要关注的方法应是initComponent()，在the Component Life Cycle（组件生命周期）中扮演了首要角色，在你掌握了initComponent() 后，你可以继续研究其他重要的方法，如onRender()，使你能够扩展Ext_2_Overview#Rendering，onDestroy() 用来扩展Ext_2_Overview#Destruction，在这方面，我会指出一些由Ext社区成员写的非常好的文档。
Jozef Sakalos写的Tutorial:Writing_a_Big_Application_in_Ext是个非常不错的教程，它教你使用新的组件继承模型，并解释了为什么组件继承模型无疑是构建优良程序的好的基础。
还有由 Jozef Sakalos写的Tutorial:Extending_Ext2_Class，也提供了实际的例子来讲解（mjlecomte的帖子提供了该例子的建议版本）。 一个可重用模板
下面的模板（基于Jozef Sakalos在mjlecomte's帖子中的回复）可作为扩展Ext.Component的起点。
MyComponent = Ext.extend(Ext.some.component, { //缺省构造参数，可被自定义设置覆盖 propA: 1,
initComponent: function(){
//在组件初始化期间调用的代码
//因为配置对象应用到了“this”，所以属性可以在这里被覆盖，或者添加新的属性
//（如items,tools,buttons） Ext.apply(this, { propA: 3 });
//调用父类代码之前
//调用父类构造函数（必须）
MyComponent.superclass.initComponent.apply(this, arguments);
//调用父类代码之后
//如：设置事件处理和渲染组件 },
//覆盖其他父类方法 onRender: function(){
//调用父类代码之前
//调用父类相应方法（必须）
MyScope.superclass.onRender.apply(this, arguments);
//调用父类代码之后 } });
//注册成xtype以便能够延迟加载
Ext.reg('mycomponentxtype', MyComponent);
上面是一个启发例子，如果你用以下任意例子创建以上代码的实例 ：
var myComponent = new MyComponent({ propA: 2 });
//或者延迟加载: {..
items: {xtype: 'mycomponentxtype', propA: 2} ..}
属性propA将被设置3次，按顺序分别是1，2，3 。通过跟踪代码（和注释） ，你会发现初始值为1（构造缺省），然后通过用户配置对象设置为2，最后在initComponent方法中被覆盖设置成3.希望这个例子能让你稍微明白代码执行的顺序（而不是按照你读代码的顺序！）。
因为组件是其他组件的基础，所以下面代码是获取基础组件快捷方法。
var topCmp = (function(o){while(o.ownerCt){o=o.ownerCt} return o;})(this);
结束语
本文主要关注于initComponent()方法及其在the Component Life Cycle中的角色。一旦你掌握了它，就该研究Ext_2_Overview#Component_Model列出的Ext组件模型的其他方面（如管理渲染、状态管理、插件等）。非常感谢Jozef Sakalos，他发表了很好的关于扩展组件方面的帖子和教程，当然还要感谢Jack和Ext团队给我们提供了如此棒的框架，迫不及待想看看Ext3给我们带来了什么！
相关推荐：
loading