1.DataView组件可以显示列表图像等等的组件或者元素,特别适用于数据仓库频繁更新的情况。比如像显示新闻或者微博等等的很多相同样式的组件的列表这种一次性从后台或者数据源拿取很多数据展示的样式。比如官网给的简单的示例:

var touchTeam = Ext.create('Ext.DataView',{
    fullscreen: true,store: {
        fields: ['name','age'],data: [
            {name: 'Jamie',age: 100},{name: 'Rob',age: 21},{name: 'Tommy',age: 24},{name: 'Jacky',{name: 'Ed',age: 26}
        ]
    },itemTpl: '<div>{name} is {age} years old</div>'
});
DataView组件是和 Store组件紧密联系在一起的。当Data组件中的数据发生变化时,也会迅速的反应在DataView的组件上面。
2.Ext.data.Model是 M层,也就是数据层。 在想要被展示在UI上面时,它应该被Store组件所使用。官网给的示例代码:
Ext.define('User',{    //定义一个model
    extend: 'Ext.data.Model',config: {
        fields: [ //fields代表model的所有实例所遵循的模式
            {name: 'name',type: 'string'},{name: 'age',type: 'int'},{name: 'phone',{name: 'alive',type: 'boolean',defaultValue: true}
        ]
    },changeName: function() {
        var oldName = this.get('name'),newName = oldName + " The Barbarian";

        this.set('name',newName);
    }
});
3.Ext.data.Store, Store通过Proxy来获取加载数据,可以用来将数据展示在Ui上, 直观点讲store就是用model的数据组织模式通过proxy来加载数据,最后展示在UI里面。所以在 创建一个store的时候只需要告诉它所需要的model模型和加载时候通过的proxy即可。再通俗一点讲。model是数据组织方式,store是存数据的,而list的创建需要数据store和样式tpl。还是看官网给的示例代码:
// Set up a model to use in our Store
Ext.define("User",{
    extend: "Ext.data.Model",config: {
        fields: [
            {name: "firstName",type: "string"},{name: "lastName",{name: "age",type: "int"},{name: "eyeColor",type: "string"}
        ]
    }
});

var myStore = Ext.create("Ext.data.Store",{
    model: "User",//指定引用所需的model
    pageSize:7,//pageSize的作用并不是指在list中每次显示多少条数据,而是告诉后台你每次要显示多少条数据,应该要和后台相结合的时候才会显示出效果来
    proxy: {              //指定proxy
        type: "ajax",//AJAX从指定的路径加载数据
        url : "/users.json",reader: {
            type: "json",rootProperty: "users"
        }
    },autoLoad: true
});

Ext.create("Ext.List",store: myStore,itemTpl: "{lastName},{firstName} ({age})"
});

4.绑定store的方法有两种,一种是通过组件的配置选项进行绑定,比如list等等;另外一种是使用setStore的方法进行绑定,这个方式在给已有的组件增添或者修改store的时候用的多。例如:

var list = Ext.getCmp('myList');
list.setStore(store);
使用setStore的方法进行store的绑定。
5.store的find方法:

find方法会返回第一次匹配项的下标,若想获得数据,需要调用getAt(index)的方法去获得,而且find方法是从前至后进行匹配的,也就是前缀匹配,findExact则是精确匹配:

var index = store.find('firstName','Dave');
console.log(index); //Dave第一次出现是在第5条记录,下标为4,输出4。
var record = store.getAt(index);
console.log(record); //输出的是一条Dave的那条record。
findBy适用于比较复杂的匹配条件,可以加入一条匹配条件的函数:
var index = store.findBy(function(record){
return record.get('firstName') == 'Dave' && record.get('lastName') == 'Kaneda';
});
console.log(index);//Dave Kaneda第一次出现是在第14条记录,下标为13,输出13。
通过自定义的方法来设定判断条件。

sencha touch笔记5——DataView组件1的更多相关文章

  1. canvas中普通动效与粒子动效的实现代码示例

    canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。本文详细的介绍了粒子特效,和普通动效进行对比,非常具有实用价值,需要的朋友可以参考下

  2. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. canvas学习和滤镜实现代码

    这篇文章主要介绍了canvas学习和滤镜实现代码,利用 canvas,前端人员可以很轻松地、进行图像处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. localStorage的过期时间设置的方法详解

    这篇文章主要介绍了localStorage的过期时间设置的方法详解的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. 详解HTML5 data-* 自定义属性

    这篇文章主要介绍了详解HTML5 data-* 自定义属性的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  6. HTML5的postMessage的使用手册

    HTML5提出了一个新的用来跨域传值的方法,即postMessage,这篇文章主要介绍了HTML5的postMessage的使用手册的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. 教你使用Canvas处理图片的方法

    本篇文章主要介绍了教你使用Canvas处理图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. ios – Swift语言:如何调用SecRandomCopyBytes

    从Objective-C,我可以这样做:在Swift中尝试这个时,我有以下内容:但我得到这个编译器错误:data.mutableBytes参数被拒绝,因为类型不匹配,但我无法弄清楚如何强制参数.解决方法这似乎有效:

  9. ios – OpenCV构建问题,找不到ext/atomicity.h

    我得到编译器错误抱怨在构建包含OpenCV的项目时.环境是针对iOS的Xcode4.5.它为模拟器编译良好,但在为设备构建时失败.这是错误文本:我正在使用opencv2.framework,使用指令here构建cmake.解决方法默认情况下,XCode4.5使用libc(支持C11的LLVMC标准库)生成要构建的新项目.但OpenCV期望针对GNUlibstd

  10. 使用Firebase iOS Swift将特定设备的通知推送到特定设备

    我非常感谢PushNotifications的帮助.我的应用聊天,用户可以直接向对方发送短信.但是如果没有PushNotifications,它就没有多大意义.它全部设置在Firebase上.如何将推送通知从特定设备发送到特定设备?

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部