下拉树~不断、持续完善中~
来源:互联网 发布:小苍零食淘宝店 编辑:程序博客网 时间:2024/06/10 16:19
其实,这段时间虽然忙碌,但是正是忙碌让我对ext有更深的认识,对前端、后端有了进一步的认识~
分享一段代码,其实建议看到的亲不要copy使用,真正深入了解它,才是根本。
一段代码背后的东西,才是真正要学习的东西~
/** * 原生Ext扩展插件 */Ext.define('Ext.ux.comboBoxTree',{extend:'Ext.form.field.Picker',width:210,//默认宽度210/** * 重写Ext.form.field.Picker的initComponent方法 */initComponent:function(){this.callParent();this.addEvents('treeselect', 'selectcheck');var cfg = this.initialConfig,root = cfg.root,tree = cfg.tree;//store-root默认配置var rootBasic ={ expanded: true, children:[]}; var treeBasic = {floating : true,height:300,//tree默认高度300autoScroll:true,focusOnToFront : false,useArrows : true,rootVisible: false}; Ext.apply(rootBasic,root);var me=this,store = Ext.create('Ext.data.TreeStore', {root: rootBasic}); treeBasic.store = store; Ext.apply(treeBasic,tree);this.picker = Ext.create('Ext.tree.Panel', treeBasic); this.picker.on('itemclick',function(self,rec){ if(!rec.get('checked')){ var flag = me.fireEvent('treeselect', rec); if(flag){ me.setValue(rec.get('id')); me.collapse(); } }else{ rec.set('checked', !rec.get('checked'));// me.fireEvent('checkchange', record, record//.get('checked')); //... } });},/** * 得到picker * @return {Ext.tree.Panel} */getPicker: function() {var me = this;me.picker.ownerCt = me.ownerCt;//添加了ownerCt属性.return me.picker || (me.picker = me.createPicker());},/** * 设置值 * @param {Array/String/Number} id */setValue:function(id){if (!id) {//渲染时没有值this.setRawValue('');}else{var _ids = id.toString().split(',');var texts=[],ids=[],store=null;for(var i=0,len=_ids.length;i<len;i++){var _id = _ids[i];if(null==store){store = this.picker.getStore();}var node = store.getNodeById(_id);if(node){texts.push(node.get('text'));ids.push(node.get('id'));if(node.get('checked')){node.set('checked',true);node.commit(true);}}}this.values = ids.join(',');this.setRawValue(texts.join(','));}},/** * 得到值 * @return {String} ids 值集合 */getValue:function(){ return this.values;}});
使用样例(不全,在完善和优化扩展类...):
var picker = Ext.create('Ext.ux.comboBoxTree',{ isLeafSelect:true,//添加新的配置属性 //picker :panel, root :{expanded: true,children: [{ id:'1', text: "detention", leaf: true },{ id:'2',text: "homework", expanded: true, children: [{ id:'3',text: "book report", leaf: true },{ id:'4',text: "alegrbra", leaf: true}] },{ id:'5',text: "buy lottery tickets", leaf: true },{ id:'6', text: "detention", leaf: true },{ id:'7',text: "homework", expanded: true, children: [{ id:'8',text: "book report", leaf: true },{ id:'9',text: "alegrbra", leaf: true}] },{ id:'10',text: "buy lottery tickets", leaf: true },{ id:'11', text: "detention", leaf: true },{ id:'12',text: "homework", expanded: true, children: [{ id:'13',text: "book report", leaf: true },{ id:'14',text: "alegrbra", leaf: true}] },{ id:'15',text: "buy lottery tickets", leaf: true },{ id:'16', text: "detention", leaf: true },{ id:'26',text: "homework", expanded: true, children: [{ id:'36',text: "book report", leaf: true },{ id:'46',text: "alegrbra", leaf: true}] },{ id:'56',text: "buy lottery tickets", leaf: true },{ id:'66', text: "detention", leaf: true },{ id:'76',text: "homework", expanded: true, children: [{ id:'86',text: "book report", leaf: true },{ id:'96',text: "alegrbra", leaf: true}] },{ id:'106',text: "buy lottery tickets", leaf: true },{ id:'116', text: "detention", leaf: true },{ id:'126',text: "homework", expanded: true, children: [{ id:'136',text: "book report", leaf: true },{ id:'146',text: "alegrbra", leaf: true}] },{ id:'156',text: "buy lottery tickets", leaf: true }] },//store配置 tree:{ },//树形配置 renderTo:Ext.getBody()}); picker.on('treeselect',function(rec){ if(picker.isLeafSelect){ if(rec.get('leaf')==true){ console.log(rec); }else{ return false; } }else{ return false; } });});
至于这段代码都是干什么的~呵呵,就是做个记录,具体是什么,暂时让自己知道吧。毕竟水平太差,讲还不如不讲~以免误人子弟。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
很感谢团队,很多东西一点点领悟,心里也踏实些许~记录今天,有不一样的感觉~。
- 下拉树~不断、持续完善中~
- 持续集成(施工完善中)
- java监听-持续完善中
- Timesten错误整理(持续完善中)
- 自动拨号的服务 不断修改完善中......
- 软件的黄金法则(持续完善中)
- 亿能 软件测试 解决方案,持续完善中。。。
- 前端工程师必备-网址篇(持续完善中)
- 视觉设计人员必备-网址篇(持续完善中)
- Symfony + jQuery 建立简单应用程序(持续完善中)
- 前端工程师必备-网址篇(持续完善中)
- SpringMVC+Spring+Mybatis+freemark+bootstrap(持续更新完善中)
- javascript 中的 this 分类详解(持续完善中...)
- 编辑器工具--通用编辑器工具(持续完善中)
- Activity Action(持续完善)
- 80X86常用汇编指令集(不断补充完善中)
- 二叉树(完善中)
- 怎样持续不断的学习~~
- sja1000 CAN控制器波特率计算方法详解
- 读《数据挖掘技术(第三版)》-应用于市场营销,销售与客户关系管理 有感
- 算法:最长递增子序列、最长公共子串
- 省赛 双线程dp
- _com_util::ConvertBSTRToString 连接错误
- 下拉树~不断、持续完善中~
- 二叉树
- poj 3349 snowflake 哈希表
- Java对象创建方式及JVM对字符串处理
- 回文字符串
- Java学习笔记(AWT组件 之 按钮)
- Java数据类型与各数据库类型对应一览表
- android学习笔记---55_frame动画的实现,Java技术qq交流群:JavaDream:251572072
- 在日常工作中应用看板