ExtFrame里的数据修改编程
参考数据新增编程,修改编程也同样的简单,重点仍然是在修改界面的控件排布上
新增角色界面的窗口为window_add_role,修改角色界面的窗口命名为window_edit_role
和window_add_role不同的是,window_edit_role在显示后需要加载指定ID的角色的数据,所以不能直接调用show方法
打开window_edit_role的方法是调用封装的方法,即显示了窗口,又调用了窗口的FormPanel的load方法加载数据,还需要传入角色的ID作为参数
编辑按钮的Command封装是这样的
<Command label="编辑" image="icon-edit" command="FormHandler.showData(window_edit_role, '{id}');" />
对于编辑数据,传统的进入方法有以下几种:
1、在数据的查看信息页面点编辑按钮
2、在列表页面,选中一行数据(通常使用选中模式或radiobutton),然后点工具栏上的编辑按钮
3、在列表页面,每行数据后面跟一个编辑按钮
C/S模式较多采用前面两种,B/S模式采用第3种比较合适
ExtFrame里对Grid的封装支持了第3种模式,把Command封装到操作列(参见Grid相关章节),这样,支持在行上对每行数据进行编辑、删除操作以及其它业务封装
在弹出的编辑窗口里,同样需要加载工具条上的按钮
编辑窗口的工具条是这样配置的:
<CommandList name="editrole" moniker="Role" description="保存角色数据"> <Command label="保存" image="icon-save" command="FormHandler.doUpdate(window_edit_role);" /> <Command label="关闭" image="icon-close" command="window_edit_role.hide();" /> </CommandList>
一般编辑窗口的控件配置基本和添加页面相同,除了有部分字段可能不允许修改,有部分字段不允许显示
角色编辑的控件项是这样的:
items: [ { xtype: 'hidden', id: 'window_edit_role_flag' }, { fieldLabel: '角色代码', name: 'Role.ID', maxLength: 30, disabled: true }, { fieldLabel: '角色名称', name: 'Role.Name', allowBlank: false, maxLength: 30, blankText: '角色名称不能为空' }, { fieldLabel: '角色描述', name: 'Role.Description', allowBlank: true, maxLength: 100 }],
flag的id和新增对话框不一样(这个flag id必须是唯一的),角色代码禁止编辑
和新增功能一样,修改对话框需要在第一次显示页面时创建操作
listeners: { show: function() { if (!this.ready) { CommonButtonBuilder.buildToolbar(editrolebar, 'editrole'); this.ready = true; } },
角色的查询页面显示是这样的:
点击某一行的编辑按钮后显示时这样的:
点击保存后保存数据并关闭
和新增功能同样发现有个问题,保存后查询结果未刷新,可以通过在配置的doUpdate方法里增加成功后的回调函数解决
<Command label="保存" image="icon-save" command="FormHandler.doUpdate(window_edit_role, 'rolegrid.read();');" />
和新增功能一样,如果后台保存没有特殊逻辑,可以使用默认的DataHandler的保存功能,无需再编写服务器端代码