树形下拉框

hackbomb

浏览: 217165 次
性别:
来自: 上海

最近访客更多访客>>

181822498

zcediaos

土豆-.-

Bll

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT CSS JavaScript HTML PHP

<!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>

分享到：

带分页的表格 | 支持手写输入及联想功能的下拉框

2009-01-09 13:43
浏览 2591
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论