extjs tree下拉列表_EXTJS下拉树ComboBoxTree参数提交及回显方法

怼烎@ 2022-11-03 10:34 14阅读 0赞

http://blog.csdn.net/wjlht/article/details/6085245

使用extjs可以构造出下拉数，但是不方便向form提交参数，在此，笔者想到一个办法，很方便ComboBoxTree向form提交。

原理：

在form中增加一个隐藏的字段，当在comboBoxTree中选定值后自动在隐藏字段中赋值。

为实现此方法，需要重载comboBoxTree中collapse事件方法。

Ext.ux.ComboBoxTree = function()\{

this.treeId = Ext.id()+'-tree';

this.maxHeight = arguments\[0\].maxHeight || arguments\[0\].height || this.maxHeight;

this.tpl = new Ext.Template('');

this.store = new Ext.data.SimpleStore(\{fields:\[\],data:\[\[\]\]\});

this.selectedClass = '';

this.mode = 'local';

this.triggerAction = 'all';

this.onSelect = Ext.emptyFn;

this.editable = false;

this.selectNodeModel = arguments\[0\].selectNodeModel || 'exceptRoot';

Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments);

\}

Ext.extend(Ext.ux.ComboBoxTree,Ext.form.ComboBox, \{

expand : function()\{

Ext.ux.ComboBoxTree.superclass.expand.call(this);

if(!this.tree.rendered)\{

this.tree.height = this.maxHeight;

this.tree.border=false;

this.tree.autoScroll=true;

if(this.tree.xtype)\{

this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype);

\}

this.tree.render(this.treeId);

var combox = this;

this.tree.on('click',function(node)\{

var isRoot = (node == combox.tree.getRootNode());

var selModel = combox.selectNodeModel;

var isLeaf = node.isLeaf();

if(isRoot && selModel != 'all')\{

return;

\}else if(selModel=='folder' && isLeaf)\{

return;

\}else if(selModel=='leaf' && !isLeaf)\{

return;

\}

combox.setValue(node);

combox.collapse();

\});

var root = this.tree.getRootNode();

if(!root.isLoaded())

root.reload();

\}

\},

setValue : function(node)\{

var text = node.text;

this.lastSelectionText = text;

if(this.hiddenField)\{

this.hiddenField.value = node.id;

\}

Ext.form.ComboBox.superclass.setValue.call(this, text);

this.value = node.id;

\},

collapse:function()\{

Ext.ux.ComboBoxTree.superclass.collapse.call(this);

document.getElementById("myhiddencomboboxtree").value = this.getRawValue();

\},

getValue : function()\{

return typeof this.value != 'undefined' ? this.value : '';

\}

\});

Ext.reg('combotree', Ext.ux.ComboBoxTree);

红色部分就是增加的重载代码，作用是当下拉数收起后，将id为myhiddencomboboxtree的隐藏字段赋值，在form中添加该隐藏字段就可以提交参数了。

添加该隐藏字段代码：

至于向comboBoxTree赋值，则在javascript中直接调用函数comboBoxTree.setValue(),例如：

comboBoxTree.setValue(\{id:'0',text:'新闻类型'\})

至此，comboxTree的传值和回显就全部解决了，大家就可以在项目中使用comboBoxTree来显示下拉树了。对于在需要将类型或单位无限级划分的地方比较适用。

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 下拉回显

var isEnable=$("isEnable").val();//获取回显的值, console.log("isEnable---"+isEnable)

水深无声/ 2023年02月23日 12:13/ 0 赞/ 18 阅读

相关 extjs tree下拉列表_EXTJS下拉树ComboBoxTree参数提交及回显方法

http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数，但是不方便向form提交参数，在此，笔者

怼烎@/ 2022年11月03日 10:34/ 0 赞/ 15 阅读

相关 Layui 动态下拉列表回显

HTMl代码 <div class="layui-form-item"> <label class="layui-form-lab

Love The Way You Lie/ 2022年10月31日 00:49/ 0 赞/ 30 阅读

相关 ExtJS4 combobox下拉框实现

效果图： ![Center][] 源码： \{ xtype: "combobox", padding:10, fieldLabel: "类别<fo

今天药忘吃喽~/ 2022年09月25日 04:28/ 0 赞/ 217 阅读

相关 Extjs之多选下拉框（MultiSelect）

![Center][] 扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为： if ('function' !== typeof Reg

拼搏现实的明天。/ 2022年08月25日 11:58/ 0 赞/ 406 阅读

相关 Extjs 下拉框

刚刚熟练了easyui控件的使用，又开始了现在的这个项目。这个项目是个半成品，前端使用的是Extjs控件，jsp中没有代码，就引用了很多的js。。。于是乎有种不知所措了呀。

末蓝、/ 2022年08月12日 02:59/ 0 赞/ 284 阅读

相关 Extjs 下拉框没有数据

Extjs框架的下拉框动态加载数据时不显示数据。 1，返回结果的键值和下拉框定义的不一致如下定义的下拉框值为value，显示为text ![C

末蓝、/ 2022年08月10日 12:42/ 0 赞/ 260 阅读

相关 Extjs comboboxtree

Extjs5.1版本，由于版本之间的差异过大，导致3.2上的ComboTree组件在5.1上用不了。虽说在网上能找到一些可用的ComboboxTree组件，但是功

妖狐艹你老母/ 2022年08月07日 17:50/ 0 赞/ 210 阅读

相关基于layui的下拉列表的数据回显

静态网页+layui渲染 html代码 <div class="layui-form-item"> <label class="layui-fo

刺骨的言语ヽ痛彻心扉/ 2022年04月18日 01:24/ 0 赞/ 701 阅读

相关 ExtJS ComboBox 下拉列表详细用法

原文转自[起飞网][Link 1]：[http://www.qeefee.com/article/000171][http_www.qeefee.com_article_000

曾经终败给现在/ 2021年09月14日 10:12/ 0 赞/ 638 阅读