采用ExtJS4.2的Ext.form.ComboBox实现自动完成,效果类似google的自动完成,显示结果为Grid。首先上图是王道:
在线演示:http://www.itdatum.net/online/extjs/examples-itdatum/autocomplete/autocomplete.html
1、 自定义新组件Ext.ux.ComboGrid,扩展自Ext.form.ComboBox。
Ext.ux.ComboGrid
Ext.define('Ext.ux.ComboGrid', {
extend : 'Ext.form.ComboBox',
alias : ['widget.combogrid'],
createPicker : function() {
var me = this,picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext.apply({
selModel : {
mode : me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating : true,
hidden : true,
ownerCt : me.ownerCt,
cls : me.el.up('.' + menuCls) ? menuCls : '',
store : me.store,
displayField : me.displayField,
focusOnToFront : false,
pageSize : me.pageSize,
bbar: Ext.create('Ext.PagingToolbar', {
store: me.store,
displayInfo: true,
displayMsg: '本页显示 {0} - {1},共计{2}条',
emptyMsg: "没有符合条件的数据"
})
}, me.listConfig, me.defaultListConfig);
picker = me.picker = Ext.create('Ext.grid.Panel', opts);
picker.getNode = function() {
picker.getView().getNode(arguments);
};
me.mon(picker, {
itemclick : me.onItemClick,
refresh : me.onListRefresh,
scope : me
});
me.mon(picker.getSelectionModel(), {
selectionChange : me.onListSelectionChange,
scope : me
});
return picker;
}
});
Ext.define('Ext.ux.ComboGrid', {
extend : 'Ext.form.ComboBox',
alias : ['widget.combogrid'],
createPicker : function() {
var me = this,picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext.apply({
selModel : {
mode : me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating : true,
hidden : true,
ownerCt : me.ownerCt,
cls : me.el.up('.' + menuCls) ? menuCls : '',
store : me.store,
displayField : me.displayField,
focusOnToFront : false,
pageSize : me.pageSize,
bbar: Ext.create('Ext.PagingToolbar', {
store: me.store,
displayInfo: true,
displayMsg: '本页显示 {0} - {1},共计{2}条',
emptyMsg: "没有符合条件的数据"
})
}, me.listConfig, me.defaultListConfig);
picker = me.picker = Ext.create('Ext.grid.Panel', opts);
picker.getNode = function() {
picker.getView().getNode(arguments);
};
me.mon(picker, {
itemclick : me.onItemClick,
refresh : me.onListRefresh,
scope : me
});
me.mon(picker.getSelectionModel(), {
selectionChange : me.onListSelectionChange,
scope : me
});
return picker;
}
});
2、 采用MVC方式来实现
app.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: [
'UsersContraller'
],
launch: function() {
var win = Ext.create('Ext.window.Window', {
//autoShow: true,
title: 'Auto Complete',
width: 600,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
items: {
xtype: 'userform'
},
maximizable:true,
buttons: [{
text: 'Send'
},{
text: 'Cancel'
}]
});
win.show();
}
});
});
UsersContraller.js
Ext.define('AM.controller.UsersContraller', {
extend: 'Ext.app.Controller',
views: [
'UserForm'
],
stores: [
'UserStore'
],
models: ['UserModel'],
init: function() {
},
onPanelRendered: function() {
//console.log('The panel was rendered');
}
});
UserModel.js
Ext.define('AM.model.UserModel', {
extend: 'Ext.data.Model',
fields: ['name', 'email','idno','type','birthday']
});
UserStore.js
Ext.define('AM.store.UserStore', {
extend: 'Ext.data.Store',
fields: ['name', 'email','idno','birthday','type'],
data: [
{name: 'Ed', idno: '123456',birthday:'2010-12-12',type:'1', email: 'ed@sencha.com'},
{name: 'Tommy',idno: '121212',birthday:'2005-06-27',type:'1', email: 'tommy@sencha.com'},
{name: 'Alex',idno: '434245',birthday:'2012-06-27',type:'1', email: 'tommy@sencha.com'},
{name: 'Kitty',idno: '975322',birthday:'1995-06-27',type:'2', email: 'tommy@sencha.com'},
{name: 'Lily',idno: '113512',birthday:'2015-06-27',type:'2', email: 'tommy@sencha.com'},
{name: 'Lusy',idno: '235212',birthday:'2035-06-27',type:'2', email: 'tommy@sencha.com'}
]
});
UserForm.js
Ext.define('AM.view.UserForm' ,{
extend: 'Ext.form.Panel',
alias : 'widget.userform',
defaultType: 'textfield',
items : [{
displayField : 'name',
editable : true,
emptyText : '请至少输入4个字符自动查询',
fieldLabel : '用户查询',
hideTrigger : true,
id : 'userSelect',
labelStyle : 'text-align:right',
listConfig : {
columns : [ {
align : 'left',
dataIndex : 'name',
exportable : true,
header : '姓名',
id : 'fituitag3',
menuDisabled : true,
style : 'text-align:center;',
width : 80
}, {
align : 'left',
dataIndex : 'idno',
exportable : true,
header : '证件号码',
id : 'fituitag4',
menuDisabled : true,
style : 'text-align:center;',
width : 100
}, {
align : 'left',
dataIndex : 'birthday',
exportable : true,
header : '出生日期',
id : 'fituitag5',
menuDisabled : true,
style : 'text-align:center;',
width : 100
}, {
align : 'left',
data : [ {
'value' : 1,
'text' : '男'
}, {
'value' : 2,
'text' : '女'
}],
dataIndex : 'type',
exportable : true,
header : '性别',
id : 'fituitag6',
menuDisabled : true,
renderer : function(v) {
return v==1 ? '男' : '女';
},
style : 'text-align:center;',
width : 100
} ]
},
listeners : {
'select' : function(c,rs,i){
alert(rs[0].get('name'));
}
},
pageSize : 10,
repeatTriggerClick : true,
store : 'UserStore',
triggerAction : 'all',
valueField : 'idno',
width : 550,
xtype : 'combogrid'
},{
fieldLabel: '姓名',
fieldWidth: 60,
msgTarget: 'side',
allowBlank: false,
labelStyle : 'text-align:right',
name: 'name'
}, {
fieldLabel: '证件号码',
fieldWidth: 60,
labelStyle : 'text-align:right',
name: 'idno'
}]
});