extjs combo分页显示多字段_ext.js uxcombo-CSDN博客

采用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;
	}
});

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'
        }]
});