运行环境：ExtJS 4.0.7
效果如图：
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> </head> <body> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript"> Ext.define('PVE.form.ComboGrid', { extend: 'Ext.form.ComboBox', requires: [ 'Ext.grid.Panel' ], alias: ['widget.PVE.form.ComboGrid'], // copied from ComboBox 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 }, me.listConfig, me.defaultListConfig); // NOTE: we simply use a grid panel //picker = me.picker = Ext.create('Ext.view.BoundList', opts); picker = me.picker = Ext.create('Ext.grid.Panel', opts); // hack: pass getNode() to the view 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.onReady(function(){ var myData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] ]; var store = Ext.create('Ext.data.ArrayStore', { // store configs autoDestroy: true, storeId: 'myStore', // reader configs idIndex: 0, fields: [ 'company', {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ], data:myData }); Ext.create('Ext.panel.Panel', { title: 'Hello', 200, items:{ xtype: 'PVE.form.ComboGrid', valueField: 'price', displayField: 'company', store: store, listConfig: { columns: [ { header: 'company', dataIndex: 'company', }, { header: 'price', dataIndex: 'price', } ] } }, renderTo: Ext.getBody() }); }) </script> </body> </html>