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

要在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
* licensing@extjs.com
* 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();
});