ExtFrame里对数据的新增功能编程

本章介绍ExtFrame是如何编写数据的CRUD功能里的新增项的，本章以角色为例

首先，新增项一般是个弹出的对话框界面，采用Ext.Window套Ext.FormPanel界面

显示出新增的界面的代码一般是在该类数据的查询页面里（按钮条上有新增和查询两个选项）

对角色查询里的按钮条一般做如下封装：

  <CommandList name="rolepanel" moniker="Role" description="角色查询">
    <Command label="添加" image="icon-add" command="window_add_role.show();" />
    <Command label="查询" image="icon-search" command="rolegrid.read();"/>
  </CommandList>

点击添加按钮时，直接调用对应的窗口的显示方法（查询页面的写法见查询章）

对新的功能的页面，通常只需要拷贝一段其他类似页面的配置，然后修改下参数就可以

角色的查询页面对上面的按钮配置显示如下：

 

点击添加按钮，弹出window_add_role这个定义为添加角色的窗口

这个窗口包括两部分，按钮条和输入内容

按钮条同样是配置，可以拷贝类似的配置模块后修改参数如下：

  <CommandList name="addrole" moniker="Role" description="保存角色数据">
    <Command label="保存" image="icon-save" command="FormHandler.doAdd(window_add_role);"  />
    <Command label="关闭" image="icon-close" command="window_add_role.hide();" />
  </CommandList>

 

一个关闭按钮，直接调用对应的窗口的隐藏命令（此窗口设置隐藏时会重置数据）

而保存按钮执行时，则是将此窗口做为参数传递给FormHandler的执行保存的方法

如此之下，编程人员基本无需为角色的新增页面编写代码，最主要的工作是编写输入内容区域，这是个比较繁琐的工作，因为没有界面设计器

看到有人在研究把Ext的控件转为标签方式，也就是说，不用写new Ext.TextField这样创建控件或{xtype:field}这样提供配置，而是象HTML标签一样编写代码，很可惜，这种方式并不符合我这个框架的设计思路，框架也无法提供支持（因为框架里几乎没有HTML代码）

角色的页面还比较简单，Items的配置是这样的，如果复杂点的，数据比较多的，还要写FieldSet分隔，或者使用Column模式分列，代码会比较长

        items: [
        {
            xtype: 'hidden',
            id: 'window_add_role_flag'
        }, {
            fieldLabel: '角色代码',
            name: 'Role.ID',
            allowBlank: false,
            maxLength: 30,
            blankText: '角色代码不能为空'
        }, {
            fieldLabel: '角色名称',
            name: 'Role.Name',
            allowBlank: false,
            maxLength: 30,
            blankText: '角色名称不能为空'
        }, {
            fieldLabel: '角色描述',
            name: 'Role.Description',
            allowBlank: true,
            maxLength: 100
        }],

提供了一个隐藏字段flag来做为form的标签（FormHandler通过这个字段查找到对应的FormPanel）
完成这个Form需要做一件事：在这个Form显示时为它创建按钮条上的按钮

    listeners: {
        show: function() {
            if (!this.ready) {
                CommonButtonBuilder.buildToolbar(addrolebar, 'addrole');
                this.ready = true;
            }
        }
    }

创建按钮条有几种模式：渲染时即创建，第一次显示时创建，每次显示时均重新创建

考虑到效率问题，一般不采用渲染时创建（否则会在系统初始化时制造太多额外Ajax操作），创建后保持不变的页面一般采用第一次显示时创建模式，每次显示可能根据需要显示不同的按钮的页面采用显示时重新创建模式

 

新增页面基本到这里前台的功能就做完了，做到这里，发现有个问题：新增功能经常有以下几种典型需求：

1、成功后需要关闭新增窗口，这个是由FormHandler.doAdd功能自动实现了

2、成功后需要刷新查询页面，这个是由FormHandler.doAdd里配置的回调函数实现，这时可以提供回调方法给这个函数

<Command label="保存" image="icon-save" command="FormHandler.doAdd(window_add_role, 'rolegrid.read();');"/>

doAdd里提供了额外的两个参数：成功的回调方法与失败的回调方法，通常我们只写成功的方法

回调函数这里用单引号括起来，在其它配置里有时会不使用单引号，而是直接写成rolegrid.read，不带括号与分号，原因是用单引号的是字符串，是使用Eval执行的，不带单引号的是方法，直接调用的，据说Eval效率差些（其实不差这点效率），主要原因是在不同的地方调用有时会因为this对象的作用范围导致封装的Grid里的方法执行出错，遇到这种时候就必须使用Eval来执行

3、成功后需要重置，继续填写下一条，这里配置成使用FormHandler.doContinueAdd方法就可以了

 

前台我们可以看到基本上没有什么代码了，主要是编写界面，后台呢？

参见核心设计模式之TemplateMethod，如果没有特殊逻辑，配置Role的DataHandler为默认对象就可以了，如果有的话，继承DataHandler重载对应的方法就可以了，无需编写Controller层与持久层或模型层（DataHandler是逻辑层）

ExtFrame里的Role其实是使用了专用的DataHandler的，不过并未重载保存方法，而是重载了删除方法，目的是在角色被删除时引发一个系统事件，所以对新增功能，后台其实不用写任何代码

也就是说，整个Role的新增功能编程中，唯一的工作量就是编写数据Form，其它的都是配置----可以通过拷贝其他的节来修改参数很快实现

转载于:https://www.cnblogs.com/zuxOK/archive/2012/05/15/2500988.html