Ext3.1.1（七） Ext3.1扩展的插件 TreeGrid

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qwkxq/article/details/57086838

要在Ext3.1.1使用 TreeGrid，需要除Ext核心文件（js,css等）导入外，还需要导入扩展的js：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext3.1.1/extTools/TreeGridSorter.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext3.1.1/extTools/TreeGridColumnResizer.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext3.1.1/extTools/TreeGridNodeUI.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext3.1.1/extTools/TreeGridLoader.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext3.1.1/extTools/TreeGridColumns.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext3.1.1/extTools/TreeGrid.js"></script>

本案例使用了Slider组件，所以此组件js也要导入：

<!-- 滑动条 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ux/SliderTip.js"></script>

SliderTip.js源码

/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * [email protected]
 * http://www.extjs.com/license
 */
/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return String(slider.getValue());
    }
});

TreeGrid使用示例：

Ext.onReady(function(){
			var tree_loader = new Ext.ux.tree.TreeGridLoader({
				dataUrl: '<%=basePath%>/testTreeGrid',
			})  
			
		    //设置节点属性 
		    var mytreegrid = new Ext.ux.tree.TreeGrid({
		        title: 'treegrid',
		        height:400,
		    	width:1500,
		    	renderTo:'mytreegrid',
		        enableDD: true,//节点是否可以移动
		        useArrows:false,//是否使用Vista样式箭头
			    autoScroll:true,//超过是否自动滚动
		        tbar:[{
		        	text:'获取选中行id',
		        	handler:function(){
		        		var selectRow=mytreegrid.getSelectionModel().getSelectedNode();
		        		alert(selectRow.attributes.id)
		        	},
		        },'-',{
		        	text:'弹出滑动条',
		        	handler:function(){
		        		alertSlider(Math.round(Math.random()*100));
		        	},
		        }],
		        columns:[{
		            header: '名称',
		            width: 200,
		            dataIndex: 'text',
		        } ,{
		            header: '描述',
		            width: 250,
		            dataIndex: 'desc',
		        }/* ,
		        {
		        	header:'id',
		        	width:0,
		        	hidden:true,
		        	dataIndex:'id',
		        	cls: 'x-hidden',
		        } */], 
		        loader:tree_loader,
		    });
			mytreegrid.expandAll();
		});