CH08 一个完整的Ext应用

– form.getForm().loadRecord(record);
• record通过以下方法得到： 通过以下方法得到： 通过以下方法得到
– var record = grid.getSelectionModel().getSelected()
• 将第一个按钮的文字修改为“修改” 将第一个按钮的文字修改为“修改”
• 如果 如果id==‘’，说明没有选中学员 ， • 以Ajax方式发起异步请求： 方式发起异步请求： 方式发起异步请求
– Ext.Ajax.request()
• request()的三个属性： 的三个属性： 的三个属性
– url：后台处理程序，Process/Del.aspx – success：成功的回调函数 – failure：失败的回调函数
• 创建分页存储过程
– pagedData(int recordIndex,int pageSize,int recordCount output)
• 创建实体类 • 创建数据访问类 • 创建业务逻辑类
SSOFT V2.0
在页面中显示学员信息列表
• 创建一个呈现性别的渲染函数
– function genderRenderer(value)
SSOFT V2.0
对学员信息进行数据建模
• • 创建数据库StudentMIS 创建数据库 创建数据表Student 创建数据表
– – – – – – – 学号：int 姓名：nvarchar(50) 性别：bit 年龄：int 籍贯：nvarchar(50) 专业：nvarchar(50) 政治面貌：nvarchar(50)
• 创建实体类
– Ext.data.Record.create()
• 创建GridPanel的表结构 创建GridPanel的表结构
– Ext.grid.ColumnModel()
• 创建存储对象
– Ext.data.Store
• proxy:new Ext.data.HttpProxy({url:Process/GetList.aspx}) • reader:new Ext.data.JsonReader({},record)
– form.getForm().submit()
• submit()的三个参数 的三个参数
– url：后台的处理程序，Process/Save.aspx – success：成功的回调函数
• grid.getStore().reload()：重新加载数据 • form.getForm().reset()：重置表单
SSOFT V2.0
删除指定的学员信息
• 为[删除 按钮的 删除]按钮的 删除 按钮的handler指定一个匿名处理函数 指定一个匿名处理函数 • 获取隐藏域的学员学号： 获取隐藏域的学员学号：
– var id = form.getForm().findField(‘id’).getValue()
SSOFT V2.0
在表格和表单之间进行数据交互
• 点击左侧的表格，同步更新右侧表单中的数据 点击左侧的表格， • 需要为表格添加一个事件监听函数： 需要为表格添加一个事件监听函数：
– grid.on(‘rowclick’,function(grid,rowIndex,event){})
• 将表格中选中的记录加载到表单中： 将表格中选中的记录加载到表单中：
– failure：失败的回调函数
• Ext.Msg.alert(‘系统提示’,’操作失败’)
SSOFT V2.0
清空表单信息
• 为[清空 按钮的 清空]按钮的 清空 按钮的handler指定一个匿名处理 指定一个匿名处理 函数 • form.getForm().reset()：重置表单 ： • 重置表单时，隐藏域的值也被清空了 重置表单时， • form.buttons[0].setText(‘添加’)：把表 添加’ 添加 ： 单中第一个命令按钮的文字修改为“添加” 单中第一个命令按钮的文字修改为“添加”

SSOFT V2.0
SSOFT V2.0
为表单添加提交事件
• 为[添加 按钮的 添加]按钮的 添加 按钮的handler指定一个匿名处理函数 指定一个匿名处理函数 • 判断所有的表单域是否都通过了有效性校验： 判断所有的表单域是否都通过了有效性校验：
– if(form.getForm().isValid())
• 调用表单的提交方法： 调用表单的提交方法：
SSOFT V2.0
确定整体布局
• • • • • • • • • • Ext中的页面布局方式 中的页面布局方式 用于布局的类Ext.Viewport 用于布局的类 BorderLayout FitLayout AccordionLayout CardLayout FormLayout ColumnLayout TableLayout AbsoluteLayout
SSOFT V2.0
使用HTML和CSS设置静态信息
• 用于显示公司 用于显示公司Logo和版权信息的文字是静态的 和版权信息的文字是静态的 • 在Ext.Panel中添加静态信息的两种方式： 中添加静态信息的两种方式： 中添加静态信息的两种方式 – HTML参数：直接在javascript脚本中写静态 信息的内容 – contentEl参数：它引用页面中某一个div的 id，在显示Panel时将这个div中的内容显示 在对应的布局域中
• 创建 创建GridPanel表格 表格
– var grid = new Ext.grid.GridPanel({…})
SSOFT V2.0
添加表单编辑学员信息
• 创建一个表单
– Ext.form.FormPanel
• • • • • • • • •
共７个表单域 学号对应一个Ext.form.Hidden 学号对应一个 姓名对应一个Ext.form.TextField 姓名对应一个 年龄对应一个Ext.form.NumberField 年龄对应一个 性别对应一个boBox 性别对应一个 政治面貌对应一个boBox 政治面貌对应一个 籍贯对应一个Ext.form.TextField 籍贯对应一个 所属系对应一个boBox 所属系对应一个 三个按钮： 添加 添加]、 清空 清空]、 删除 删除] 三个按钮：[添加 、[清空 、[删除
– form.buttons[0].setText(“修改”)
SSOFT V2.0
小结
• • • • • • • 本讲演示了如何实现一个学员管理信息系统 如何使用访问数据库 如何使用 访问数据库 数据访问层中增、 数据访问层中增、删、改、查等实现方式 如何使用Ext与后台进行交互 如何使用 与后台进行交互 如何对数据库信息进行分页显示 如何在Ext中对数据进行增、删、改、查等操作 中对数据进行增、 如何在 中对数据进行增 如何在Ext的表格和表单中进行数据交互等内容 如何在 的表格和表单中进行数据交互等内容
第八章
一个完整的Ext应用
本讲内容
• • • • • • • • • 确定整体布局 使用HTML和CSS设置静态信息 使用 和 设置静态信息 对学员信息进行数据建模 在页面中显示学员信息列表 添加表单以编辑学员信息 为表单添加提交事件 清空表单信息 删除指定的学员信息 在表格和表单之间进行数据交互