EXTJS4:如何将girdpanel插入到ComboBox中

运行环境：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>

相关阅读:
js调试技巧
 Java编程技巧——构建器
 java设计模式：工厂方法模式（Factory Method）
23种设计模式导航
 java设计模式：单例模式（Singleton Pattern）
迭代器与生成器
 装饰器
 文件操作的说明与使用
 函数命名、调用小技巧
 各类型数据的操作方法
原文地址：https://www.cnblogs.com/zdkjob/p/2595425.html