`

Ext Js 4.x 扩展自己的XType

 
阅读更多

    如果想用自己定制的XType(比如这里想用一个Obj存el和vl两个属性)     可以自己来扩展Ext.data.Types

 

    大致的流程....

 

  定义类型

 function MyExtType(v, data, name) {
    /**
     * @objEl  第一次v传人为  MyExtType [object] 里面有 vl , el属性
     * 第二次传入时 只传入了vl  这里通过data 再次拿到 el
     */
    var objEL = data.data[name] || {};
    var relV = v==null? '':v;

    this.value = relV.vl==null? relV : relV.vl;

    this.el =  relV.el || objEL.el || '';


    this.toString = function() {
        return this.value;
    }
}

 

    注册类型

 

Ext.data.Types.MyExtType= {
    
    convert: function(v, data) {
     
        return new TsFloatExt(v, data,this.name);
    },
    sortType: function(v) {
        return v.vl;  
    },
    type: 'MyExtType'

};
   

 

     定义Model

 

Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'name',  type: 'string'},
                {name: 'email',   type: 'String'},
                {name: 'phone', type:'MyExtType' }
               
            ]
 

    定义Store

 

Ext.create('Ext.data.Store', {
                model:"User",
                data:{'items':[
                    { 	'name': 'Lisa', 
                       'email':'lisa@simpsons.com', 
                       'phone':{'vl':'121121','el':'a+b'}  }

                ]}
});
   

 

 

   当然  你可以写的更加优雅.. 这里只是给出一种实现方法   

 

 

分享到:
评论

相关推荐

    EXT dojochina文本框示例Ext.form.TextField.rar

    Dojo China社区是一个专注于JavaScript技术,特别是Dojo Toolkit和EXT JS等技术的交流平台。在本示例中,"EXT dojochina文本框示例Ext.form.TextField.rar"是一个压缩包,包含了EXT框架中关于`Ext.form.TextField`...

    ext-base.js

    4. **DOM操作**:EXT对DOM操作进行了封装,提供了便利的方法来查找、修改和操作DOM元素,使得开发者不必直接操作底层的JavaScript DOM API。 5. **动画效果**:EXT提供了一系列的动画效果,"ext-base.js"中包含了...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...

    Ext.ux.form.TinyMCETextArea

    Ext.ux.form.TinyMCETextArea 是一个在Extjs4框架下实现的组件,它将TinyMCE编辑器集成到了ExtJS的表单控件中,提供了富文本编辑的功能。这个组件是基于HTML5构建的,因此在兼容性和功能上能够满足现代网页应用的...

    Ext.Direct.Mvc是ASP.NET Mvc.的Ext Direct服务器端堆栈的实现.zip

    Ext.Direct.Mvc是专门为ASP.NET MVC框架设计的一个扩展库,它实现了Sencha的Ext Direct技术,使得客户端的Ext JS与服务器端的ASP.NET MVC之间能够进行高效、便捷的数据交互。Ext Direct提供了一种标准化的方式来定义...

    ExtJs 带清空功能的日期组件

    xtype: 'clearabledatefield', fieldLabel: '日期' }], renderTo: Ext.getBody() }); ``` 以上就是如何在ExtJs中创建一个带有清空功能的日期组件的基本过程。通过自定义组件并扩展基础功能,我们不仅满足了项目...

    EXT_JS实用开发指南

    EXT JS是一个强大的JavaScript库,主要用于构建用户界面,尤其适用于企业级应用。在使用EXT JS时,首先需要在HTML页面中引入必要的库文件,包括样式表(ext-all.css)、适配器(ext-base.js)以及EXT JS的核心库...

    ExtJs.doc 扩展介绍 英文

    如果你想要扩展 `Ext.Component` 或其子类,你可以使用 `Ext.extend()`,但在 Ext2.x 及之后的版本,你通常不需要定义自己的构造函数,而是重写 `initComponent()` 方法来初始化你的组件。 创建预配置类是扩展组件...

    Ext JS 4.2 简单环境搭建C#版的

    4. **引入Ext JS库**: 在新建的Web项目中,将解压后的Ext JS 4.2文件夹中的"ext-all.js"(或"ext-debug.js",如果你希望在开发阶段开启调试模式)复制到项目的"Scripts"目录下。同时,把"resources"文件夹复制到项目...

    精通JS脚本之ExtJS框架.part1.rar

    13.6.4 Ext.data.XmlReader 13.7 Ext.ux.DWR 13.7.1 Ext.data.DwrProxy 13.7.2 Ext.data.DWRTreeLoader 13.7.4 Web服务端配置 13.7.5 服务层接口 第14章 ExtJS扩展 14.1 利用Ext.extend实现继承 14.2 与...

    editTreeGrid ext可编辑的treegridpanel

    在EXT JS这个强大的JavaScript框架中,`TreeGrid`是一种结合了树形结构和表格功能的组件,它允许用户同时展示数据的层次结构和表格信息。`editTreeGrid`是EXT JS中的一个特例,它是可编辑的TreeGrid面板,提供了在树...

    精通JS脚本之ExtJS框架.part2.rar

    13.6.4 Ext.data.XmlReader 13.7 Ext.ux.DWR 13.7.1 Ext.data.DwrProxy 13.7.2 Ext.data.DWRTreeLoader 13.7.4 Web服务端配置 13.7.5 服务层接口 第14章 ExtJS扩展 14.1 利用Ext.extend实现继承 14.2 与...

    Ext树创建说明.rar

    在IT领域,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。它提供了一整套组件,包括数据管理、用户界面元素以及丰富的交互功能。其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示...

    Ext+JS高级程序设计.rar

    第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备知识 256 9.2.1 定义命名空间 256 9.2.2 重写构造函数 257 9.2.3 继承组件的一些准备 257 9.2.4 常用的辅助...

    extjs-date-picker:将monthyear选择器添加到Ext JS modern工具包的日期选择器中

    在Ext JS框架中,Modern工具包提供...通过这样的扩展,我们不仅提高了日期选择器的易用性,还展示了Ext JS Modern工具包的强大可扩展性。无论是在桌面还是移动平台上,这样的改进都将提升用户与日期选择器的交互体验。

    ext4 表格分页实例代码

    EXT4虽然主要关注的是文件系统,但EXT4在这里可能是指EXT JS库的一个版本,EXT JS是一个强大的JavaScript UI框架,用于构建富客户端应用。EXT JS提供了丰富的组件,包括表格(Grid),支持分页功能,便于处理大量...

    Ext2.0js my first test

    Ext2.0js是Ext JS库的一个版本,它是一个广泛使用的JavaScript框架,专门用于构建富客户端Web应用程序。在本文中,我们将深入探讨Ext JS的基本概念、功能以及如何使用它来创建一个简单的测试项目。 首先,Ext JS的...

    EXT 表单验证EXT 表单验证

    EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计。它提供了丰富的组件库,包括表格、表单、菜单等,而表单验证功能则是其表单组件的核心部分。 EXT表单验证主要涉及以下几个方面: 1. **字段...

    ext js介绍

    Ext JS是一款强大的开源JavaScript库,用于构建交互式的Web应用程序。它提供了一系列丰富的UI组件和工具,帮助开发者快速开发出高性能的前端应用。Ext JS支持多种浏览器,并且具有良好的跨浏览器兼容性。 #### 二、...

    extjs 3.x hightchart 插件

    `Ext.ux.HighChart.js`可能包含了一个自定义的组件类,该类扩展了ExtJS的基础组件,并集成了Highcharts的相关API,使得在ExtJS应用中使用Highcharts变得更加简单。 接下来,我们来看`adapter-extjs.js`。在高版本的...

Global site tag (gtag.js) - Google Analytics