EXTJs中带复选框tree的问题，

研究了一段时间，界面是很强大，但感觉大部分时间花在JS代码的编写上，不太划算。
http://www.cnblogs.com/mogen_yin/archive/2008/10/28/1321069.html你看看这个能不能满足你的要求

下面是复选框的且带右键菜单的树代码。
<body>
<script>
     Ext.BLANK_IMAGE_URL = "../resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

Ext.onReady(function(){
/************************** 联系人树形菜单**************************/
              var contacterTree = new Ext.tree.TreePanel({
                         id:"treePanelContact",
                         border:false,
                         lines:false,   // 去掉树的线
     rootVisible:true,
     autoScroll:true,
     animate:true,
     width:200,
     height : 468,
     style:"background-color:#FFFFFF;border-color:#0099FF;",
     // enableDD: false,  // 允许树可以拖拽
     containerScroll: true,
     loader: new Ext.tree.TreeLoader({
                dataUrl:'<%=path%>/treeOperation.do?action=loadTree'
         }),
root:new Ext.tree.AsyncTreeNode({
id : "treeContact",
    text: '联系人',
    draggable:false,
    expanded: true   // 展开根节点下的节点
}),
listeners:{
click : function(node){
if(node.id == "treeContact"){
// 如果点击的是根节点，则 GridPanel 显示所有的数据
// store.load({params:{flag:'all'}});
}
else if(node.isLeaf() == true){
// 如果点击的是枝节点的话，则根据 ID 查询联系人的信息
// store.load({params:{flag:'contacter',contacterId:node.id}});
}else{
// 如果既不是根节点也不是枝节点，那么点击的就是分组节点，
// 则 GridPanel 显示对应分组号的联系人信息
// store.load({params:{flag:'group',groupId:node.id}});
}
     }
}
    });

    // 添加树的右键菜单
    contacterTree.on('contextmenu', menuShow);
function menuShow ( node )
{
treeRightMenu.show(node.ui.getAnchor());
node.select();//让右击是选中当前节点
};


           var treeRightMenu = new Ext.menu.Menu({
                 id: 'treeMenuContext',
                 items: [
{
                  text: '搜索联系人',
                  icon:"../images/shared/icons/fam/search.gif",
                  handler:function()
                {
                Search_Contacter("搜索联系人");  // 具体可以根据自己的需求来写。。
                }
                 },
                 {
                  text: '添加联系人',
                  icon:"../images/shared/icons/fam/add.gif",
                  handler:function()
                {
                AddContacter("新增联系人");  // 具体可以根据自己的需求来写。。
                }
                 },{
                  text: '添加分组',
                  icon:"../images/shared/icons/fam/add.gif",
                  handler:function()
                {
                AddContacterGroup("新增分组");  // 具体可以根据自己的需求来写。。
                }
                 },{
                  text: "删除",
                  icon: "../images/shared/icons/fam/delete.gif",
                  handler:function()
                {
                treeDelContacter();  // 具体可以根据自己的需求来写。。
                }
                 }
              /*   ,{
                  text:"修改",
                  icon: "../images/shared/icons/fam/cog_edit.png",
                  handler:function()
                {
                treeEditContacter();
                }
                 } */
                 ]
           });

    // 当选中父节点时，让其子节点相应选中
    contacterTree.on('checkchange', function(node, checked) {
node.expand();
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.toggleCheck(checked);
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});
}, contacterTree);

    // 删除事件
    function treeDelContacter(){
    // 当右键点击删除时，先判断右键点击的是分组节点还是枝节点
    // 通过选择模型来得到右键点击的节点
    var selectModel = contacterTree.getSelectionModel();
         var node = selectModel.getSelectedNode();

         if(node.id == "treeContact"){
         // 右键根节点
         Ext.MessageBox.alert("提示","根节点是不允许删除的！");
         }else if(node.isLeaf() == true){
         // 右键联系人节点
         var flag = confirm("您确定要删除名为 :“"+node.text+" ”的联系人信息吗？");
     if(flag == true){
     location.href="<%=path%>/contacterManage.do?action=delContacters&strContacterId="+node.id+";";
     //alert("成功删除名为 :"+node.id+" 的联系人信息!");
     }
         }else{
         // 右键分组节点
         var flag = confirm("您确定要删除名为 :“"+node.text+" ”的分组信息吗？");
     if(flag == true){
     //alert("成功删除名为 :"+node.id+" 的分组信息!");
     location.href="<%=path%>/contacterManage.do?action=delContacterGroup&strGroupId="+node.id+";";
     }
         }
    }

    // 修改事件
/*     function treeEditContacter(){
    // 当右键点击删除时，先判断右键点击的是分组节点还是枝节点
    // 通过选择模型来得到右键点击的节点
    var selectModel = contacterTree.getSelectionModel();
         var node = selectModel.getSelectedNode();

         if(node.id == "treeContact"){
         // 右键根节点
         Ext.MessageBox.alert("提示","根节点是不允许修改的！");
         }else if(node.isLeaf() == true){
         // 右键联系人节点

         }else{
         // 右键分组节点

         }
    }  */
});

严重怀疑3楼的理解能力。什么叫单选都理解不了。发一段那么长的无用代码。单选这样实现：
在TreePanel 中增加这个监听
<code>
listeners : {
    checkchange : function(node,checked){
      if(checked){
         var checkedNodes = tree.getChecked();
         for(i=0;i<checkedNodes.length;i++){
           var checkeNode = checkedNodes[i];
           if(node.id!=checkeNode.id){
           checkeNode.getUI().checkbox.checked = false;
           checkeNode.attributes.checked = false;
           tree.fireEvent('check', checkeNode, false);
}
}
}
}
}
</code>

我的表结构有funcid(功能号),descript(描述),isdisp(是否显示为菜单),leaf(是否是叶子),pfuncid(上级功能号),disorder(显示顺序) 我用这个表数据做个extjs的树形复选框，怎么实现？最好有代码。。谢谢。。我的QQ 277011892

调试易

EXTJs中带复选框tree的问题，

解决方案 »