Extjs给grid单独添加一行小标题

由于有时候要求我们展示这样的grid,

Ext本身很难完成这样的需求。
所以我进行了如下的操作

//grid的store
 Ext.define('_dataModel', {
            extend: 'Ext.data.Model',
            fields: []
        });
        var _store = Ext.create('Ext.data.Store', {
            storeId: 'inquiryStore',
            model: '_dataModel',
            //async: false,
            proxy: {
                type: 'ajax',
                //url: '/jsvc/service/CdProjectService/getCostParameters',
                url: './json/CalculationMethodSelection.json',
                reader: {
                    type: 'json',
                    root: 'result.content',
                    totalProperty: 'result.totalElements'
                }
            },
            listeners: {
                beforeload: function () {
                    var params = this.getProxy().extraParams;
                    params = Ext.apply(params, {
                        projectId: me.newDate.PROJECT_ID

                    });
                },
                load: function (field, records) {
                  Ext.Array.each(records, function (n, i) {
                        //进行判断在哪一行加入数据，然后对这行的数据进行操作。
                        if (n.data.INCOME_NAME === "产量") {
                            //找到需要修改样式的哪一行，进行
                            Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setStyle({
                                width: "100%",
                                heigth: "26px",
                                "text-align": "left",
                                "font-size": "16px"
                            })
                            Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setHtml('<tr ><td style="text-align: center">' + n.data.XH + '</td><td colspan="18" style="height: 26px;" >' + n.data.INCOME_NAME + '</td></tr>')
                        }
                        if (n.data.INCOME_NAME === "价格") {
                            Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setStyle({
                                width: "100%",
                                heigth: "26px",
                                "text-align": "left",
                                "font-size": "16px"
                            })
                            Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setHtml('<tr ><td style="text-align: center">' + n.data.XH + '</td><td colspan="18" style="height: 26px;" >' + n.data.INCOME_NAME + '</td></tr>')
                        }
                        if (n.data.INCOME_NAME === "补贴") {
                            Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setStyle({
                                width: "100%",
                                heigth: "26px",
                                "text-align": "left",
                                "font-size": "16px"
                            })
                            Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setHtml('<tr ><td style="text-align: center">' + n.data.XH + '</td><td colspan="18" style="height: 26px;" >' + n.data.INCOME_NAME + '</td></tr>')
                        }
                    })

                }

            },
            autoLoad: true
        });
        //grid的其他地方都不要改变
         xtype: 'gridbase',
                    store: _store,
                    id: 'grid',
                    autoScroll: true,
                    plugins: [
                        {
                            ptype: 'cellediting',
                            clicksToEdit: 1,
                            id: "gaswindowe ditor"
                        }
                    ],
                    pagingtoolbar: false,
                    isLineFeed: true,
                    columns: {
                        defaults: {
                            align: 'center',
                            sortable: false,
                            menuDisabled: true,
                            tdCls: 'myCss',
                            defaults: {
                                sortable: false,
                                menuDisabled: true,
                                align: 'center',
                               /* editor: {
                                    xtype: 'numberfield',
                                }*/
                            }
                        },
                        items: _gridHeadData,//这里是动态获取的表头
                    },

然后就变成了自己需要的样子。