extjs 2.0 下拉树（combo+tree） - 分享推动发展- 李飞飞- JavaEye技术网站企业库|免费b2b网站

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>tree.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="/html/js/ext2/resources/css/ext-all.css" id="cssfile"/>
    <script type="text/javascript" src="/html/js/ext2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/html/js/ext2/ext-all.js"></script>

    <script type="text/javascript">
/**
tree demo 1 异步树
组成:
    1.节点
       a.普通节点
       b.根节点
       c.默认属性 id text leaf children icon

    2..树加载器
    3.树容器
    4.事件
    5.渲染
**/
Ext.onReady(function() {
    var comboHidden = new Ext.form.Hidden({
        name:'comboHidden',
        value:''
    })
    var comboxWithTree = new Ext.form.ComboBox({
    store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
    editable:false,
    mode: 'local',
    triggerAction:'all',
    maxHeight: 200,
    height:500,
    tpl: "<div id='tree'></div>",
    selectedClass:'',
    value:'',
    onSelect:Ext.emptyFn
});
comboxWithTree.render('comboxWithTree');

    var opRoot = new Ext.tree.AsyncTreeNode({
        id:'1',
        text:'root'
    });
    //与后台通讯的加载器
    var loader = new Ext.tree.TreeLoader({
        dataUrl: '/organizationAction.do',
        baseParams:{
            method:'getTree',
            pId:''
        }
    });
    //树容器
    var opTree = new Ext.tree.TreePanel({
        anchor : '95%',
        frame : false,
        width:200,
        height:400,
        animate : false,
        rootVisible : true,
        autoScroll : true,
        loader : loader, //之前定义的加载器
        root : opRoot //之前定义的根节点
    });
    //加载之前所触发的事件
    opTree.loader.on("beforeload", function(treeLoader, node) {
        loader.baseParams.pId = node.attributes.id;
    });
    //树节点点击事件
    opTree.on('click',function(node) {
        comboxWithTree.setValue(node.attributes.text);
        comboHidden.setValue(node.attributes.id);
        comboxWithTree.collapse();
        alert(comboHidden.getValue());
    });
    comboxWithTree.on('expand',function(){
        opTree.render('tree');
        opTree.root.reload();
    });

});
    </script>
</head>
<body>
      <div id='comboxWithTree'>
      </div>
</body>
</html>

{zx1}评论