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

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

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

?

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

?

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

?

新增2.0Demo

将extjs3.3的代码添加到了 public中修改demo的展示方式，采用实例和代码并存的方式新增了在线访问,?http://extoop.cloudfoundry.com/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 两个方法:

?

initComponent?: 可以理解为构造方法，完成UI组建的初始化操作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 cmcolumns: [{id: 'name',header: 'Name',dataIndex: 'name'}, {id: 'tech',header: 'Tech',dataIndex: 'tech'}]});// registry xtypeExt.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

?

查看更多 下一篇