ExtJS ComboBox之 键入自动查询

Ext.create(‘Ext.form.Panel‘, {
title: ‘菜单编辑‘,
id:‘editMenuForm‘,
bodyPadding: 5,
// The form will submit an AJAX request to this URL when submitted
url: ‘/SystemManage/SaveMenuForm‘,
method: ‘POST‘,
// Fields will be arranged vertically, stretched to full width
layout: ‘anchor‘,
defaults: {
anchor: ‘100%‘
},
// The fields
defaultType: ‘textfield‘,
items: [{
name: ‘menuGuid‘,
id:‘menuGuid‘,
xtype:‘hiddenfield‘
},{
fieldLabel: ‘菜单名称‘,
name: ‘menuName‘,
id:‘menuName‘,
allowBlank: false
}, {
fieldLabel: ‘菜单地址‘,
id:‘menuUrl‘,
name: ‘menuUrl‘,
// allowBlank: false
}, {
id: ‘remark1‘,
name: ‘remark1‘,
fieldLabel: ‘排序ASC‘,
allowBlank: false
},{
id:‘menuList‘,
name: ‘menuList‘,
xtype: ‘combo‘,
allowBlank: false,
fieldLabel: ‘父菜单‘,
labelSeparator: ‘:‘,
multiSelect: false,
valueField: ‘sm_guid‘, //‘dictdataCode‘,
displayField: ‘sm_name‘, //‘dictdataName‘,
store: comboStore,
//typeAhead : true,
mode: ‘local‘, // default: remote
triggerAction: ‘all‘,
emptyText: ‘请选择父菜单‘,
readOnly: false,
editable : true,
selectOnFocus :true,
anchor: ‘50%‘,
minChars : 1,
queryParam :‘sm_name‘
},{
id: ‘remark2‘,
name: ‘remark2‘,
fieldLabel: ‘最高管理员可见‘,
anchor: ‘40%‘,
allowBlank: false
}],
buttonAlign:"left",
buttons: [{
text: ‘新增‘,
id:"btnSumbit",
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function () {
var form = this.up(‘form‘).getForm();
if (form.isValid()) {
form.submit({
success: function (form, action) {
Ext.Msg.alert(‘提示‘,‘操作成功!‘);
menuStore.reload();
},
failure: function (form, action) {
Ext.Msg.alert(‘提示‘, ‘操作失败!‘ + action.result.message);
ReturnFailJsonResult(action.result);
}
});
}
}
},{
text: ‘重置‘,
handler: function () {
this.up(‘form‘).getForm().reset();
Ext.getCmp(‘btnSumbit‘).setText("新增");
}
}],
renderTo: "gridForm"
});

关键点:

1.minChars:如果没有为该属性赋值,则默认是4,即在输入4个字符时,才会触发自动完成(即动态查询) 
2.forceSelection:只能从下拉框中任选一个值,如果输入的值不存在下拉框中,将会被自动清空。 
3.queryParam:当在输入框输入1个字符时,将会把“sm_name=输入值”传递到服务端。  
4.hideTrigge:这个属性当为true时,会隐藏掉combobox的下拉按钮。

5.forceSelection:ExtJs默认是选框内输入值不验证是否在 列表中,  加此属性 会在列表中限制用户输入 列表以外的值

时间: 2024-12-12 14:10:40

ExtJS ComboBox之 键入自动查询的相关文章

ExtJs ComboBox 在IE 下 自动完成功能无效的解决方案

使用 ComboBox 来作为自动完成的组件,就像google suggestion ,可是在IE下怎么也无法输入字符,是处于不可编辑状态,而firefox和chrome都正常显示.我在2个ExtJs QQ群中问这个问题,都没有解决,不知道是不会还是不想回答.我在这里分享出来解决办法. 这个问题困扰了我不少时间,在网上总也搜索不到答案.最后终于通过google找到了解决办法. 方法1:将如下代码添加到你的 Ext.onReady的方法中即可! [html] view plaincopy Ext.

Extjs combobox设置默认值

转载:http://www.54mask.com/extjs-combobox-default-value.html 相信很多人都遇到了在ExtJS框架中设置combo组件默认值的需求,ExtJS框架并没有提供现成的配置项或者方法来解决此问题,本人认为主要是因为此种需求的应用场景有限且很难达到适应于不同场景的实现. combo组件的设值其实很简单: 1 var getRecruitmentName = new Ext.data.JsonStore({ 2 url: '',--后台地址 3 bas

combobox和combotree模糊查询

First /** * combobox和combotree模糊查询 * combotree 结果显示两级父节点(手动设置数量) * 键盘上下键选择叶子节点 * 键盘回车键设置文本的值 */ (function(){ //combobox可编辑,自定义模糊查询 $.fn.combobox.defaults.editable = true; $.fn.combobox.defaults.filter = function(q, row){ var opts = $(this).combobox('

Android Tasker应用之自动查询并显示话费流量套餐信息

Android Tasker应用之自动查询并显示话费流量套餐信息 虽然Android平台有非常多的流量监控软件,但最准确的流量数据还是掌握在运营商手里.有些朋友可能像我一样时不时地发短信查询流量信息,这个操作在智能手机上显得太不智能了,本文将用Tasker让这个操作变得智能化. 1.功能需求 每天早上闹钟响时,Tasker自动发送短信给运营商查询套餐信息.收到短信后Tasker自动分析短信内容,并将话费余额,流量信息等显示在桌面上. 用户可以手动随时给运营商发短信查询,Tasker自动判断为套餐

ExtJS ComboBox同时加载远程和本地数据

ExtJS ComboBox同时加载远程和本地数据 原文:http://gblog.hbcf.net/index.php/archives/233 ComboBox比较特殊需求,将远程数据和本地数据同时加载.其实,还是先加载远程,在将本地数据塞进获取到的远程数据中去.大概的代码如下(网上得来,未验证,以备用) //首先远程读取数据 var seriesStore = new Ext.data.JsonStore({ url: '', fields: ['seriesid', 'seriesnam

easyui combobox开启搜索自动完成功能

combo.json [{ "id":-1, "text":" ", "spell":"" },{ "id":1, "text":"类型1", "spell":"lx1" },{ "id":2, "text":"类型2", "spell&q

ext.net中ComboBox空间实现模糊查询

ComboBox中的属性添加Mode="Local"可以实现第一个字的模糊查询但是搜索中间的字无法实现 现提供一下方法使用正则表达式实现全模糊查询 <ext:ComboBox ID="ComboBox1" runat="server" DisplayField="MingCheng" ValueField="Id" StoreID="Employ" Width="100&

Extjs combobox 实现搜索框的效果

目的:使用combobox实现一个类似搜索框的效果,即用户输入内容后,出现相关下列列表,提供选择. 实现:extjs3 中combobox自身带这个功能. 需要设置的属性: 1. hideTrigger: true, // 去掉右侧的小标志 2. mode : 'remote', // 数据需要远程下载 3. minChars:2, // 设置用户输入字符多少时触发查询 4. queryParam: 'userinput', // 设置用户传递参数的名称,默认是 ‘query’ store的定义

ExtJS ComboBox之 2级联动

Ext.onReady(function () { /*表格数据源绑定*/ var menuStore = Ext.create('Ext.data.Store', { pageSize:10, fields: ['id','','sm_name', 'sm_url', 'fatherGuid','fatherName'], proxy: { type: 'ajax', url: '/SystemManage/GetMenuList', reader: { type: 'json', root: