文档章节

extjs 通用搜索框

jxlgzwh
 jxlgzwh
发布于 2015/01/21 09:20
字数 198
阅读 1764
收藏 2

先来张效果图:

采用triggerfield组件实现。

{
                            xtype: 'triggerfield',
                            onTrigger1Click: function() {
                                var me = this;
                                if (me.hasSearch) {
                                    me.setValue('');
                                    me.store.clearFilter();
                                    me.hasSearch = false;
                                    me.triggerCell.item(0).setDisplayed(false);
                                    me.updateLayout();
                                }
                            },
                            onTrigger2Click: function() {
                                var me = this,
                                    value = me.getValue();


                                if (value.length > 0) {
                                    me.store.clearFilter();
                                    me.store.filter({
                                        filterFn: function(item) {
                                            return item.get('postQualityName').indexOf(value) >= 0;
                                        }
                                    });
                                    me.hasSearch = true;
                                    me.triggerCell.item(0).setDisplayed(true);
                                    me.updateLayout();
                                }
                            },
                            trigger1Cls: 'x-form-clear-trigger',
                            trigger2Cls: 'x-form-search-trigger',
                            store: 'Person4Select',
                            paramName: 'query',
                            hasSearch: 'false',
                            width: 250,
                            fieldLabel: '指标名称',
                            labelAlign: 'right',
                            labelWidth: 55,
                            selectOnFocus: true,
                            listeners: {
                                afterrender: {
                                    fn: me.onTriggerfieldAfterRender1111,
                                    scope: me
                                },
                                specialkey: {
                                    fn: me.onTriggerfieldSpecialkey1111,
                                    scope: me
                                }
                            }
                        }

onTriggerfieldAfterRender1111 和 onTriggerfieldSpecialkey1111

onTriggerfieldAfterRender1111: function(component, eOpts) {
        var me = component;
        me.triggerCell.item(0).setDisplayed(false);
        me.store = me.ownerCt.ownerCt.down('#postQuality4PostQuality').getStore();
        if(typeof(me.store.isStore) == 'undefined') {
            me.store = Ext.getStore(me.store);
        }
        me.store.remoteFilter = false;


        if (!me.store.proxy.hasOwnProperty('filterParam')) {
            me.store.proxy.filterParam = me.paramName;
        }
        me.store.proxy.encodeFilters = function(filters) {
            return filters[0].value;
        };
    },


    onTriggerfieldSpecialkey1111: function(field, e, eOpts) {
        if (e.getKey() == e.ENTER) {
            field.onTrigger2Click();
        }
    }

原文请移步:争一代雄风 » extjs 通用搜索框

本博客文章除特别声明,全部都是原创!
转载请注明: 转载自“争一代雄风” (www.wenhaozhong.com)

© 著作权归作者所有

jxlgzwh
粉丝 55
博文 300
码字总数 125628
作品 1
深圳
程序员
私信 提问
JQuery EasyUi之界面设计——前言与界面效果(一)

如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”。 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI。为啥我会选择JQuery EasyUI呢?主...

易水寒丶开源
2015/10/27
0
0
ExtJS开发环境的搭建,spket工具安装详解

集成:ExtJS,MyEcplise和Spket。 前提:安装好的myecplise(我用的是MyEcplise10) 步骤: 先安装Spket 1 下载Spket的jar文件,spket-1.6.18.jar 2 将jar文件解压到MyEcplise的dropins文件夹...

day戴
2014/09/04
0
0
Sencha ExtJS 5.1.4 发布,跨浏览器的 RIA 框架

Sencha ExtJS 5.1.4 发布,此版本主要是bug修复。 更新内容: Accessibility (1) EXTJS-20016 - ARIA 包可以通过键盘导航调用组合框上的异常 Bind (1) EXTJS-21266 - 具有否定的双向绑定应标...

genn
2017/02/23
1K
15
Ext JS 6.0.0 正式版本发布,跨浏览器的 RIA 框架

Ext JS 6.0.0 正式版本发布,此版本包括大量的新特性以及错误修复: 新特性: Accessibility (3) EXTJS-12098 Containers should track their children’s focus EXTJS-13606 Floating mixi...

chpinck
2015/07/06
8.6K
49
Extjs GridPanel用法详解

创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义ModelExt.define("MyApp.model.User", { }); 然后创建Store: //...

鱼煎
2017/11/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue预渲染

prerender-spa-plugin 安装prerender-spa-plugin (插件使用见npm官网)[https://www.npmjs.com/package/prerender-spa-plugin] npm install prerender-spa-plugin --save-dev 配置prerender-s......

莫西摩西
35分钟前
0
0
Command模式

https://www.cnblogs.com/devinzhang/archive/2012/01/06/2315235.html

南桥北木
今天
1
0
由于PostgreSQL9.x二进制输出格式默认值改变导致的读取图片错误

今天从社区邮件看到一个这样的问题,感觉很有意思,在这分享给大家~具体如下: 问题现象: 作者有一个很老的Java应用,当时后端采用的PostgreSQL数据库版本为8.x,该系统除了正常的数据增删...

闻术苑
今天
2
0
导入sql时出现Invalid default value for 'create_time'报错处理方法

当运行SQL会出现:[Err] 1067 - Invalid default value for 'create_time',是因为Mysql版本不同,如果版本不 < 5.6请去的话报错的处理方法如下: 方法 :alter table table_name modify cre......

writeademo
今天
1
0
对ssm(spring,springmvc,mybatis)的了解总结

ssm框架现在是java web开发的三个主流框架 ,其实严格来算只算是两个框架,因为springmvc属于spring框架 ,是spring的一个mvc子框架 那么我们下面就来了解一下三大框架把 一 .Spring spring...

咸鱼-李y
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部