使用OOP的方式扩展ExtJS UI组建 - 更新版

      最近打算对项目中用到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是在这个环境下编写的

如何扩展Ext JS UI:

1. 基本概念

Ext提供了Ext.extend(parentObject, newObject):Object 用来解决js的Object继承问题

在扩展UI组建时，需要关注　initComponent  和　onRender 两个方法:

 

1. initComponent : 可以理解为构造方法，完成UI组建的初始化操作
2. onRender : 为渲染方法，组建渲染时会调用该方法。在此时也会确定ExtJS组件之间的从属关系。

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