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'
        }    ]
    });
});