- 浏览: 3299776 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
ExtJS表单之下拉树
作者:zccst
一、数据源
二、展示
三、获取选中的值
版本一:
版本二:
另一个三级节点的实例
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
作者:zccst
一、数据源
var store_type = Ext.util.JSON.encode(o.store_type); var store_type_obj = eval( "(" + store_type + ")" ); setStoreTreeByNode(store_type_obj);
二、展示
Ext.QuickTips.init(); var storetree = new Ext.tree.TreePanel({ //el : "container", animate : true, title : "请点击选择", collapsible : true, enableDD : true, enableDrag : true, rootVisible : false, autoScroll : true, autoHeight : true, width : 150, lines : true }); // 根节点 var storeroot = new Ext.tree.TreeNode({ id : "root", text : "根节点", checked : false }); storetree.setRootNode(storeroot); //设置监听 storetree.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); }); }, storetree); function setStoreTreeByNode(store_type_obj){ var node = storeroot.appendChild(new Ext.tree.TreeNode({ text : '存储机型', allowDrag : false, checked : false })); for(var i = 0; i < store_type_obj.length; i++){ node.appendChild(new Ext.tree.TreeNode({ text : store_type_obj[i].model, allowDrag : false, checked : false })); } } //下拉树 var storeComboxWithTree = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, mode: 'local', triggerAction:'all', maxHeight: 240, tpl: "<tpl for='.'><div style='height:240px'><div id='storetree'></div></div></tpl>", selectedClass:'', onSelect:Ext.emptyFn, emptyText:'请选择机型...' }); storetree.on('click',function(node){ storeComboxWithTree.setValue(node.text); storeComboxWithTree.collapse(); }); storeComboxWithTree.on('expand',function(){ storetree.render('storetree'); });
三、获取选中的值
var s = storetree.getChecked(); var checked_s = new Array(); for (var j = 0; j < s.length; j ++){ checked_s.push(s[j].text); } //if(checked_s.length == 0){alert('选择不能为空');return false;} var str_s = checked_s.toString();
版本一:
var comboxWithTree = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, mode: 'local', triggerAction:'all', maxHeight: 200, tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>", selectedClass:'', onSelect:Ext.emptyFn }); var tree = new Ext.tree.TreePanel({ loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}), border:false, root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'}) }); tree.on('click',function(node){ comboxWithTree.setValue(node.text); comboxWithTree.collapse(); }); comboxWithTree.on('expand',function(){ tree.render('tree'); }); comboxWithTree.render('comboxWithTree');
版本二:
var comboxWithPanel = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, mode: 'local', triggerAction:'all', maxHeight: 200, tpl: '<div style="height:200px"><div id="panel"></div></div>', selectedClass:'', onSelect:Ext.emptyFn }); comboxWithPanel.render('comboxWithPanel'); var tree2 = new Ext.tree.TreePanel({ loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}), border:false, autoScroll:true, root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'}) }); var border = new Ext.Panel({ title:'面板title', layout:'fit', border:false, height :200, tbar:[{text:'确定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}], bbar:[{text:'确定二'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'查找二'}], items: tree2 }); comboxWithPanel.on('expand',function(){ border.render('panel'); });
另一个三级节点的实例
function setDepTreeByNode(obj){ rootnode = new Ext.tree.TreeNode({ text : '全部', allowDrag : false, checked : false }); deproot.appendChild(rootnode); //0级 var tmpDep = ""; var tmpPro = ""; var tmpSer = ""; var departnode = null; var productnode = null; var servicenode = null; for( var i = 0; i < obj.length; i++){ if(!tmpDep){ tmpDep = obj[i].department; tmpPro = obj[i].product; tmpSer = obj[i].service; } // 仅执行一次 if(departnode == null && productnode == null && servicenode == null){ departnode = new Ext.tree.TreeNode({ text : obj[i].department, allowDrag : false, checked : false }); productnode = new Ext.tree.TreeNode({ text : obj[i].product, allowDrag : false, checked : false }); servicenode = new Ext.tree.TreeNode({ text : obj[i].service, allowDrag : false, checked : false }); rootnode.appendChild(departnode); //一级 departnode.appendChild(productnode); //二级 productnode.appendChild(servicenode); //三级 continue;//第一轮循环结束 } // 追加二级节点 if(obj[i].department == tmpDep){ //追加三级节点 if(obj[i].product == tmpPro){ servicenode = new Ext.tree.TreeNode({ text : obj[i].service, allowDrag : false, checked : false }); productnode.appendChild(servicenode);//三级 tmpSer = obj[i].service; }else{ productnode = new Ext.tree.TreeNode({ text : obj[i].product, allowDrag : false, checked : false }); servicenode = new Ext.tree.TreeNode({ text : obj[i].service, allowDrag : false, checked : false }); departnode.appendChild(productnode); //二级 productnode.appendChild(servicenode); //三级 tmpPro = obj[i].product; tmpSer = obj[i].service; } }else{ //追加一级节点 departnode = new Ext.tree.TreeNode({ text : obj[i].department, allowDrag : false, checked : false }); productnode = new Ext.tree.TreeNode({ text : obj[i].product, allowDrag : false, checked : false }); servicenode = new Ext.tree.TreeNode({ text : obj[i].service, allowDrag : false, checked : false }); rootnode.appendChild(departnode); //一级 departnode.appendChild(productnode); //二级 productnode.appendChild(servicenode);//三级 //更新当前值 tmpDep = obj[i].department; tmpPro = obj[i].product; tmpSer = obj[i].service; } } }
select distinct * from (select department,product,service from service_list) a;
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
ExtJS ajax request 设置超时时间
2012-05-03 23:32 10022作者:zccst 查了一下资料,设置超时时间有好几种情况 ... -
ExtJS之GridPanel细分功能
2012-01-30 18:45 949zccst整理 二、 一、将结果分组展示 表格数据分组: ... -
ExtJS之EditorGridPanel
2011-12-28 18:01 7204作者:zccst 之前大多用Ext.grid.GridPan ... -
ExtJS正确的学习方式
2011-12-28 15:53 1204ExtJS与其他的技术稍微不同的是需要查手册,而不是从网上搜。 ... -
ExtJS三级联动菜单
2011-12-15 18:04 6055一、前端js代码 // JavaScript Docume ... -
ExtJS之Store
2011-11-09 18:17 20034据目前所知:Store至少分为两类,一个是SimpleStor ... -
ExtJS表单之一个实例
2011-11-08 14:32 5352作者:zccst 一个实例, ... -
ExtJS表单之复选框CheckboxGroup展示与取值
2011-11-08 14:23 53863版本一 复选框的值都是 ... -
ExtJS之xtype的意义
2011-11-02 14:21 1585xtype:在EXTJS的可视化组件部署中的一种机制,即通过指 ... -
ExtJS面板
2011-11-02 12:13 1396面板的定义与多种面板的区别 一、Panel var panel ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2011-11-02 11:48 991Ext中的get、getDom、getCmp、getBody、 ... -
ExtJS开发环境搭建
2011-06-20 14:38 1325需要注意的事项: 1,引入extjs不是引入ext-base ...
相关推荐
7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...
7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...
xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 基本组件 1. button - xtype: 'button', 描述: 普通按钮 2. splitbutton - xtype: 'splitbutton', 描述: 带下拉菜单的按钮 3. ...
国讯OA的一个强大之处就是在于它可以让系统在运作的过程中自动触发请求,并且还可以根据前一个请求的实际状况对下一个触发的请求进行智能选择。 6、分支选择流 根据上一步的选择,选择不同的分支进行流程执行。如...
-更新示例框架,增加手风琴控件和树控件的组合菜单(幻之达)。 -修正自动树节点ID的生成规则,防止页面中多个树控件产生的命名冲突。 -修正表格WindowField生成的脚本可能会出现类似x2未定义的错误(梦如人生)。 -...
-更新示例框架,增加手风琴控件和树控件的组合菜单(幻之达)。 -修正自动树节点ID的生成规则,防止页面中多个树控件产生的命名冲突。 -修正表格WindowField生成的脚本可能会出现类似x2未定义的错误(梦如人生)。 -...
下 用javascript操作asp.net label控件 外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript...
ExtJS 版本是大三《数据库编程》的课程设计,Vue 版本是工作后因个人兴趣编写的版本,如有不足之处敬请谅解。 Vue 版本的项目是一个很好的开发模板哦! `extjs`文件夹下的项目是一个基于 **ExtJS** 和 **SpringBoot...
无疆界 之 从表格里拖到树上 3. 歌颂吧!只为了树也要学ext。 3.1. 真的,我是为了树,才开始学ext的。 3.2. 传统是先做出一棵树来。 3.3. 超越一个根 3.4. 你不会认为2.0里跟1.x是一样的吧? 3.5. 这种装配...
无疆界 之 从表格里拖到树上 3. 歌颂吧!只为了树也要学ext。 3.1. 真的,我是为了树,才开始学ext的。 3.2. 传统是先做出一棵树来。 3.3. 超越一个根 3.4. 你不会认为2.0里跟1.x是一样的吧? 3.5. 这种装配树...
无疆界 之 从表格里拖到树上 2.12. 大步流星,后台排序 2.13. grid与右键菜单 3. 歌颂吧!只为了树也要学ext。 3.1. 真的,我是为了树,才开始学ext的。 3.2. 传统是先做出一棵树来。 3.3. 超越一个根 3.4. 对tree...
-更新示例框架,增加手风琴控件和树控件的组合菜单(幻之达)。 -修正自动树节点ID的生成规则,防止页面中多个树控件产生的命名冲突。 -修正表格WindowField生成的脚本可能会出现类似x2未定义的错误(梦如人生)。 -...
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章...