ExtJS RowExpander plugin strange colspan

尝试使用行展开器创建网格，并遇到奇怪的行为。

第一行的扩展视图的colspan为3(表中的列数)，第二行colspan为2，后面的行colspan为1。

有没有人能解释一下为什么会发生这种情况，以及一种指定扩展行的内容应该填充所有行的方法(colspan设置为表中的列数)

JSFiddle:

JSFiddle工作示例

Ext.onReady(function(){
var store = Ext.create('Ext.data.Store',{
    fields: ['id','name','ship'],
    data: [{
        id: 1, 
        name: 'Kirk',
        ship: 'Enterprise'           
    },{
        id: 2,
        name: 'Picard',
        ship: 'Enterprise'
    },{
        id: 3,
        name: 'Janeway',
        ship: 'Voyager'
    },{
        id: 4,
        name: 'Khan',
        ship: 'Reliant'
    }]
});
Ext.create('Ext.grid.Panel',{
    title: 'Test',
    renderTo: Ext.getBody(),
    store: store,
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    },{
        text: 'Name',
        dataIndex: 'name'
    },{
        text: 'Ship',
        dataIndex: 'ship'
    }],
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl: [
            '<div class="row-details-panel" id="row-details-panel-{id}">{id} = {name}</div>'
        ]
    }],
    listeners: {
        afterrender: function (grid) {
            // hide the first row generated by rowExander plugin
            grid.getView().getHeaderAtIndex(0).hide();
        }
    }
});

});