`
wjm0729
  • 浏览: 15386 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

自己来封装Ext组件6--SteelComboTree

 
阅读更多

 

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

声明一下下:

由于这些东西是我刚写好就贴上来的,没怎么详细的测试过,有BUG那是必须的,这里仅起到抛砖引玉的作用

如果有什么问题,大家可以联系我 wjm_0729@yahoo.cn  或直接评论, 谢谢!!

文章中后端技术是用的  Nutz  http://nutzam.com/  ---  除SSH之外的另一种选择  (打个小广告,哈哈!!)

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

 

一个用Tree渲染的Combobox

 

其实这个是本人在网上看到的,顺便也记录在这里了


 

配置代码如下:

 

new Ext.ComboBoxTree({
	renderTo:"cbt",
	treeUrl:"lib/js/form/ComboBoxTree.json",
	editable:false,
	rootText:"选择公司",
	valueField:"com",
	displayField:"_com",
	callback:function(id,text){
		alert(id);
		alert(text);
	}
});

 

源码如下:

/**
 * 下拉列表选择树
 * <br>
 * 依赖EXTJS3版本
 * @class Ext.SteelComboTree
 * @extends Ext.form.ComboBox
 * @author yongtree 
 */
Ext.SteelComboTree = Ext.extend(Ext.form.ComboBox, {
    /**
     * 回调函数,用于传递选择的id,text属性
     * 
     * @type
     */
    callback : Ext.emptyFn,
    store : new Ext.data.SimpleStore({
                fields : [],
                data : [[]]
            }),
    editable : this.editable||false,
    mode : 'local',
    fieldLabel:this.fieldLabel||"",
    emptyText : this.emptyText||"请选择",
    allowBlank : this.allowBlank||true,
    blankText : this.blankText||"必须输入!",
    triggerAction : 'all',
    maxHeight : 200,
    anchor : '95%',
    displayField : 'text',
    valueField : 'id',
    tpl : '',
    selectedClass : '',
    onSelect : Ext.emptyFn,
    /**
     * 根的名字
     * 
     * @type String
     */
    rootText : this.rootText||'root',
    /**
     * 树的请求地址
     * 
     * @type String
     */
    treeUrl : this.treeUrl,
    tree : null,
    initComponent : function() {
		this.tpl = "<tpl for='.'><div style='height:200px'><div id='steel-'"+this.getId()+"></div></div></tpl>";
        this.tree = new Ext.tree.TreePanel({
            height : 200,
            scope : this,
            autoScroll : true,
            split : true,
            root : new Ext.tree.AsyncTreeNode({
                        expanded : true,
                        id : '_oecp',
                        text : this.rootText
                    }),

            loader : new Ext.tree.TreeLoader({
                        url : this.treeUrl

                    }),
            rootVisible : true
            });
        var c = this;
        /**
         * 点击选中节点并回调传值
         */
        this.tree.on('click', function(node) {
                    if (node.id != null && node.id != '') {
                        if (node.id != 'root'){
                            c.setValue(node.text);
                            c.callback.call(this, node.id, node.text);
                            c.collapse();
                        } else {
                            Ext.Msg.alert("提示", "此节点无效,请重新选择!")
                        }

                    }
                })

        this.on('expand', function() {
                    this.tree.render('steel-'+this.getId());
                    this.tree.expandAll();
                });

        Ext.SteelComboTree.superclass.initComponent.call(this);
    }
});
Ext.reg('steelcombotree', Ext.SteelComboTree);

 

  • 大小: 12.6 KB
分享到:
评论

相关推荐

    封装ElementUI组件el-tree

    在给定的标题"封装ElementUI组件el-tree"中,我们聚焦于`el-tree`组件的封装,这通常是为了提高代码复用性、简化使用过程以及统一项目中的样式和行为。 `el-tree`是ElementUI中的树形控件,用于展示层次结构的数据...

    ext-cn-js-beta

    - **组件模型**:EXT JS的核心是组件化,它将页面元素抽象为组件,每个组件都有自己的属性、事件和方法,可以灵活组合和扩展。 - **布局管理器**:EXT JS提供了多种布局方式,如Fit、Border、Form、Table等,适应...

    EXT-In-FirstStep

    - EXT提供了便捷的方法来选择和操作多个DOM节点,增强了对页面元素的控制能力。 #### 2.3 响应事件 - 通过EXT,可以轻松绑定和处理DOM事件,使得响应用户交互更加灵活高效。 ### 使用Widgets #### 3.1 MessageBox ...

    vue之封装自己的日历组件-高级篇视频

    vue之封装自己的日历组件-高级篇视频 封装自己的组件

    中兴PCB元件封装库命名规范-IPC7351

    ### 中兴PCB元件封装库命名规范-IPC7351 #### 一、概述 本文档详述了中兴通讯股份有限公司发布的《印制电路板设计规范》中关于SMD(Surface Mount Devices,表面贴装元件)元器件封装库的尺寸要求与命名规范。该...

    type-c 6pin的硬件封装

    标题中的“Type-C 6pin的硬件封装”指的是USB Type-C接口的一种常见配置,它具有六个引脚。这种接口在现代电子设备中广泛使用,因为它支持数据传输速度高、正反可插,并且能提供电源。USB Type-C的6pin配置通常涉及...

    vue 封装grid 布局-表单.zip

    在IT行业中,Vue.js是一个非常流行的...通过这个项目,开发者不仅可以学习到如何利用Vue.js进行组件封装,还能掌握如何集成UI库来优化用户体验,以及如何实现国际化功能。这有助于提升开发者在实际项目中的技能和效率。

    Ext框架简介-Ext框架简介

    Ext 框架的核心组件包括adapter、build、docs、examples、resources、source 等。adapter 负责将里面提供第三方底层库(包括 Ext 自带的底层库)映射为 Ext 所支持的底层库。build 是压缩后的 ext 全部源码。docs 是...

    Ext API详解--笔记

    6. **Ext.EventManager, EventObject, CompositeElement, CompositeElementLite**: `EXT核心API详解(五)-Ext.EventManager EventObject CompositeElement CompositeElementLite.txt`阐述了事件管理和复合元素的...

    slide-ruler二次封装后的组件

    总的来说,"slide-ruler二次封装后的组件"是一个针对原生slide-ruler组件进行定制化开发的产品,它能够更好地适应特定项目的需求,提供更加个性化的用户体验。通过深入理解和利用"csRuler"文件,开发者可以轻松地将...

    el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf

    在给定的文件中,展示了如何利用Element UI库来封装`el-table`和`el-form`组件,这两个组件在管理系统的界面中非常常见,特别是用于数据展示和表单提交。 首先,我们关注`el-form`组件的封装。`el-form`用于创建...

    Python库 | git_ext-0.6.0-py2-none-any.whl

    例如,当用户通过前端提交代码更改时,后端可以利用`git_ext`来处理这些更改并更新远程仓库。 ### 总结 `git_ext-0.6.0-py2-none-any.whl`是一个面向Python 2的Git操作库,为开发者提供了一种更便捷的方式来处理...

    【Vue2 + ElementUI】分页el-pagination 封装成公用组件

    总结来说,封装`el-pagination`为公用组件涉及的主要步骤有:创建新组件,引入并配置el-pagination,定义并接收props,处理事件,以及设置和使用语言包。通过这种方式,我们可以实现分页组件的复用,同时支持多语言...

    基于element组件库封装的动态表单组件

    "基于element组件库封装的动态表单组件"就是这样一个解决方案,它针对Vue3进行了优化,旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件,通常用于处理复杂的表单...

    PyPI 官网下载 | abjad-ext-tonality-3.0.0a0.tar.gz

    今天,我们要探讨的是一个名为"abjad-ext-tonality"的Python库,它在PyPI(Python Package Index)官网上可以下载到的最新版本为3.0.0a0,封装在一个名为"abjad-ext-tonality-3.0.0a0.tar.gz"的压缩包中。...

    AD封装库SC-70封装

    SC-70-6封装,6引脚

    SOT-23-6 封装尺寸图

    ### SOT-23-6 封装尺寸详解 #### 一、SOT-23-6 封装概述 SOT-23-6(Small Outline Transistor Package)是一种小型化封装技术,广泛应用于各类电子元件如晶体管、运算放大器等。这种封装形式以其紧凑的设计和良好...

    h264封装flv-----flv-muxer

    6. **写入文件**:将封装后的视频和音频数据块按照时间顺序写入到FLV文件中。 7. **结束标签**:当所有数据写入后,flv-muxer会添加一个结束标签,标记文件的结束。 通过以上步骤,flv-muxer完成了H.264视频流与...

    USB TYPE-C母座沉板 6P allegro封装(.dra格式)

    至于压缩包内的文件" typeC0-6p-chengban",这可能是该USB Type-C母座沉板6P设计的CAD图纸或布局文件,可能包含了详细的电路板布线和组件位置信息,供工程师在实际生产或组装过程中参考使用。 总的来说,这个USB ...

Global site tag (gtag.js) - Google Analytics