带checkbox框的树菜单例子

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" >
< title > Reorder TreePanel </ 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 >

</ head >
< body >
< script >


function lookupNode(_root,id){
     if (_root){
         var treeId = _root.attributes['id'];
         if (id == treeId){
             return _root;
        }
         var nodes = _root.childNodes;
         if (nodes.length == 0 ){
              return null ;
        }
         for ( var i = 0 ; i < nodes.length; i ++ ){
             if (nodes[i] != null ){
                 var xx = lookupNode(nodes[i],id);
            }
        }
         return xx;
    }
}

Ext.BLANK_IMAGE_URL = 'http: // localhost:8080/greatwall/script/ext/resources/images/default/s.gif';
function insertTreeNode(root,pid,nodeConfig){
     var pNode = lookupNode(root,pid);

     if (pNode == null ){
        root.appendChild( new Ext.tree.TreeNode(nodeConfig));
    } else {
        pNode.appendChild( new Ext.tree.TreeNode(nodeConfig));
    }
}

var pWinCmpId = null ;

Ext.onReady( function () {

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';

/* *****************下面开始Body内JavaScript代码输出*********************** */

function treeClick(node, e){

}

var sysFunClassTree_root = new Ext.tree.TreeNode({text: " Autos " ,draggable: false ,id: " source " ,checked: false });
insertTreeNode(sysFunClassTree_root,'',{ " text " : " Form控件 " , " leaf " : false , " id " : " A00001 " ,checked: false });
insertTreeNode(sysFunClassTree_root,'A00001',{ " text " : " checkbox控件 " , " pid " : " A00001 " ,id: " 000A01 " , " leaf " : false ,checked: false });
insertTreeNode(sysFunClassTree_root,'A00001',{ " text " : " comboBox控件 " , " pid " : " A00001 " ,id: " 000B01 " , " leaf " : false ,checked: false });
insertTreeNode(sysFunClassTree_root,'000B01',{ " text " : " radio控件 " , " pid " : " 000B01 " ,id: " 000C01 " , " leaf " : false ,checked: false });
insertTreeNode(sysFunClassTree_root,'000C01',{ " text " : " radio控件222 " , " pid " : " 000C01 " ,id: " 000C01x " , " leaf " : true ,checked: false });

var sysFunClassTree = new Ext.tree.TreePanel({
  border: true ,
  root: sysFunClassTree_root, rootVisible: true ,
  name:'sysFunClassTree',region:'center',width: 250 ,nodename:'tree',pidname:'pid',idname:'id',textname:'text',dataXml:' / tagsdemo / tree / data.xml',id:'sysFunClassTree'
});

sysFunClassTree.on( " click " , treeClick);
sysFunClassTree.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);
    });
}, sysFunClassTree);


var viewport_cdb32ddef82f42e3a11d965320b7d09e = new Ext.Viewport({
  layout:'border',
  items:[sysFunClassTree]
});

sysFunClassTree_root.expand();

// Add Tree Menu
sysFunClassTree.on('contextmenu', contextmenu, sysFunClassTree);

// 创建右键菜单
function contextmenu(node, e) {
    treeMenu = new Ext.menu.Menu( {
        id : 'treeMenu',
        items : [ new Ext.menu.Item( {
                text : '删除',
                iconCls : ' delete ',
                handler : clickDelHandler
            })]
    });

    coords = e.getXY();
    treeMenu.showAt([coords[ 0 ], coords[ 1 ]]);
}

function clickDelHandler(node, e) {
    alert(node.id);
}

/* *****************Body内JavaScript代码输出结束*********************** */
});
</ script >

< div id ="divTree" ></ div >
</ body >
</ html >

带checkbox框的树菜单例子

你可能感兴趣的:(带checkbox框的树菜单例子)