第12讲SenchaTouch的表单组件.pptVIP

隐藏的PPT 最后来介绍一下工具栏 08.js 08.html HTML5移动Web开发 广州大学华软软件学院 HTML5移动Web开发 第*页 思考：如果页面不能看到完整的内容，怎么办？ 应该查询资料，例如百度 关键字应该是什么? Ext.form.Panel 滚动条 在程序的地12行 添加 scrollable:vertical, autoScroll:true, 相当于创建了一个类和对象 第12讲 Sencha Touch的表单组件 请到 240FTP .../ HTML5移动Web开发 下载第12讲文件夹 主要内容 很多App都需要使用forms来获取用户的输入。 ST的forms是封装了html5的forms，并且添加了一下验证和提交数据功能。 Form Panel 提供一组form fields 和很便利的方式去加载和保存数据。使用一个form panle 包含了一组你需要展示的fields。 表单中的数据还可以从数据库中直接读取，我们介绍使用数据仓库加载数据的方法。 最后是工具栏的使用方法。 例1 见 01.html 01.js 应用样式。 xtype 配置选项 fieldset xtype 配置选项 textfield 把第38行注释掉 再次运行程序？ 代码第15行 代码第32行 大家动手，在例1中代码43行，添加监听事件 例 03.html 03.js 04.js 04.html 主要form组件，打开代码。 04.js 04.js 04.js 04.js 04.js 05.js 05.html 主要form组件，打开代码。 05.js 05.js 05.js 表单元素介绍完了 接下来介绍数据的加载方式 使用数据仓库加载数据 06.js 06.html 这个界面看起来和例5是差不多的，不同在于？ 打开代码，06.js , 第76行 打开代码，06.js , 第16行开始 Sencha Touch数据仓库 Sencha Touch数据仓库Ext.data.Store Store类似于一个本地仓库(即数据存储器), 包括有 ArrayStore,DirectStore,GroupingStore, JsonStore,XmlStore(都是store的子类)，最终主要用于提供给视图组件去显示. Store由Proxy（数据源）和DataReader（解读数据）组成。 Sencha Touch数据阅读器 Sencha touch使用阅读器解析需要被装载到数据模型或数据仓库中的数据，阅读器的类型分为以下几种类型： 1、ArrayReader：当数据为一个数组时，根据该数据创建一个模型对象所构成的数组，该模型对象数组的每一项中装载一行数据。 2、JsonReader：阅读来自服务器端的JSON格式的数据。 3、XmlReader：用来阅读来自服务器端的XML格式的数据。 一定要定义record 在后面几页定义store过程中，实际操作体会一下JsonReader读取JSON格式的数据和XmlReader读取XML格式的数据。 HTML5移动Web开发 广州大学华软软件学院 HTML5移动Web开发 第*页 思考：如果页面不能看到完整的内容，怎么办？ 应该查询资料，例如百度 关键字应该是什么? Ext.form.Panel 滚动条 在程序的地12行 添加 scrollable:vertical, autoScroll:true, 相当于创建了一个类和对象