ux.form.field.SearchField 列表、树形菜单查询扩展
- //支持bind绑定store
- //列表搜索扩展,支持本地查询
- //支持树形菜单本地一级菜单查询
- Ext.define('ux.form.field.SearchField', {
- extend: 'Ext.form.field.Text',
- alias: 'widget.uxSearchfield',
- defaultBindProperty: 'store',
- mixins: ['Ext.util.StoreHolder'],
- triggers: {
- clear: {
- weight: 0,
- cls: Ext.baseCSSPrefix + 'form-clear-trigger',
- hidden: true,
- //清除搜索条件
- handler: 'clearValue',
- scope: 'this'
- },
- search: {
- weight: 1,
- cls: Ext.baseCSSPrefix + 'form-search-trigger',
- //查询
- handler: 'onSearchClick',
- scope: 'this'
- }
- },
- //查询参数
- paramName: 'query',
- //是否本地查询
- isLocal: false,
- initComponent: function () {
- var me = this,
- store = me.store;
- me.on({
- //添加监听,监听回车键
- specialkey: function (f, e) {
- if (e.getKey() == e.ENTER) {
- me.onSearchClick();
- }
- },
- //监听内容改变
- //在这里监听是为了实现多个搜索控件绑定同一个store时
- //界面能够同步
- change: function (t, value) {
- var clear = t.getTrigger('clear');
- //根据查询条件是否存在,显示隐藏小按钮
- if (value.length > 0) {
- if (clear.hidden) {
- clear.show();
- t.updateLayout();
- }
- } else {
- clear.hide();
- t.updateLayout();
- me.onClearClick();
- }
- }
- });
- //如果strong是string类型,寻找对应的store
- if (Ext.isString(store)) {
- store = me.store = Ext.data.StoreManager.lookup(store);
- }
- //动态绑定store
- me.bindStore(store || 'ext-empty-store', true);
- me.callParent(arguments);
- },
- //清除value
- clearValue: function () {
- this.setValue('');
- },
- //清除过滤
- onClearClick: function () {
- //console.log('清除过滤');
- var me = this,
- activeFilter = me.activeFilter;
- if (activeFilter) {
- me.store.getFilters().remove(activeFilter);
- me.activeFilter = null;
- } else {
- me.store.clearFilter(false);
- }
- },
- //本地过滤
- localFilter: function (value) {
- var store = this.store,
- paramName = this.paramName;
- //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
- //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) {
- //树形菜单只过滤第一层
- if (record.get('depth') > 1) {
- return true;
- }
- var matched = [];
- //loop through each of the regular expressions
- for (i = 0; i < regexps.length; i++) {
- var search = regexps[i],
- didMatch = search.test(record.get(paramName));
- //if it matched the first or last name, push it into the matches array
- matched.push(didMatch);
- }
- return (regexps.length && matched.indexOf(true) !== -1);
- });
- },
- //过滤
- onSearchClick: function () {
- var me = this,
- value = me.getValue(),
- store,
- proxy;
- if (value.length > 0) {
- //本地还是远程过滤
- if (!me.isLocal) {
- store = me.store;
- store.setRemoteFilter(true);
- // 设置代理,设置过滤参数
- proxy = store.getProxy();
- proxy.setFilterParam(me.paramName);
- proxy.encodeFilters = function (filters) {
- return filters[0].getValue();
- }
- // Param name is ignored here since we use custom encoding in the proxy.
- // id is used by the Store to replace any previous filter
- me.activeFilter = new Ext.util.Filter({
- property: me.paramName,
- value: value
- });
- me.store.getFilters().add(me.activeFilter);
- } else {
- me.localFilter(value);
- }
- }
- },
- onDestroy: function () {
- //清除过滤条件
- var me = this,
- store = me.store;
- if (store) {
- me.onClearClick();
- me.store = null;
- //移除绑定
- me.bindStore(null);
- }
- me.callParent();
- }
- });
简单示例
- Ext.define('类名', {
- extend: 'Ext.tree.Panel',
- title: '小区',
- rootVisible : false,
- store: '数据源,可bind绑定',
- header: {
- items: [{
- //本地查询
- isLocal:true,
- xtype: 'uxSearchfield',
- //
- store: '数据源,可bind绑定',
- //
- paramName: '查询字段',
- emptyText: '请输入关键词'
- }]
- }
- });
ux.form.field.SearchField 列表、树形菜单查询扩展的更多相关文章
- ux.form.field.KindEditor 所见所得编辑器
注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...
- ux.form.field.Verify 验证码控件
//验证码控件 Ext.define('ux.form.field.Verify', { extend: 'Ext.container.Container', alias: ['widget.fiel ...
- ux.form.field.TreePicker 扩展,修复火狐不能展开bug
/** * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes. * 动态 ...
- ux.form.field.Year 只能选年的时间扩展
效果如图,亲测6.2.1版本可用,用法同时间选择控件 //只选择年的控件 Ext.define('ux.picker.Year', { extend: 'Ext.Component', alias: ...
- ux.form.field.Month 只能选年、月的时间扩展
效果如图,亲测6.2.1版本可用,用法同时间选择控件 //月弹窗扩展 //只选月 Ext.define('ux.picker.Month', { extend: 'Ext.picker.Month', ...
- ux.form.field.Password 密码与非密码状态切换
效果如图: 扩展源码: //扩展 //密码按钮扩展 //支持在密码与非密码之间切换 Ext.define('ux.form.field.Password', { extend: 'Ext.form.f ...
- ux.form.field.GridDate 支持快速选择日期的日期控件
效果如图,亲测6.2.1版本可用 /** *支持快速选择日期的日期控件 */ Ext.define('ux.form.field.GridDate', { extend: 'Ext.form.fiel ...
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
- 如何快速开发树形列表和分页查询整合的WInform程序界面
我在做Winform界面的时候,一般都是统一化处理,界面顶部放置一些字段条件供查询,下面就是分页查询列表,展示相关的数据.但有时候碰到一些表字段内容分类比较多,有一些特别重要,如果放在一个树形列表来进 ...
随机推荐
- Twitter API升级至1.1
Twitter API 1.1是至今最大的一次升级,从3月份提出,到6月11日1.0版本已经全面停止调用.关于1.1版本升级特性可访问: https://dev.twitter.com/docs/ap ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- JavaScript 闯关记
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...
- centos安装firefox flash插件
centos下的firefox flash插件默认不是最新版的,安装过程如下: 将安装地址添加到repolist中 sudo yum -y install http://linuxdownload.a ...
- 修改Android签名证书keystore的密码、别名alias以及别名密码
Eclipse ADT的Custom debug keystore自定义调试证书的时候,Android应用开发接入各种SDK时会发现,有很多SDK是需要靠package name和keystore的指 ...
- javaweb学习总结(二十七)——jsp简单标签开发案例和打包
一.开发标签库 1.1.开发防盗链标签 1.编写标签处理器类:RefererTag.java 1 package me.gacl.web.simpletag; 2 3 import java.io.I ...
- javaweb学习总结(十)——HttpServletRequest对象(一)
一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...
- Maven学习总结(四)——Maven核心概念--转载
一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...
- phpweb成品网站最新版(注入、上传、写shell)
注入:之所以鸡肋就是该漏洞利用安装文件 重新生成 配置文件 写入可执行代码 鸡肋1: 具有破坏性 动作非常大 重新写了配置文件 数据库连接文件鸡肋2: 有一定安全常识的站长都会删掉 install 目 ...
- Asp.Net customErrors与httpErrors的区别
先看一下简单的对比 customErrors Asp.Net级别的错误处理程序,只处理Asp.Net应用抛出的异常(404,403,500..) 在IIS7+的服务器依然可用(IIS7之前就引进了) ...