I have defined a grouped header grid as below.
However, something is wrong as the attached image.
I'm using Ext JS 4.1

Please help,
Thanks,
zhu


grid.png


code:
Code:

Code:
Ext.onReady(function() {
    Ext.QuickTips.init();


    var myData = [[1, '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Category 1', 'Country 1', 0]
    , [2, 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Category 2', 'Country 10', 0]
    , [3, 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Category 3', 'Country 9', 0]];


    //
    var fields = [{
        "name" : "RD4434",
        "type" : "float"
    }, {
        "name" : "RD4435",
        "type" : "string"
    }, {
        "name" : "RD4436",
        "type" : "float"
    }, {
        "name" : "RD4418",
        "type" : "float"
    }, {
        "name" : "RD4419",
        "type" : "float"
    }, {
        "name" : "RD4420",
        "type" : "float"
    }, {
        "name" : "RD4421",
        "type" : "string"
    }, {
        "name" : "RD4422",
        "type" : "string"
    }, {
        "name" : "RD4427",
        "type" : "float"
    }, {
        "name" : "RD4428",
        "type" : "float"
    }, {
        "name" : "TD0506",
        "type" : "float"
    }];


    var columns = [{
        "filter" : false,
        "text" : "g01",
        "columns" : [{
            "filter" : false,
            "text" : "g0101",
            "columns" : [{
                "sortable" : true,
                "align" : "center",
                "dataIndex" : "RD4418",
                "text" : "i010101",
                "width" : 100
            }]
        }, {
            "filter" : false,
            "text" : "g0101",
            "columns" : [{
                "filter" : false,
                "text" : "g010201",
                "columns" : [{
                    "sortable" : true,
                    "align" : "center",
                    "dataIndex" : "RD4421",
                    "text" : "i01020101",
                    "width" : 100
                }]
            }]
        }]
    }, {
        "filter" : false,
        "text" : "g02",
        "columns" : [{
            "filter" : false,
            "text" : "g0201",
            "columns" : [{
                "sortable" : true,
                "align" : "center",
                "dataIndex" : "RD4436",
                "text" : "i020101",
                "width" : 100
            }]
        }]
    }, {
        "filter" : false,
        "text" : "g03",
        "columns" : [{
            "sortable" : true,
            "align" : "center",
            "dataIndex" : "RD4427",
            "text" : "i0301",
            "width" : 100
        }]
    }, {
        "filter" : false,
        "text" : "g04",
        "columns" : [{
            "filter" : false,
            "text" : "g0401",
            "columns" : [{
                "filter" : false,
                "text" : "g040101",
                "columns" : [{
                    "filter" : false,
                    "text" : "g04010101",
                    "columns" : [{
                        "filter" : false,
                        "text" : "g0401010101",
                        "columns" : [{
                            "sortable" : true,
                            "align" : "center",
                            "dataIndex" : "RD4428",
                            "text" : "i040101010101",
                            "width" : 100
                        }]
                    }]
                }]
            }]
        }]
    }, {


        "sortable" : true,
        "align" : "center",
        "dataIndex" : "TD0506",


        "text" : "i05",
        "width" : 100
    }];
    // create the data store
    var store = Ext.create('Ext.data.ArrayStore', {
        fields : fields,
        data : myData
    });


    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store : store,
        columns : columns,
        title : 'Multiple header',
        viewConfig : {
            stripeRows : true
        }
    });
    Ext.widget('viewport', {
        layout : 'fit',
        items : [grid]
    });


});