下拉树~不断、持续完善中~

来源:互联网 发布:小苍零食淘宝店 编辑:程序博客网 时间: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;  }  });});

至于这段代码都是干什么的~呵呵,就是做个记录,具体是什么,暂时让自己知道吧。毕竟水平太差,讲还不如不讲~以免误人子弟。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

很感谢团队,很多东西一点点领悟,心里也踏实些许~记录今天,有不一样的感觉~。











原创粉丝点击