Ext 下拉列表模糊搜索

/** * Created by huangbaidong on 2016/9/18. * 楼盘通用Combo组件,支持模糊查询 * 使用案例: * { fieldLabel : '楼盘名称', xtype: 'residentialAreaCombo', name : 'buildingId', queryParams:{ orgId:top.loginUser.orgId } } */ Ext.define('app.component.biz.house.ResidentialAreaCo…

一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起来就会很容易. 如果考虑多选的场景,我想以下的实现方式很多时候是能够满足要求的: 带复选框(checkbox)的下拉列表,应该是比较直观和方便了,也很符合用户的习惯. 但是如果数据项太多的时候.滚动条会很长,有两个不足: 1.用户查询自己想要的目标很困难: 2.用户如果需要选择的项很多(>10项),…

Ext的异步请求（二级级联动态加载下拉列表）

页面: <tr> <td class="label" width="300" >作业计划项模板</td> <td> <select name="modelId" size="1" style="width: 6.8cm;" id="s1" subid="s2" onchange="javascript:c…

[转]ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让各种html元素获取可变更大小的能力.下面我们一一详细介绍. 一.Ext.menu.Menu…

无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]

无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其他下拉列表,如:省.市.地区. 当我们监听到省变化时,向service端发送省的编号,service端根据收到的"省"编号到数据库中查询该省所对应的市信息, 地区同理,抓住这一点,我们只需要监听 combobox 的 select 事件并在其中实现逻辑即可. 1.代码如下: 1 <!…

无废话ExtJs 入门教程十一[下拉列表：Combobox]

无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns…

