`

Extjs combox动态加载数据自定义控件

阅读更多
通过前面的资料,我需要做一个加载部门的领导的combox,而且用到很多地方,于是自定义了一个combox组件代码如下:

LeaderCombox = Ext.extend(Ext.form.ComboBox, {
   fieldLabel : 'Label',
   fieldLabel : "审核人",
   width : 135,
   mode : 'local', // 直接从本地获得数据(已通过nativeStore.load()将数据加载到本地,不需要用
       // remote 再从服务器获取)
   name : "leader",
   // hiddenName : "enativeplace", //通过隐藏着值将value的值传提交到后台
   valueField : 'id',
   displayField : 'name',
   triggerAction : "all", // 设置下拉选择,如果没设置,选中一个之后,不能再重选其他的选项
   editable : false,
   emptyText : "请选择审核人..",
  url:null,
   initComponent : function() {
    var store = new Ext.data.Store({
     scope:this,
       proxy : new Ext.data.HttpProxy({
                scope:this,
          url : this.url
         }),
       reader : new Ext.data.ArrayReader({}, [{
            name : 'id'
           }, {
            name : 'name'
           }])

      })

    store.load();
    this.store = store;
    LeaderCombox.superclass.initComponent.call(this);
   }
});

使用的时候只需要如下方式即可,这样在每个需要的地方调用即可,很方便

new LeaderCombox({url:'combox.jsp'})

combox。jsp返回的数据形式如下:

[ ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']]



分享到:
评论

相关推荐

    Extjs之旅-combox之远程加载数据

    本篇我们将深入探讨“Extjs之旅”中的一个关键组件——Combox(组合框),特别是其远程加载数据的特性。 Combox在ExtJS中是一个非常灵活的控件,它可以看作是下拉列表和文本输入框的结合体,用户可以输入文本搜索,...

    Extjs 动态加载树

    标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题,主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库,常用于开发富客户端应用。动态加载树(Dynamic ...

    弥补ExtJs CheckboxSelectionModel不能级联的自定义控件

    在IT行业中,ExtJS是一个...对于那些需要在ExtJS应用中处理层级数据的开发者来说,这个自定义控件无疑是一个非常实用的工具。通过理解和使用这样的组件,开发者可以提高应用的用户体验,使得层级数据的管理更加便捷。

    extjs自定义控件

    - **配置与数据绑定**:可以为实例设置配置项,或者通过`bind`或`set`方法动态改变控件状态。 5. **最佳实践与优化** - **避免重复造轮子**:在创建自定义控件前,检查ExtJS官方文档,确保没有现成的组件能满足...

    Extjs动态加载菜单

    动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...

    Extjs4.2 动态加载项目(权限模块)

    在“Extjs4.2 动态加载项目(权限模块)”中,动态加载主要体现在两个方面:一是对代码的懒加载,二是针对权限控制的动态加载。 1. **代码懒加载**:在大型应用中,所有类一次性加载可能会导致页面加载速度变慢。通过...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是两个关键的组件,它们支持动态加载本地数据,提高了用户体验。理解这两个组件的工作原理和如何利用`Store`、`Ajax`、`TreeStore`进行数据加载,是EXTJS开发中的重要...

    Extjs3动态加载js源码

    在ExtJS 3中,虽然没有像ExtJS 4那样内置的动态加载机制,但可以通过自定义实现来达到类似的效果。"Extjs3动态加载js源码"描述的应该是一个开发者为ExtJS 3定制的动态加载管理器。这个管理器允许在运行时根据需要...

    ExtJS构造动态异步加载

    本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构,结合AJAX技术实现JSON数据的高效传输。 首先,我们要理解什么是动态异步加载。在传统的网页开发中,如果一次性加载所有数据,可能会导致页面加载速度慢,...

    ExtJs 实现动态加载grid完整示例

    在ExtJs中,动态加载Grid是一种常见的数据展示方式,它允许用户在需要时按需加载数据,而不是一次性加载大量数据,提高应用性能和用户体验。在本示例中,我们将探讨如何使用Ext3.3实现这一功能。 首先,我们来看...

    EXTJS 自定义combo控件

    xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法

    extjs tree 异步加载树型

    异步加载树型是 ExtJS Tree 的一个重要特性,允许只在需要时动态加载子节点,从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现,只有当用户展开一个节点时,才会向服务器请求该节点的子节点数据...

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...

    ExtJs5 日期自定义控件 精确到时分秒

    该代码仅适用于ExtJs5.x, 使用方法: 在Extjs5.x.js文件后引入以下两文件,注意顺序和路径: 例如: <script type="text/javascript" src="ext/5.1/ext-all-debug.js"></script> ${src}/DateTimePicker.js"> ${src...

    extjs日期+时间控件

    在ExtJS中,日期和时间控件是非常常用的功能,尤其在处理数据输入和展示时。本文将深入探讨基于ExtJS 4.1版本的日期时间控件及其相关知识点。 1. **ExtJS 4.1**:这是ExtJS的一个主要版本,发布于2012年,提供了...

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....

    extjs实现动态树加载菜单

    动态树加载菜单是 ExtJS 中一种常见且实用的功能,它允许用户在需要时按需加载树节点,从而提高应用性能,减少初次加载时的数据量。 动态树加载,也称为懒加载或按需加载,是指在用户滚动、展开节点或执行其他操作...

    Ext的gridpanel控件二次加载问题

    总之,解决Ext的gridpanel控件二次加载时丢失的问题需要对Ext JS的生命周期管理有深入的理解,并结合实际应用场景选择合适的策略。无论是使用全局变量还是优化加载机制,关键在于确保GridPanel实例和数据的正确管理...

    extjs 微调控件,时间微调控件,微调,javascript 微调

    在ExtJS中,微调控件(Spinner)是一种用户界面组件,它允许用户通过点击向上或向下的箭头以微小增量增加或减少数值,常见于输入框旁边,提供一种方便的数值调整方式。这个控件在处理精确输入或者范围限制的数值时...

    Extjs 4.2.x MVC 动态加载 controller demo

    demo描述: 1. 页面主框架是左是一个tree,...2. 左边的树是加载主页面的时候动态生成 3. 点击左边的树的节点动态加载controller生成一个table 注:需要自己导入Extjs 4.2.x 的文件,该demo是用Extjs 4.2.1 写的

Global site tag (gtag.js) - Google Analytics