树形下拉框

最新推荐文章于 2024-07-23 17:35:39 发布

iteye_11428

最新推荐文章于 2024-07-23 17:35:39 发布

阅读量322

点赞数

分类专栏： Ext 文章标签： EXT CSS JavaScript HTML PHP ViewUI

本文链接：https://blog.csdn.net/iteye_11428/article/details/81677351

版权

Ext 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
Ext.onReady(function(){
     Ext.QuickTips.init();
            var comboWithTooltip = new Ext.form.ComboBox({
                store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
                editable:false, //禁止手写及联想功能
                mode: 'local',
                triggerAction:'all',
                maxHeight: 200,
                tpl: '<div id="tree" style="height:200px"></div>', //html代码
                selectedClass:'',
                onSelect:Ext.emptyFn,
                emptyText:'请选择...',
                renderTo: 'comboxtree'
            });
            //创建树形结构
            var tree = new Ext.tree.TreePanel({
                border:false,
                autoScroll:true,
                animate:true,
                autoWidth:true,
                autoHeight:true,
                enableDD:true,
                containerScroll: true,
                loader: new Ext.tree.TreeLoader({
                    dataUrl:'treedata.php'
                })
            });

            //树的点击时间
            tree.on("click",function(node,e)
            {
                    if(node.isLeaf()){
                         e.stopEvent();//非叶子节点则不触发
                    }
                    comboWithTooltip.setValue(node.text);//设置option值
                    comboWithTooltip.collapse();//隐藏option列表
                    alert(comboWithTooltip.getValue());//打印option值
            });
            var root = new Ext.tree.AsyncTreeNode({
                    text: '根节点',                  //节点名称
                    draggable:false,                  //是否支持拖动
                    id:'0101103'                      //节点id
            });

            tree.setRootNode(root);
            //展开option时生成树
            comboWithTooltip.on('expand',function(){
            tree.render('tree');
            //tree.expandAll();//自动展开树
            });
});
</script>
<div id="comboxtree"></div>
</body>
</html>