[转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律责任. 本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择的特性: [html] <h1>滚轴控件</h1> <div class…

EXt form属性

配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包括GET.POST params:传递到请求中的参数 url:动作提交的路径 waitMsg:动作执行时显示的等待信息属性: Action.CLIENT_INVALID:客户端验证错误 Action.CONNECT_FAILURE:通信错误 Action.LOAD_FAILURE:加载数据时,没有…

Ext.form.ComboBox 后台取值动态加载 ext5.0.0

我用的extjs是5.0.0版本的. 请注意:如果这里没有的combobox相关内容,这里一定有. 开始的时候keyup事件取到的数据就是放不到ComboBox中,放全局变量也不好用.最后大神出手帮忙解决了这个问题~~~ 查看API的时候,对象没有找对,以至于方法事件都用不了. 总结出来方便查阅~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 输入号码结束--触发事件---从后台取数据---将数据放到下拉列表中输入手机号 // 输入电话号 var $inpTel = new Ext…

Ext 初级UI设计

Ext.Button 说明:该组件代替了传统submit,reset,buuton HTML控件构造参数: text: 按钮上的名称 handler:指定一个函数句柄,在默认事件触发时调用,此时的默认事件为click listeners:在对象初始化之前,就将一系列事件进行定义的手段,在进行组件化编程时,特别有用属性: text: 获得当前按钮上的名称 minWidth:按钮的最小宽度 renderTo:将当前对象所生成的HTML对象存放进指定的对象中方法: setText:设置按钮上的名称…

ExtJs 第二章，Ext.form.Basic表单操作

1.认识Ext.form.Panel表单面板 Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 checkboxgroup Ext.form.field.ComboBox 下拉列表框 combo Ext.form.field.Date 日期选择框 datefield Ext.form.field.Display 文本展示组件 displayfield Ext.form.FieldContai…

FineUI模拟树下拉列表

模拟树的下拉列表很多时候,我们希望在下拉列表中显示简单树状的层次结构,在菜单设置.机构设置等场景下这个需求尤为突出.也是基于项目需求的考虑,FineUI增加了模拟树的下拉列表的功能,显示效果如下所示: 注意,这里不仅包含了树状的层次结构,而且包含了可选择项和不可选择项.下面就来看看如何实现这个示例: 1: <ext:DropDownList Label="DropDownList" AutoPostBack="false" Required="tr…

ExtJs4 笔记（13） Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让各种html元素获取可变更大小的能力.下面我们一一详细介绍. 一.Ext.menu.Menu 菜单 1.菜单的定义下面我们来定义一个菜单,它包括一个下拉列表,还有颜色选择器,日期选择器等菜单项. [Js] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1…

ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择的特性: [html] <h1>滚轴控件</h1> <div class="content"> <h2>横向,初始值50</h2> <div id="slider1"></div> &l…

Ext.ux.form.SuperBoxSelect

Ext.ux.form.SuperBoxSelect 在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起来就会很容易. 如果考虑多选的场景,我想以下的实现方式很多时候是能够满足要求的: 带复选框(checkbox)的下拉列表,应该是比较直观和方便了,也很符合用户的习惯. 但是如果数据项太多的时候.滚动条会很长,有两个不足: 1.用户查询自己想要的目…

Ext JS4百强应用: 用grid.plugin.CellEditing做高级查询 --第10强

Ext JS4,用grid.plugin.CellEditing做高级查询: 写了90%,界面出来了,小兴奋就贴出来,还有细节要调整,基本能用. 代码: Ext.define('chenghao.admin.SearchGrid', { extend: 'Ext.grid.Panel', requires: [ 'Ext.selection.*', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.form.*' ], initComponent: f…

EXT.NET高效开发（二）——封装函数

在上一篇<EXT.NET高效开发(一)--概述>中,大致的介绍了一下EXT.NET.那么本篇就要继续完成未完成的事业了.说到高效开发,那就是八仙过海各显神通.比如使用代码生成器,这点大家可以参考我的这篇帖子<CodeSmith系列(三)--使用CodeSmith生成ASP.NET页面>.本人是比较推崇批量化生产的.当然,本篇的重点不在这,看过标题的人都知道. 在使用EXT.NET的时候(当然不仅仅是EXT.NET),总是要做很多重复的事,于是封装一些实用的函数可以一劳永逸呀. 1)…

为Ext添加下拉框和日期组件

Ext.onReady(function(){ var config = { fields:['module'], data:[['新建'],['删除'],['增加']}; var store = new Ext.data.SimpleStore(config); var top=new Ext.FormPanel({ region:'north', renderTo:'mainDiv', frame:true, labelWidth:75, width: 920, height:90, ite…

js、jquery实现模糊搜索功能

模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键时则会选中列表项 5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏 6. 点击文本框外部时自动隐藏下拉框首先,引入jquery文件 <script type="text/javascript&…

改造 Combo Select支持服务器端模糊搜索

项目中使用了 combo select,为缺省的select增加模糊搜索的功能,一直运行得很好. 1 碰到的问题但最近碰到一个大数据量的select:初始化加载的数据项有2000多个.我们采用的是ajax读取所有的option json,并由js在浏览器中遍历并最终生成完整的html.当数据量变大的时候,ajax读取数据和浏览器处理数据都会有比较明显的损耗,页面初始化时需要较长时间,降低了用户友好度. 2 备选解决方案大家简单分析了一下这个问题,想到了三种可能的解决方案. 2.1…

Javascript - ExtJs - Ext.form.Panel组件

FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有子组件宽度为100px. fileUpload: true//显示文件上传组件,如果指示了此项,则必须在items子组件数组中注册一个xtype为"fileuploadfield"的子组件 items : [ {} , { }]//添加表单子控件 buttons : [ {} , {} ]…

jQuery对标签select优化：实现模糊搜索查询功能

由于select标签中的option条数较多,翻页查询比较麻烦,需要对select标签进行优化,解决方法是通过增加模糊查询功能来提高用户体验感. 优化后的界面如下: 在实现这个优化的过程中,参考了两个开源的jQuery插件:comboSelect与select2: select2:https://github.com/select2/select2/ comboSelect:https://github.com/PebbleRoad/combo-select 说明: (一)comboSelect…

Ext.js项目（二）

人事管理模块: 1.机构管理 2.部门管理 3.人员管理一:用例图…

Ext 组件的一些操作

原文:http://linder0209.iteye.com/blog/1039200 1.Ext.Component 该组件在渲染的时候会默认的创建div DOM,是根据this.autoEl的配置来创建的,默认this.autoEl为 div,创建后保存在 this.el中 autoShow 设为true,渲染时会强制显示隐藏的元素,实际上会执行以下代码 if(this.autoShow){//自动显示 this.el.removeClass(['x-hidden','x-hide-' + …

Ext.js高级组件

第二章:Ext.js高级组件 grid组件普通方式表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.height高 frame : Boolean 是否填充渲染gridpanel forceFit : true 列是否自动填充 store : store 数据集 tbar: [] 头部工具栏 dockedItems : Object/Array 可定位的停靠工具条(上.下.左.右) selType…

模糊搜索框（H5），兼容安卓和ios(令人头大的ios输入法)

项目里要可以实现,按照模糊,于是从jq22网站找到一个代码,效果如图: 具体的html代码:(复制,需要引入jq相关的支持文件) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199…

ExtJS下拉列表使用方法（异步传输数据）

最近使用ExtJS下拉列表框(ComboBox)希望完成一个动态下拉列表的功能,即列表中的数据都通过异步方式查询数据库而来,同时在用户选择了列表中的某个值后,可以从后台正确的获取用户选择项所对应的值. 这就包含了两个步骤: 1:异步方式查询数据库并渲染到ComboBox(下拉列表)中: 2:后台获取前台用户选择的列表项所对应的值: 先来看看怎样使用异步方式查询数据库并渲染到下拉列表框中去. 首先需要指定一个代理,代理的使用是为了屏蔽具体数据来源的不同,即下拉列表框中的内容既可以来自于local(…

Ext 中combo的用法

var combobox_xianqu = Ext.getCmp('combobox_id'); var store_xianqu = Ext.data.StoreMgr.lookup('store_xianqu'); var r = store_xianqu.getRange(); combobox_xianqu.fireEvent('select', this, r); -----------在原store上插入一条数据--------{ name: 'VARTYPE', fieldLabe…

ExtJS ComboBox 下拉列表详细用法

ExtJS ComboBox 下拉列表详细用法标签: combobox 2015-06-14 23:23 5171人阅读评论(2) 收藏举报分类: ExtJS(32) 目录(?)[+] 原文转自起飞网:http://www.qeefee.com/article/000171 ComboBox 是ExtJS中经常用到的控件,今天我们来讲一下它的一些用法. 使用本地Store ComboBox需要结合Store一起使用,下面是一个最简单的例子,结合本地的Store的用法: var…

71.Ext.form.ComboBox 完整属性

转自:https://blog.csdn.net/taotaoqi/article/details/7409514 Ext.form.ComboBox 类全称: Ext.form.ComboBox 继承自于: Ext.form.TriggerField 一个提供自动完成.远程加载.分页和许多其他特性的组合框. 配置项 1.transform : Mixed 要转换为组合框的id,DOM节点或者已有的select元素. 2.lazyRender : Boolean 值为true时阻止ComboBo…

【Ext 下拉列表模糊搜索】的更多相关文章