前端使用extjs框架写页面在grid中显示树结构怎么布局？，。！

Question

类似于这种效果该怎么布局呀，我使用了Ext.grid.plugin.RowExpander 也不可以，要求是点击新增的时候，添加树形结构，而且可以给树菜单添加下级

Answer 1

Ext 构建gridtree的步骤

Ext.require([  
    'Ext.data.*',  
    'Ext.grid.*',  
    'Ext.tree.*'  
]);  
  
Ext.onReady(function() {  
    //we want to setup a model and store instead of using dataUrl  
    Ext.define('strSiteName', {  
        extend: 'Ext.data.Model',  
        fields: [  
             
            {name: 'strSiteName',     type: 'string'},  
            {name: 'flaSiteScore', type: 'double'},  
            {name: 'flaInfoDisclosureScore',     type: 'double'},  
            {name: 'flaOnlineServicesScore',     type: 'double'},  
            {name: 'flaPublicParticipationSore', type: 'double'},  
            {name: 'flaWebDesignScore', type: 'double'},  
            {name: 'flaDailyScore', type: 'double'}          
                      
        ]  
    });  
          
    var store = Ext.create('Ext.data.TreeStore', {  
        model: 'strSiteName',  
        proxy: {  
            type: 'ajax',  
            //the store will get the content from the .json file  
            url: 'treegrid.json'  
        },  
        folderSort: true  
    });  
  
    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel  
    var tree = Ext.create('Ext.tree.Panel', {  
        title: 'Duration',  
        width: 800,  
        height: 300,  
        renderTo: Ext.getBody(),  
        collapsible: true,  
        useArrows: true,  
        rootVisible: false,  
        store: store,  
        multiSelect: true,  
        singleExpand: false,  
        //the 'columns' property is now 'headers'  
        columns: [{  
            xtype: 'treecolumn', //this is so we know which column will show the tree  
            text: '网站名称',  
            flex: 8,  
              
            sortable: true,  
            dataIndex: 'strSiteName'  
        },{  
              
            text: '总分',  
            flex: 5,  
            sortable: true,  
            dataIndex: 'flaSiteScore'  
        },{  
              
            text: '公开',  
            flex: 5,  
            sortable: true,  
            dataIndex: 'flaInfoDisclosureScore'  
        },{  
              
            text: '在线办事',  
            flex: 5,  
            sortable: true,  
            dataIndex: 'flaOnlineServicesScore'  
        },{  
              
            text: '公众参与',  
            flex: 5,  
            sortable: true,  
            dataIndex: 'flaPublicParticipationSore'  
        },{  
              
            text: '网站性能及设计',  
            flex: 5,  
            sortable: true,  
            dataIndex: 'flaWebDesignScore'  
        },{  
              
            text: '日常保障',  
            flex: 5,  
            sortable: true,  
            dataIndex: 'flaDailyScore'  
        }   ]  
    });  
});