下面将 用户界面称为UI 业务逻辑称为BL
几个重点
1. Ext.extend()
2. UI与BL解耦
每个模块分为3个文件
1. UI定义
2. BL和事件处理
3. 组织
UI定义
// Account.ui.js 定义UI AccountUi = Ext.extend(Ext.form.FormPanel, { title: 'Account', labelWidth: 100, labelAlign: 'left', layout: 'form', width: 600, frame: true, initComponent: function() { this.items = [ { xtype: 'container', autoEl: 'div', layout: 'column', items: [ { xtype: 'container', autoEl: 'div', layout: 'form', columnWidth: 0.5, items: [ { xtype: 'textfield', fieldLabel: 'First Name', anchor: '95%', name: 'fname', ref: '../../fname' }, { xtype: 'datefield', fieldLabel: 'Birth of day', anchor: '95%', name: 'birthday', ref: '../../birthday' } ] }, { xtype: 'container', autoEl: 'div', layout: 'form', columnWidth: 0.5, items: [ { xtype: 'textfield', fieldLabel: 'Last Name', anchor: '95%', name: 'lname', ref: '../../lname' }, { xtype: 'combo', fieldLabel: 'Sex', anchor: '95%', name: 'sex', ref: '../../sex' } ] } ] }, { xtype: 'htmleditor', anchor: '98%', fieldLabel: 'Memo', height: 150, width: 300, name: 'memo', ref: 'memo' } ]; this.fbar = { xtype: 'toolbar', items: [ { xtype: 'button', text: 'Save', ref: '../saveBtn' }, { xtype: 'button', text: 'Reset', ref: '../resetBtn' } ] }; AccountUi.superclass.initComponent.call(this); } });
BL和事件处理
// Account.js 处理业务逻辑和事件 关于如何引用到Form中的变量, 请参考 组件的 ref 的定义与配置 Account = Ext.extend(AccountUi, { initComponent: function() { Account.superclass.initComponent.call(this); this.saveBtn.on('click', this.doSaveAction, this); }, doSaveAction: function() { alert('do business A....'); alert('do business B....'); } });
组织
// index.js Ext.onReady(function() { var account = new Account({ renderTo: Ext.getBody() }); account.show(); });
如果为生成模块的UI感到苦恼,字段太多感到维护困难,那么ExtJS Designer将是选择之一。以后开发的工作量将从UI的排版和字段的维护降至最低点,而你所专注的只有业务逻辑的处理。
–end–
相关推荐
ExtJs:收集基于ExtJs扩展的一些控件 ExtJs:收集基于ExtJs扩展的一些控件
extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器
Extjs项目之个人理财项目源码 Extjs项目实例
一个很好的Extjs实践项目 struts+extjs mysql数据库建好,插上几条数据,导入到myeclipse运行即可
ExtJS2.2学习:再论el和contentEl的区别 为了更好的区分el和contentEl的使用,下面让我们来做几个测试。 测试一 .......
基于extjs改造的edo基于extjs改造的edo
前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
1、基于ExtJS 3.4版本实现,采用默认的样式风格,中文语言; 2、演示了登录页和主页面之间的相互切换; 3、通过实现角色管理、用户管理、部门管理三个基础的功能模块,演示了Viewport、Container、Panel、Grid、...
演示网址:http://wslcn.101.80000web.net.cn/disk/
基于Extjs的DirectCenter框架源码 DirectCenter主要分为用户管理,部门管理,公司管理三个模块。 DirectCenter: DirectCenter.Model (类库项目)实体类库,其中包括hibernate映射文件(可以把映射文件放到DAL层,...
用的extjs是3.4版,在新的extjs4.2环境下不能运行,费了好大劲,终于搞定。期间到laz英文论坛提问,可能跟我英文差有关吧,一个回答的都没有。搞定后,版主又要我进行了“ open a new issue in the bugtracker and ...
基于ExtJS的通用后台管理系统。某宝购买,界面布局漂亮、里面有如何导入,以及中间遇到错误的解决办法的文档。可以快捷、方便的移入自己的项目中。
基于extjs框架实现的双日历功能
extjs用户登录界面 博文链接:https://hyj0903.iteye.com/blog/691273
a) 完整的事务、事件管理、用户、单位、角色、权限管理设计,能快速帮助企业在不同的项目中快速完成用户、单位、角色、权限的分配,迅速投入到项目本身的业务系统开发中。 b) 完整的字典管理功能,能方便的对业务...
Extjs大型项目
a) 完整的事务、事件管理、用户、单位、角色、权限管理设计,能快速帮助企业在不同的项目中快速完成用户、单位、角色、权限的分配,迅速投入到项目本身的业务系统开发中。 b) 完整的字典管理功能,能方便的对业务...
基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架 基于 Extjs + spring + hibernate 的OA框架
extjs实践大量实例讲解,学习的好资料
采用ExtJS-4.0.7版本,使得前端也有MVC开发模式,并且利用json来配置管理界面,将界面分成了3个部分,一个是查询界面,一个是操作条,一个是表格,一个操作打开一个新界面,操作按钮执行什么操作均可配置,可以配置...