SenchaTouch的表单组课件

1、HTML5移动移动Web开发开发SenchaTouch的表单组的表单组第第12讲讲 Sencha Touch的表单组件的表单组件请到请到 240FTP ./ HTML5移动移动Web开发开发下载下载第第12讲文件夹讲文件夹HTML5移动移动Web开发开发第第2页页SenchaTouch的表单组主要内容主要内容很多很多App都需要使用都需要使用forms来获取用户的输入。来获取用户的输入。ST的的forms是封装了是封装了html5的的forms，并且添加了一下，并且添加了一下验证和提交数据功能。验证和提交数据功能。Form Panel 提供一组提供一组form fields 和很便利的方式去和

2、很便利的方式去加载和保存数据。使用一个加载和保存数据。使用一个form panle 包含了一组你包含了一组你需要展示的需要展示的fields。表单中的数据还可以从数据库中直接读取，我们介绍表单中的数据还可以从数据库中直接读取，我们介绍使用数据仓库加载数据的方法。使用数据仓库加载数据的方法。最后是工具栏的使用方法。最后是工具栏的使用方法。HTML5移动移动Web开发开发第第3页页SenchaTouch的表单组例例1 见见 01.html 01.js HTML5移动移动Web开发开发第第4页页SenchaTouch的表单组HTML5移动移动Web开发开发第第5页页SenchaTouch的表单组HT

3、ML5移动移动Web开发开发第第6页页SenchaTouch的表单组代码第代码第15行行HTML5移动移动Web开发开发第第7页页SenchaTouch的表单组代码第代码第32行行HTML5移动移动Web开发开发第第8页页SenchaTouch的表单组大家动手，在例大家动手，在例1中中代码代码43行，添加监听事件行，添加监听事件HTML5移动移动Web开发开发第第9页页SenchaTouch的表单组例例 03.html 03.jsHTML5移动移动Web开发开发第第10页页SenchaTouch的表单组HTML5移动移动Web开发开发第第11页页SenchaTouch的表单组04.js 04.

4、html 主要主要form组件，打开代码。组件，打开代码。HTML5移动移动Web开发开发第第12页页SenchaTouch的表单组04.jsHTML5移动移动Web开发开发第第13页页SenchaTouch的表单组04.jsHTML5移动移动Web开发开发第第14页页SenchaTouch的表单组04.jsHTML5移动移动Web开发开发第第15页页SenchaTouch的表单组HTML5移动移动Web开发开发第第16页页SenchaTouch的表单组04.jsHTML5移动移动Web开发开发第第17页页SenchaTouch的表单组04.jsHTML5移动移动Web开发开发第第18页页Se

5、nchaTouch的表单组05.js 05.html 主要主要form组件，打开代码。组件，打开代码。HTML5移动移动Web开发开发第第19页页SenchaTouch的表单组05.jsHTML5移动移动Web开发开发第第20页页SenchaTouch的表单组05.jsHTML5移动移动Web开发开发第第21页页SenchaTouch的表单组05.jsHTML5移动移动Web开发开发第第22页页SenchaTouch的表单组 表单元素介绍完了表单元素介绍完了 接下来介绍数据的加载方式接下来介绍数据的加载方式 使用数据仓库加载数据使用数据仓库加载数据HTML5移动移动Web开发开发第第23页页S

6、enchaTouch的表单组06.js 06.html 这个界面看起来和例这个界面看起来和例5是差不多的，不同在于？是差不多的，不同在于？HTML5移动移动Web开发开发第第24页页SenchaTouch的表单组打开代码，打开代码，06.js , 第第76行行HTML5移动移动Web开发开发第第25页页SenchaTouch的表单组打开代码，打开代码，06.js , 第第16行开始行开始HTML5移动移动Web开发开发第第26页页SenchaTouch的表单组HTML5移动移动Web开发开发第第27页页SenchaTouch的表单组Sencha Touch数据仓库数据仓库 Sencha Tou

