`
wjm0729
  • 浏览: 15354 次
  • 性别: 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等,适应...

    基于naive-ui封装的一些组件库,表单、上传、表格等

    基于naive-ui封装的一些组件navie-ui-formnaive-ui-uploadnaive-ui-table

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

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

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

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

    type-c 6pin的硬件封装

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

    PyPI 官网下载 | djorm-ext-pgfulltext-0.4.0.tar.gz

    这个资源的全名揭示了它的主要功能和版本信息,即djorm-ext-pgfulltext库的0.4.0版本,封装在tar.gz压缩格式中。 djorm-ext-pgfulltext是一个专门为Python Django框架设计的扩展库,其核心目标是为Django应用程序...

    Ext框架简介-Ext框架简介

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

    LQFP-48 封装尺寸图ST-48.pdf

    LQFP-48封装是电子行业中常见的一种封装方式,主要应用在集成电路封装领域,LQFP是“Low Profile Quad Flat Package”的缩写,翻译成中文为“低剖面四平面封装”,48表示该封装类型具备48个引脚。LQFP封装因其具有很...

    vue 封装grid 布局-表单.zip

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

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

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

    元件封装尺寸大全---

    TapingSOP封装是指通过带状包装的SOP封装组件,这种封装方式便于自动化装配线上的拾取和放置操作,提高了生产效率。 #### TO-92封装: **TO-92、TO-92L、TO-92M、TO-92NL、TO-92SP:** TO-92封装是一种常用的晶体...

    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"的压缩包中。...

    Type-C、Micro USB接口封装及3D模型

    在电子设备领域,接口是设备之间传输数据的关键部分。...因此,熟悉这两种接口的封装和3D模型对于硬件工程师来说是非常必要的。通过掌握这些知识,你可以更好地理解和设计符合现代需求的电子产品。

    SOT-23-6 封装尺寸图

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

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

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

Global site tag (gtag.js) - Google Analytics