- 浏览: 40406 次
- 性别:
- 来自: 广州
文章分类
最新评论
extjs4下拉选择树,代码是从网上找到的。
控件源代码:
使用方法
返回数据:
服务端数据和平常一样
控件源代码:
Ext.define('Ext.tree.ComboTree',{ extend :"Ext.form.field.Picker", alias: 'widget.combotree', requires: ['Ext.form.*','Ext.tree.Panel'], rootText:this.rootText||'root', rootId:this.rootId||'0', rootVisible:this.rootVisible||false,//根节点是否可见 nodeParam:this.nodeParam||'id', treeUrl:this.treeUrl, //这里是点击树前加号须返回的JSON格式节点数据 multiSelect:this.multiSelect||false, fieldName:'category', useId:this.useId||true, //是否使用id域,如果不选择,则值直接使用Picker的value值 selectedIds:'', values:'', texts:'', editable:this.editable||true,//是否可编辑 leafOnly:this.leafOnly||true, //限定是否只能选择叶子节点 hiddenField:null, resetValues:function(){ if(this.hiddenField) this.hiddenField.setValue(''); this.values=''; this.texts=''; this.setValue(''); }, initComponent:function(){ var self = this; if(self.useId) self.hiddenField=Ext.create('Ext.form.field.Hidden',{id:self.fieldName+"Id",name:self.fieldName+"Id"}); //由于Picker本身的value对应的是显示的文本,所以这里我们新建了一个隐藏域,用来保存诸如id等值,而不是直接的文本值,在表单提交的时候,就可以直接使用这个值了 Ext.apply(self, { pickerAlign : "tl", name:self.fieldName }); self.callParent(); if(self.useId){ this.on('afterrender',function(){ self.ownerCt.add(self.hiddenField); },this); } }, createPicker : function() { var self = this; var aurl=self.treeUrl; if(self.multiSelect){ //这里增加了多选的功能,在后台返回的JSON数据中,应加上checked:true之类的属性 if(aurl.indexOf("?")==-1) aurl+="?multiSelect=true&selectedIds="+self.selectedIds; else aurl+="&multiSelect=true&selectedIds="+self.selectedIds; } if(self.leafOnly){ if(aurl.indexOf("?")==-1) aurl+="?leafOnly=true"; else aurl+="&leafOnly=true"; } var store = Ext.create('Ext.data.TreeStore', { proxy : { type : 'ajax', url : aurl }, nodeParam:self.nodeParam, root: { expanded: true , text: self.rootText, id:self.rootId, leaf:false }, autoLoad:true }); self.picker = new Ext.tree.Panel({ height : 300, autoScroll : true, floating : true, focusOnToFront : false, shadow : true, ownerCt : this.ownerCt, useArrows : true, store : store, rootVisible : self.rootVisible }); self.picker.on({ beforehide : function(p) { self.setValue(self.texts); if(self.useId) self.hiddenField.setValue(self.values); } , itemclick:function(view,record){ if(self.leafOnly){ if(record.get('leaf')) //这里限定只有叶子节点可以选择 setToValues(record); else{ record.expand(); } }else{ setToValues(record); } function setToValues(record){ if(!self.multiSelect){ self.values=record.get('id'); self.texts=record.get('text'); self.collapse(); }else{ var records = self.picker.getView().getChecked(), ids=[], names = []; Ext.Array.each(records, function(rec) { ids.push(rec.get('id')); names.push(rec.get('text')); }); self.values=ids.join(','); self.texts=names.join(','); } if(self.useId){ self.hiddenField.setValue(self.values); } self.setValue(self.texts); } } }); return self.picker; }, alignPicker : function() { var me = this, picker, isAbove, aboveSfx = '-above'; if (this.isExpanded) { picker = me.getPicker(); if (me.matchFieldWidth) { picker.setWidth(me.bodyEl.getWidth()); } if (picker.isFloating()) { picker.alignTo(me.inputEl, "", me.pickerOffset); isAbove = picker.el.getY() < me.inputEl.getY(); me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls+ aboveSfx); picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls+ aboveSfx); } } } });
使用方法
var tree = Ext.create('Ext.tree.ComboTree',{rootText:'Info Category',fieldLabel:'Category',treeUrl:'/category/listByParentId.do',rootVisible:true,editable:false});
返回数据:
JSONObject result = new JSONObject(); result.put("children",array);
服务端数据和平常一样
String categoryId = request.getParameter("categoryId"); String categoryName = request.getParameter("category");
发表评论
-
EXTJS4 Form表单中Combox取值与设置值问题
2013-11-25 21:54 2031extjs中combobox取值会取到显示值,取不到value ... -
javascript split用法
2013-11-21 22:17 0var array = picValue.split(':') ... -
extjs4使用google map
2013-11-20 23:36 1602首先引入JS <script src=&quo ... -
extjs4与FCKeditor整合
2013-11-19 23:25 915EXTJS4与FCKeditor整合: 1.自定义C ... -
ext工具栏分隔组件
2013-09-23 09:31 433工具栏组件有 ----------------------- ... -
ckeditor在EXTJS4.0里窗口被遮住的解决办法
2013-09-04 17:40 426Ext.WindowManager.s ... -
EXTJS CheckboxGroup重写setValue与getValue方法
2013-08-21 10:20 1288取到的值是:"1,2"这种形式 var ... -
JS引入时注意事项
2013-06-14 21:12 0引入EXTJS的JS文件时应该要用下面的写法 &l ... -
关于ext.from.BasicForm的errorReader
2010-12-09 10:36 1083由于公司的FORM提交都是返回JSON数据,现在有一个FORM ...
相关推荐
Extjs4下拉树菜单 ComboBoxTree 支持单选和多选并且支持展开选中指定节点的通用控件 在项目中已经成熟运用 值得收藏和运用
ExtJS4下拉树组件 ExtJS4下拉树组件
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
Extjs 下拉树 下拉多选树 支持多选 全选/全不选 下拉多选框
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
功能:extjs4 下拉菜单树 combobox+tree 支持单选多选等 收集两款,仅需要1分。
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
extjs下拉树
ExtJs4实现下拉树选择框ComboTree, 文档中包含代码。
简单的修改下Extjs 的引用路径 双击Index.html 就可以看到效果了。
Extjs4多选树,支持多选和单选,能够实现默认值选中,数据存放在json,里面有明确的提示信息。很适合初学者借鉴学习
extjs4 框架实现树形结构的下拉框,并支持多选、复选,项目中开发实际用到的,这里提供了前段的js代码,大家有用到的,可以进行参考。
extjs 树形下拉列表框,可以进行数据选择,数据回显。
使用方法: var comb = Ext.create('Ext.ux.ComboTree',{ name:'xzqh', dicName:'test', width : 270, fieldLabel : '行政区划', url:'getDic', all:true, labelWidth : 60, multiple:true ...
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
利用extjs6自带的treePicker插件,实现下拉树的效果
extjs下拉树,在网上找了很多,发现bug实在让人头大,干脆自己写了个下拉树组件,功能全面
自定义下拉树,你懂的,内附图和前后台源代码
NULL 博文链接:https://init-since.iteye.com/blog/2095766
NULL 博文链接:https://czpae86.iteye.com/blog/1336913