7、ch数据仓库数据仓库Ext.data.Store Store类似于一个本地仓库类似于一个本地仓库(即数据存储器即数据存储器), 包括有包括有 ArrayStore,DirectStore,GroupingStore, JsonStore,XmlStore(都是都是store的子类的子类)，最终主要用，最终主要用于提供给视图组件去显示于提供给视图组件去显示. Store由由Proxy（数据源）和（数据源）和DataReader（解读数据）（解读数据）组成。组成。HTML5移动移动Web开发开发第第28页页SenchaTouch的表单组Sencha Touch数据阅读器数据阅读器 Sencha t

8、ouch使用阅读器解析需要被装载到数据模型或使用阅读器解析需要被装载到数据模型或数据仓库中的数据，阅读器的类型分为以下几种类型：数据仓库中的数据，阅读器的类型分为以下几种类型： 1、ArrayReader：当数据为一个数组时，根据该数据创建：当数据为一个数组时，根据该数据创建一个模型对象所构成的数组，该模型对象数组的每一项中装一个模型对象所构成的数组，该模型对象数组的每一项中装载一行数据。载一行数据。 2、JsonReader：阅读来自服务器端的：阅读来自服务器端的JSON格式的数据。格式的数据。 3、XmlReader：用来阅读来自服务器端的：用来阅读来自服务器端的XML格式的数据。格式的数

9、据。 一定要定义一定要定义record 在后面几页定义在后面几页定义store过程中，实际操作过程中，实际操作体会一下体会一下JsonReader读取读取JSON格式的数据和格式的数据和XmlReader读取读取XML格式的数据。格式的数据。HTML5移动移动Web开发开发第第29页页SenchaTouch的表单组隐藏的隐藏的PPTHTML5移动移动Web开发开发第第30页页SenchaTouch的表单组HTML5移动移动Web开发开发第第31页页SenchaTouch的表单组HTML5移动移动Web开发开发第第32页页SenchaTouch的表单组HTML5移动移动Web开发开发第第33页页

10、SenchaTouch的表单组HTML5移动移动Web开发开发第第34页页SenchaTouch的表单组HTML5移动移动Web开发开发第第35页页SenchaTouch的表单组最后来介绍一下工具栏最后来介绍一下工具栏HTML5移动移动Web开发开发第第36页页SenchaTouch的表单组HTML5移动移动Web开发开发第第37页页SenchaTouch的表单组08.js 08.htmlHTML5移动移动Web开发开发第第38页页SenchaTouch的表单组HTML5移动移动Web开发开发第第39页页SenchaTouch的表单组HTML5移动移动Web开发开发第第40页页SenchaTo

11、uch的表单组09.jsHTML5移动移动Web开发开发第第41页页SenchaTouch的表单组 修改代码修改代码09.js 第第10行行 allowMultiple: false, 查看网页情况。查看网页情况。HTML5移动移动Web开发开发第第42页页SenchaTouch的表单组HTML5移动移动Web开发开发第第43页页SenchaTouch的表单组10.js 10.htmlHTML5移动移动Web开发开发第第44页页SenchaTouch的表单组HTML5移动移动Web开发开发第第45页页SenchaTouch的表单组11.js 11.htmlHTML5移动移动Web开发开发第第46页页SenchaTouch的表单组HTML5移动移动Web开发开发第第47页页SenchaTouch的表单组12.htmlHTML5移动移动Web开发开发第第48页页SenchaTouch的表单组12.jsHTML5移动移动Web开发开发第第49页页SenchaTouch的表单组标题条组件标题条组件 标题条组件与工具栏条类似，不同点在于：标题条组件与工具栏条类似，不同点在于：标题条的标题始终在标题条的中间标题条的标题始终在标题条的中间标题条中一般不使用布局、间距等格式标题条中一般不使用布局、间距等格式1. 在不指定子组件的在不指定子组件的xtype时，标题条中的子组时，标题条中的子组件