extjs树节点,可以编辑,本人没接触过extjs...但是现在有一个任务,节点可以编辑...求大神啊!!天王盖地虎
1个回答
展开全部
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var windowWidth = 1000;
var windowHeight = 500;
var tree = new Ext.tree.TreePanel( {
region : "west",
width : windowWidth / 3,
height : windowHeight,
title : "test",
root : new Ext.tree.AsyncTreeNode( {
text : "all",
children : [ {
text : "aaa",
leaf : true
}, {
text : "bbb",
leaf : true
}, {
text : "ccc",
leaf : true
} ]
}),
autoScroll : true,
animate : true,
lines : false,
collapseMode : "mini",
collapsible : true,
margins : '0 0 2 2',
cmargins : '0 5 2 2',
layoutConfig : {
animate : true
},
split : true,
border : true,
minSize : windowWidth / 6,
maxSize : windowWidth / 6,
tbar : [{
tooltip : "刷新",
iconCls: 'myTree_reload',
listeners : {
click : function() {
sm_timesendWin.show();
}
}
}
],
listeners : {
click : function(n) {
var addEditor = new Ext.tree.TreeEditor(tree, {
allowBlank : false,
cancelOnEsc : true
});
if(n.leaf){//在叶子节点下加节点
var newNode = new Ext.tree.TreeNode({
text : '请重命名'
});
n.leaf = false;
n.expand(false, true, function() {
n.appendChild(newNode);
tree.getSelectionModel().select(newNode);
setTimeout(function() {
addEditor.editNode = newNode;
addEditor.startEdit(newNode.ui.textNode);
}, 10);
});
addEditor.on("complete",function(){//编辑完成后的回调函数
alert(1);
});
}else{//父节点可以直接编辑
n.expand(false, true, function() {
tree.getSelectionModel().select(n);
setTimeout(function() {
addEditor.editNode = n;
addEditor.startEdit(n.ui.textNode);
}, 10);
});
addEditor.on("complete",function(){
alert(2);
});
}
}
}
});
var windowWidth = window.screen.availWidth;
var style = 'margin-top:50px;margin-left:150px;';
var el = Ext.get('auto-center').applyStyles(style);
tree.render(el);
});
</script>
</head>
<body>
<div id='auto-center'></div>
</body>
</html>
可编辑节点的树,例子有两种方式~你运行看下吧。
把这个直接考到txt上,重命名为html。然后把你extjs包的路径改改,或者直接放到extjs包的同级目录下,点击就能直接运行了。
或者你自己有环境,你就考走js就行了。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询