Ext Js 4.x 扩展自己的XType

最新推荐文章于 2021-10-18 15:03:17 发布

原创最新推荐文章于 2021-10-18 15:03:17 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 同时被 2 个专栏收录

36 篇文章

订阅专栏

ExtJS

4 篇文章

订阅专栏

本文介绍如何在ExtJS中自定义XType，通过创建一个包含特定属性的Obj实例来扩展Ext.data.Types。示例代码展示了从定义类型、注册类型到在Model和Store中使用该类型的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果想用自己定制的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'}  }

                ]}
});

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