SenchaTouch的表单组.ppt

第12讲SenchaTouch的表单组件 请到240FTP HTML5移动Web开发下载第12讲文件夹 主要内容 很多App都需要使用forms来获取用户的输入 ST的forms是封装了html5的forms 并且添加了一下验证和提交数据功能 FormPanel提供一组formfields和很便利的方式去加载和保存数据 使用一个formpanle包含了一组你需要展示的fields 表单中的数据还可以从数据库中直接读取 我们介绍使用数据仓库加载数据的方法 最后是工具栏的使用方法 例1见01 html01 js 应用样式 xtype配置选项fieldset xtype配置选项textfield 把第38行注释掉再次运行程序 代码第15行 代码第32行 大家动手 在例1中代码43行 添加监听事件 例03 html03 js 04 js04 html 主要form组件 打开代码 04 js 04 js 04 js 04 js 04 js 05 js05 html 主要form组件 打开代码 05 js 05 js 05 js 表单元素介绍完了接下来介绍数据的加载方式使用数据仓库加载数据 06 js06 html 这个界面看起来和例5是差不多的 不同在于 打开代码 06 js 第76行 打开代码 06 js 第16行开始 SenchaTouch数据仓库 SenchaTouch数据仓库Ext data StoreStore类似于一个本地仓库 即数据存储器 包括有ArrayStore DirectStore GroupingStore JsonStore XmlStore 都是store的子类 最终主要用于提供给视图组件去显示 Store由Proxy 数据源 和DataReader 解读数据 组成 SenchaTouch数据阅读器 Senchatouch使用阅读器解析需要被装载到数据模型或数据仓库中的数据 阅读器的类型分为以下几种类型 1 ArrayReader 当数据为一个数组时 根据该数据创建一个模型对象所构成的数组 该模型对象数组的每一项中装载一行数据 2 JsonReader 阅读来自服务器端的JSON格式的数据 3 XmlReader 用来阅读来自服务器端的XML格式的数据 一定要定义record在后面几页定义store过程中 实际操作体会一下JsonReader读取JSON格式的数据和XmlReader读取XML格式的数据 隐藏的PPT 最后来介绍一下工具栏 08 js08 html 09 js 修改代码09 js第10行allowMultiple false 查看网页情况 10 js10 html 11 js11 html 12 html 12 js 标题条组件 标题条组件与工具栏条类似 不同点在于 标题条的标题始终在标题条的中间标题条中一般不使用布局 间距等格式在不指定子组件的xtype时 标题条中的子组件默认为按钮 13 js13 html 自修 连接数据库 例 07 自修 连接数据库 下课了 对41页的解释