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默认是选框内输入值不验证是否在 列表中,  加此属性 会在列表中限制用户输入 列表以外的值

posted @ 2014-10-08 14:22  执着的码农  阅读(923)  评论(0编辑  收藏  举报