Extjs 将现有grid.Panel转换为tree.Panel

我有一个网格，它具有动态列生成功能，我的问题是，在创建它之后，我意识到我需要tree.Panel，而不是grid.Panel，它具有相同的列

代码非常简单：一个监听器，一个控制器函数，生成用于重新配置视图的列数组

现在，这适用于grid.Panel，正在生成列，但不适用于tree.Panel。我没有错误，没有什么可以指出我的错误

网格.面板：

树.面板：

视图：

Ext.define（'x.view.valuegrid.valuegrid'{
扩展：“Ext.grid.Panel”，//旧网格版本
//extend:'Ext.tree.Panel'，解决了这个问题，我只需要添加
列：[]
来查看。
虽然我想知道，为什么grid.Panel没有遇到这个问题？如果有人能向我解释清楚，我会接受这个答案

Ext.define('x.view.valuegrid.valuegrid', {
    extend: 'Ext.grid.Panel', //old grid version
    //extend: 'Ext.tree.Panel', <-- not working

    requires: [
        'x.view.valuegrid.valuegridModel',
        'x.view.valuegrid.valuegridController'
    ],

    xtype: 'valuegrid',

    viewModel: {
        type: 'valuegrid'
    },

    controller: 'valuegrid',

    enableLocking: true,
    //useArrows: true,
    //rootVisible: false,

    listeners: {
        beforerender: 'loadColumns'
    }
});

    var columns = [];

//create first column
var firstColumn = {//xtype: 'treecolumn', 
                   text: firstColumnData.label,
                   width: firstColumnData.width,
                   menuDisabled: true,
                   locked: true};
columns.push(firstColumn);

//create dimension columns
for(i = 0; i < dimensions.length; i++){
    var dim = {text: dimensions[i].label,
               width: 150, //parseInt(dimensions[i].width),
               menuDisabled: true,
               locked: true};
    columns.push(dim);
}                       

//create value columns
for(i = 0; i < groups.length; i++){
    var group = {text: groups[i], menuDisabled: true};
    var valCols = [];
    for(j = 0; j < valueColumns.length; j++){
        if(valueColumns[j].group == groups[i]){
            valCol = {text: valueColumns[j].label, 
                      width: 75,
                      menuDisabled: true}
            valCols.push(valCol);
        }
    }
    group.columns = valCols;
    columns.push(group);
}          

//reconfigure new columns
grid.reconfigure(null, columns);