Ext多層ヘッダーツリーテーブル

3089 ワード

参照
ColumnHeaderGroupを導入する必要がある.css、ColumnHeaderGroup.js

var continentGroupRow=[
    					{ header:'',align: 'center',colspan: 4},
    					{header:'VaR95%',align:'center',colspan:2},
    					{header:'VaR97%',align:'center',colspan:2},
    					{header:'VaR99%',align:'center',colspan:2}
    				];
    	var columns=[
	    				{id:'pname',header: "    ", width:150, sortable: false, dataIndex: 'pname'},
	    		        {header: "    ",  sortable: true, dataIndex: 'portname'},
	    		        {header: "    ",  sortable: true, dataIndex: 'absolute1'},
	    				{header: "    ",  sortable: true, dataIndex: 'absolute2'},
	    				{header: "  ",  sortable: true, dataIndex: 'price'},
	    				{header: "    ",  sortable: true, dataIndex: 'absolute3'},
	    				{header: "   ",  sortable: true, dataIndex: 'price'},
	    				{header: "  ",  sortable: true, dataIndex: 'absolute3'},
	    				{header: "   ",  sortable: true, dataIndex: 'price'},
	    				{header: "  ",  sortable: true, dataIndex: 'absolute3'}	
	    		      ];
	  	 var fields=[
	    	   		{name: 'pname'},
	    			{name: 'portname'},
	    			{name: 'price'},
	    			{name: 'absolute1'},
	    			{name: 'absolute2'},
	    			{name: 'absolute3'},
	    	     	{name:'_parent'},
	    	     	{name: '_id'},
	    	     	{name: '_level', type: 'int'},
			     	{name: '_lft', type: 'int'},
			     	{name: '_rgt', type: 'int'},
			     	{name: '_is_leaf', type: 'bool'}
	    	   	];
	    	   	
			  var group = new Ext.ux.grid.ColumnHeaderGroup({
		       				 rows: [continentGroupRow]
		   				 });  	

	    	   var record = Ext.data.Record.create(fields);
	    	   var store = new Ext.ux.maximgb.treegrid.NestedSetStore({
			    	autoLoad : true,
					reader: new Ext.data.JsonReader({id: '_id'}, record),
					proxy: new Ext.data.MemoryProxy()
			    });
			    var grid = new Ext.ux.maximgb.treegrid.GridPanel({
			      store: store,
			      master_column_id : 'pname',
                  height: 340,
                  id:'pgrid',
				  iconCls: 'icon-grid',
				  collapsible: true,
                  animCollapse: false,
			      columns:columns,
			      stripeRows: true,
			      autoExpandColumn: 'uname',
			      title: '      ',
			      viewConfig : {
			      	forceFit: true
			      },
			      plugins: group,
				  renderTo:'grid1'
			    });