| 树形下拉框 |
| 2008-05-04 | |
|
我们可以自己扩展ext的树形下拉框，但是这样感觉比较麻烦，这里提供一种简单的方法，轻松实现树形下拉框。 在线体验：http://www.extshow.com/sysdemo/js/comboboxDemo2/ 下载实例：http://www.extshow.com/sysdemo/js/comboboxDemo1/comboboxDemo2.rar 本实例不含ext库，请自行添加 <!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> |
| < 上一篇 | 下一篇 > |
|---|