禁用/启用树(兼容IE)

Posted 周二, 12/09/2008 - 15:00 by admin

改编自ExtJs 自带的tree例子，禁用后extjs的树会不可用,并会加上一层遮罩。

ExtJs的Tree.TreePanel里面有两个方法 enable()/disable(),按照常规来说方法已经够用了.的确这两个方法在firefox下不会有任何问题,但在ie中,disable()后,整棵树没有遮罩效果,而是黑掉了非常难看.

解决办法非常简单,核心代码如下:

if(启用)
	{
		tree.maskDisabled = true;
		tree.enable();
	}
	else
	{
		tree.disable();
		tree.maskDisabled = false;
		tree.enable();
	}

演示(demo)地址在文章最后.

效果图如下：

完整源代码包括：0009_disable_tree.htm
0009_disable_tree.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>禁用/启用树(兼容IE)</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../examples/examples.css" />
<script type="text/javascript" src="../../examples.js"></script>
<script type="text/javascript">
var children = [{
 text:'First Level Child 1'
,children:[{
	 text:'Second Level Child 1'
	,leaf:true
},{
	 text:'Second Level Child 2'
	,leaf:true
}]
},{
 text:'First Level Child 2'
,children:[{
	 text:'Second Level Child 1'
	,leaf:true
},{
	 text:'Second Level Child 2'
	,leaf:true
}]

}];
var tree;
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"  	

Ext.onReady(function(){
	var Tree = Ext.tree;
    tree = new Tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader()
    });
    var root = new Tree.AsyncTreeNode({
        text: 'Extjs.org.cn',
        draggable:false,
        children:children
    });
    tree.setRootNode(root);
    tree.render();
    root.expand();

});

function EnableTree(ctl)
{
	if(ctl.value=="enable")
	{
		tree.maskDisabled = true;
		tree.enable();
	}
	else
	{
		tree.disable();
		tree.maskDisabled = false;
		tree.enable();
	}
}
</script>

</head>
<body>
<h1>禁用/启用树(兼容IE)</h1>
<p></p>
<p>改编自ExtJs 自带的tree例子，禁用后extjs的树会不可用,并会加上一层遮罩。</p>

<div id="option" style="width:250px">
  <label>
  <input name="radio" type="radio" id="enable" onclick="EnableTree(this);" value="enable" checked>
  启用  </label>
  <input type="radio" name="radio" id="disable" value="disable" onclick="EnableTree(this);"> 禁用
</div>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

</body>
</html>

演示(demo)地址:
http://extjs.org.cn/extjs/mydemo/tree/0009_disable_tree.html

（版权声明：本篇文章版权属于extjs.org.cn所有，可以在互联网上进行转载，转载必须保留作者版权声明及链接；也可以文章用于出版、发行或其它商业用途，仅仅需要保留作者版权声明及链接。）

  • 要发表评论，请先登录