Ext4.x 트리 테이블 컨트롤 [Ext.tree.Panel] 데모

Ext.onReady(function(){
	
	Ext.define('User', {
	    extend: 'Ext.data.Model',
	    fields: [
	        {name: 'field',  type: 'string'},
	        {name: 'field_A',   type: 'string'},
	        {name: 'field_B', type: 'string'},
	    ]
	});
	var store = Ext.create('Ext.data.TreeStore', {
		model:"User",
	    root: {
	        expanded: true,
	        children: [
	            { text: "detention",field:"field",field_A:"a",field_B:"b", leaf: true, expanded: true },
	            { text: "homework",field:"field",field_A:"a",field_B:"b", expanded: true, children: [
	                { text: "book report",field:"field",field_A:"a",field_B:"b", leaf: true },
	                { text: "algebra",field:"field",field_A:"a",field_B:"b", leaf: true}
	            ] },
	            { text: "buy lottery tickets",field:"field",field_A:"a",field_B:"b", leaf: true }
	        ]
	    }
	});

	Ext.create('Ext.tree.Panel', {
	    title: 'Simple Tree',
	    //width: 200,
	    //height: 150,
	    store: store,
	    rootVisible: true,
	    
	    columns: {
	        items: [{
	        	xtype:"treecolumn",
	        	text: "columnOne",
	        	dataIndex:"field",
	        },{
                text: "Column A",
                dataIndex: "field_A",
            },{
                text: "Column B",
                dataIndex: "field_B",
            }],
	        defaults: {
	            flex: 1
	        }
	    },
	
	    renderTo: Ext.getBody()
	});
});