Ext4.2 Grouped Header Grid 请教

Question

Ext4 合并表头 

Answer 1

楼主还是先找些资料（比如视频教程之类）看看，了解下Extjs中的mvc，然后再看这个例子像你上面那样，把代码都堆积到一个文件中是运行不起来，你的view(GroupedHeaderGrid)、model(Company)、和store(Companiese)之间没有联系这个例子在kitchensink这个应用下，叫“Grouped Header Grid”（项目运行起来就能看到），你打开后会看到有controller、model、view等几个文件建议楼主还是先了解一下，你一上来就啃这个，很费劲

Answer 2

刚好之前我看过这个..
XXXX.js代码如下：/// <reference path="../Extjs-4.2.1/ext-all-debug.js" />Ext.Loader.setConfig({
    enabled: true
});Ext.Loader.setPath('Ext.ux', '../Extjs-4.2.1/ux');Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.field.Number',
    'Ext.form.field.Date',
    'Ext.tip.QuickTipManager',
    'Ext.ux.DataTip'
]);Ext.onReady(function () {
    Ext.QuickTips.init();
    
    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }    /**
     * Custom function used for column renderer
     * @param {Object} val
     */
    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }    var myData = [
        ['company-1', 10, 1, 10, '2007-06-24'],
        ['company-2', 10, 3, 11, '2007-08-13'],
        ['company-3', 111, 4, 27, '2007-07-12'],
        ['company-4', 11, 1, 32, '2007-01-04'],
        ['company-5', 135, 5, 10, '2007-02-21'],
        ['company-6', 15, 7, 11, '2007-03-11']
    ];    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           { name: 'company' },
           { name: 'price', type: 'float' },
           { name: 'change', type: 'float' },
           { name: 'pctChange', type: 'float' },
           { name: 'lastChange', type: 'date', dateFormat: 'Y-m-d' }
        ],
        data: myData
    });    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });    var grid = Ext.create('Ext.grid.Panel', {
        frame: true,
        columnLines: true,
        store: store,
        plugins: [ cellEditing ],
        listeners: {
            beforeshowtip: function (grid, tip, data) {
                var cellNode = tip.triggerEvent.getTarget(tip.view.getCellSelector());
                if (cellNode) {
                    data.colName = tip.view.headerCt.columnManager.getHeaderAtIndex(cellNode.cellIndex).text;
                }
            }
        },
        selModel: {
            selType: 'cellmodel'
        },
        columns: [{
            text: 'Company',
            width: 120,
            sortable: false,
            locked: true,
            dataIndex: 'company'
            //, editor: {
            //    allowBlank: false
            //}
        }, {
            text: 'Stock Price',
            columns: [{
                text: 'Price',
                width: 75,
                sortable: true,
                renderer: 'usMoney',
                dataIndex: 'price',
                editor: {
                    xtype: 'numberfield',
                    allowBlank: false,
                    minValue: 0,
                    maxValue: 100000
                }
            }, {
                text: 'Change',
                width: 75,
                sortable: true,
                renderer: change,
                dataIndex: 'change',
                editor: {
                    xtype: 'numberfield',
                    allowBlank: false,
                    minValue: -1000,
                    maxValue: 1000
                }
            }, {
                text: '% Change',
                width: 75,
                sortable: true,
                renderer: pctChange,
                dataIndex: 'pctChange',
                editor: {
                    xtype: 'numberfield',
                    allowBlank: false,
                    minValue: -10000,
                    maxValue: 10000
                }
            }]
        }, {
            text: 'Last Updated',
            width: 85,
            sortable: true,
            renderer: Ext.util.Format.dateRenderer('Y-m-d'),
            dataIndex: 'lastChange',
            editor: {
                xtype: 'datefield',
                format: 'Y-m-d',
                minValue: '2002-10-10',
                disabledDays: [0, 6],
                disabledDaysText: 'Plants are not available on the weekends'
            }
        }],
        height: 350,
        width: 600,
        title: 'Grouped Header Grid',
        renderTo: 'panel',
        viewConfig: {
            stripeRows: true
        }
    });
});Html代码:<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../Extjs-4.2.1/resources/css/ext-all.css" rel="stylesheet" />
    <script src="../Extjs-4.2.1/ext-all.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id ="panel"></div>
    </form>
</body>
<script src="../js/XXXX.js"></script>
</html>LZ修改时注意路径