`
Mr.Joe
  • 浏览: 137262 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

sencha touch 使用searchfield控件卡顿现象

阅读更多
最近在sencha项目中做搜索功能时遇到卡顿现象,数据也不多就一百多条

以下是搜索代码

Controller:
onSearchKeyp: function(field) {
        //get the store and the value of the field
        var value = field.getValue(),
        store = Ext.getStore('Customers');

        //first clear any current filters on the store. If there is a new value, then suppress the refresh event
        store.clearFilter(!!value);

        //check if a value is set first, as if it isnt we dont have to do anything
        if (value) {
            //the user could have entered spaces, so we must split them so we can loop through them all
            var searches = value.split(','),
                regexps = [],
                i, regex;

            //loop them all
            for (i = 0; i < searches.length; i++) {
                //if it is nothing, continue
                if (!searches[i]) continue;

                regex = searches[i].trim();
                regex = regex.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

                //if found, create a new regular expression which is case insenstive
                regexps.push(new RegExp(regex.trim(), 'i'));
            }

            //now filter the store by passing a method
            //the passed method will be called for each record in the store
            store.filter(function(record) {
                var matched = [];

                //loop through each of the regular expressions
                for (i = 0; i < regexps.length; i++) {
                    var search = regexps[i];
                    var didMatch = search.test(record.get('customerName'));

                    //if it matched the first or last name, push it into the matches array
                    matched.push(didMatch);
                }

                return (regexps.length && matched.indexOf(true) !== -1);
            });
        }
    },


view:
关键在这里,经过反复查找发现是因为开始没有写infinite: true,所以会有卡顿现象
id : 'clientList',
			disableSelection: true,
			scrollable : 'vertical',
			xtype : 'list',
			store : "app0010000002Store",
			flex : 1,
			itemTpl : new Ext.XTemplate("<div><span>{customerName}</span></div>"),
			infinite: true,
分享到:
评论

相关推荐

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于深入理解和使用Sencha Touch进行开发具有极大的帮助。 首先,让我们详细了解一下Sencha Touch 2.2.1的核心特性: 1. **...

    Sencha 和 Sencha Touch 简介

    web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web 应用,它提供了丰富的华丽的控件和强大的功能,...

    Sencha Touch in Action

    《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍,它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是...

    sencha touch项目源码

    2. **模型(Model)与存储(Store)**:Sencha Touch使用MVC(Model-View-Controller)架构。模型用于定义数据结构和业务逻辑,而存储则负责管理数据,包括加载、保存和同步到服务器。 3. **视图(View)与控制器...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于...对于初学者来说,理解这一过程有助于更好地掌握Sencha Touch的架构和组件使用,从而进一步提升开发能力。

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...

    sencha touch list demo

    总结,"sencha touch list demo"展示了如何使用Sencha Touch的List组件和Store来构建一个动态的数据展示界面。通过理解和实践这个示例,开发者可以更好地掌握Sencha Touch中数据驱动UI的设计原则,以及如何创建交互...

    一个完整的sencha touch 应用案例

    但在生产环境中,为了优化性能,我们会使用按需加载的精简版(如sencha-touch.js)。 3. **app.js**:这是应用程序的核心文件,定义了应用程序的架构,包括模型(Models)、视图(Views)、控制器(Controllers)和...

    sencha touch中文翻译文档

    Sencha Touch是一款强大的JavaScript框架,专门...对于初学者来说,这是一个非常宝贵的资源,能够帮助他们快速上手并熟练掌握Sencha Touch 2的使用。对于有经验的开发者,中文版文档则能降低语言障碍,提高开发效率。

    sencha touch在VScode上的插件

    Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以...通过安装和使用这个插件,开发者可以在熟悉的VSCode环境中享受到专门为Sencha Touch优化的开发体验。

    sencha touch 2.4.0最新版

    通过解压并研究这些文件,开发者可以详细了解框架的结构,学习如何配置、使用和扩展Sencha Touch,以创建自己的移动应用。同时,这个版本的更新日志(如果有的话)通常会列出所有的新功能、改进和已知问题,是理解...

    Sencha Touch2环境搭建

    1. **获取Sencha Touch 2 源码** - 打开终端或命令提示符,使用Git克隆Sencha Touch 2的官方仓库: ``` git clone https://github.com/sencha/Sencha-Touch.git ``` 2. **创建新项目** - 使用Sencha CMD创建一个...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...

    api.zip_sencha _sencha touch api_sencha touch2 api

    标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

    sencha-touch-1.0.1a.zip_Sencha Touch _sencha touch api_touch

    5. **命令式编程**:Sencha Touch 使用基于Ext JS的命令式编程风格,通过配置对象来定义组件行为。 深入学习Sencha Touch 1.0.1a,你将掌握如何创建响应式的布局、实现动态数据加载、处理用户触摸事件等技能。同时...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

    Sencha Touch2 MVC Demo (含源码/数据库)

    Sencha Touch 2 支持使用LocalStorage、WebSQL或IndexedDB等本地存储方案,以保存离线数据。在源码中,可能包含用于与数据库交互的模型和控制器代码。 总的来说,"Sencha Touch2 MVC Demo"是一个学习和实践移动应用...

    sencha-touch + cordova(PhoneGap)使用adt-eclipse打包实例

    Sencha Touch 和 Cordova(PhoneGap)是两个在移动应用开发中广泛使用的框架。Sencha Touch 是一个专门用于创建触屏设备上的富交互应用的JavaScript库,提供了丰富的UI组件和强大的数据管理功能。Cordova(PhoneGap...

Global site tag (gtag.js) - Google Analytics