? ? ? 最近打算对项目中用到ExtJS不分代码进行一次重构。采用OOP的方式对组建进行封装，增强UI组件的复用性，降低js部分的代码量。

?

介绍完起因，下面开始介绍如何扩展ExtJS的UI组件.

?

注意: 这里不涉及Ext4.x的内容

?

新增2.0Demo

1. 将extjs3.3的代码添加到了 public中
2. 修改demo的展示方式，采用实例和代码并存的方式
3. 新增了在线访问,?http://extoop.cloudfoundry.com/
4. 2.0Demo源码可以在附件中下到

环境介绍:

• ExtJS 3.3, 在写本文时，3.x的最新版本是3.4, 如果你还没有ExtJS，可以从这个地址下载:http://www.sencha.com/products/extjs3/download/
• Ruby1.9.2 + Sinatra(可选): 你可以采用任何Server技术，不过我的Demo是在这个环境下编写的

2. 代码:

?

Ext.namespace("dy.grid");

/*
	扩展一个Grid, 用来显示名称。更多的扩展可以看　EditGrid 源码.
*/
dy.grid.NameGrid = Ext.extend(Ext.grid.GridPanel, {
	
	title: 'This is my grid panel',
	width: 500,
	height: 400,
	
	// component组件的初始化方法，类似Java中的构造方法
	initComponent : function() {
		// 初始化父类Component, 类似Java中的super(), 必须要显示调用
       		 dy.grid.NameGrid.superclass.initComponent.apply(this, arguments);
		
		this.store = new Ext.data.Store({
			autoLoad: true,
			
			proxy: new Ext.data.HttpProxy({
				url: '/js/data.json'
			}),

			reader: new Ext.data.JsonReader({
				idProperty: 'id',
				root: 'rows',
				totalProperty: 'result',
				
				fields: [
					{name: 'id', type: 'int'},
					{name: 'name', type: 'string'},
					{name: 'tech', type: 'java'}
				]
			})
		});
		
	},
	
	// 渲染的时候会调用这个方法，内部组件的添加可以放这里
	onRender: function() {
		// super.render, 必须要显示调用
		dy.grid.NameGrid.superclass.onRender.apply(this, arguments)
		
	},
	
	// column module, short name is cm
	columns: [{
		id: 'name',
		header: 'Name',
		dataIndex: 'name'
	}, {
		id: 'tech',
		header: 'Tech',
		dataIndex: 'tech'
	}]
});

// registry xtype
Ext.reg('namegrid', dy.grid.NameGrid)

Demo代码说明:

?

• extoop_1.0.zip : 本次Demo源码，前端代码都包含在public目录下，用git打得包，没有包含ExtJS库文件
• extjs3.zip : extjs3.3库的部署代码，需要放到　extoop/public 目录下
• 代码的组织方式如下:

? ? ? ? ? ? ? ??

如何使用Demo:

1. 如果你使用ruby:

? ? ? ?cd extoop

? ? ? ?bundle install

? ? ? ?ruby app.rb

? ? ? ?访问 http://localhost:4578/ ?

2. 如果你使用java用户

用eclipse新建一个Dynamic Web Project, 然后把extoop/public扔到 WebContent目录下即可。

?

参考资料

扩展ExtJS组件:?http://extjs.org.cn/node/286

?