extjs可直接编辑节点的tree

最新推荐文章于 2018-05-10 16:58:37 发布

chihailf

最新推荐文章于 2018-05-10 16:58:37 发布

阅读量2.6k

点赞数

文章标签： extjs stylesheet javascript function tree prototype

//节点可以编辑的树
Ext.namespace('demo');
demo = function(){
this.init();//初始化函数
};
Ext.extend(demo,Ext.util.Observable,{
init:function(){
//创建一个简写
var Tree = Ext.tree;
//添加一个树形面板
this.tree = new Tree.TreePanel({
el:'tree-panel',//将树形添加到一个指定的div中
title:'可编辑的树',
autoScroll:true,
enableDD:false,//是否支持拖拽效果
containerScroll: true,//是否支持滚动条
loader:new Ext.tree.TreeLoader({
dataUrl:'tree-edit-test.json'
})
});
this.treeEditer = new Tree.TreeEditor(
this.tree,
{allowBlank: false}
);
//创建一个根节点
this.root = new Tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'source'
});
//为tree设置根节点
this.tree.setRootNode(this.root);
//渲染树形
this.tree.render();
this.root.expand(true);
/*
为创建的treeEditer添加事件
有两个事件最为常用，一个为beforestartedit另一个为complete
从名字就可以看出，beforestartedit事件是在编辑前的事件，因此可以通过它来判断那些节点可以编辑那些不可以。
complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。
*/
this.treeEditer.on("beforestartedit", function(treeEditer){
var tempNode = treeEditer.editNode;//将要编辑的节点
if(tempNode.isLeaf()){
return true;
}else{
return false;
}
});
this.treeEditer.on("complete", function(treeEditer){
alert(treeEditer.editNode.text);
});
}
});
//实例化主程序类
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';
Ext.onReady(function(){
var myDemo = new demo(); //实例化
});
html：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点可以编辑的树</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />
<link href="css/default.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>
<body>
<div id="loadingTab">
<div class="loading-indicator">
<img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<a href="index.html">可编辑的树练习</a> -
<span id="loading-yfo"><a href="http://yfoffice.net.cn" target="_blank">忆凡工作室</a></span><br />
<span id="loading-msg">加载样式表和图片...</span>
</div>
</div>
<br>
<h1>动态-异步tree的综合练习</h1>
<div id="tree-panel" style=" margin:30px; width:300px; height:400px"></div>
<link href="js/ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>
<script type="text/javascript" src="js/tree-edit-test.js"></script>
<script type="text/javascript">
$('loading-msg').innerHTML = '初始化完毕！！';
Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失
</script>
</body>
</html>

chihailf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs可直接编辑节点的tree

//节点可以编辑的树 Ext.namespace(demo); demo = function(){ this.init();//初始化函数 }; Ext.extend(demo,Ext.util.Observable,{ init:function(){ //创建一个简写
复制链接

扫一扫