Ext.data.reader.Reader

Alternate names

Ext.data.DataReader
Ext.data.Reader

Hierarchy

Ext.Base
Ext.data.reader.Reader

Mixins

Requires

Subclasses

Files

Readers通常用于翻译数据,使其被加载为 Model 实例或Store, 该数据一般是一个AJAX请求的响应数据. 一般情况下不需要直接创建一个Reader实例, 因为Reader总是和Proxy一起使用, 且其将使用Proxy的reader 配置属性配置

Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    },
});

以上的reader是配置来消耗一个JSON字符串,使其开起来如下:

{
    "success": true,
    "users": [
        { "name": "User 1" },
        { "name": "User 2" }
    ]
}

加载嵌套数据

根据每个模型上的associations配置,Readers拥有自动加载多级嵌套的数据对象的能力. 以下是一个例子,用于验证一个虚构的CRM系统(管理了User、Orders、OrderItems、Products等模型)中的各种结合的灵活性。 首先我们要定义这些模型:

Ext.define("User", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: {model: 'Order', name: 'orders'},

    proxy: {
        type: 'rest',
        url : 'users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

Ext.define("Order", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'total'
    ],

    hasMany  : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
    belongsTo: 'User'
});

Ext.define("OrderItem", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'price', 'quantity', 'order_id', 'product_id'
    ],

    belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});

Ext.define("Product", {
    extend: 'Ext.data.Model',
    fields: [
        'id', 'name'
    ],

    hasMany: 'OrderItem'
});

这个可能有很多种理解 - 基本上,一个Usrer拥有多个Orders,而每个Orders是由多个OrderItems组成的。 最后,每个OrderItem都包含单独一个Product. 这就允许我们重构造数据如下:

{
    "users": [
        {
            "id": 123,
            "name": "Ed",
            "orders": [
                {
                    "id": 50,
                    "total": 100,
                    "order_items": [
                        {
                            "id"      : 20,
                            "price"   : 40,
                            "quantity": 2,
                            "product" : {
                                "id": 1000,
                                "name": "MacBook Pro"
                            }
                        },
                        {
                            "id"      : 21,
                            "price"   : 20,
                            "quantity": 3,
                            "product" : {
                                "id": 1001,
                                "name": "iPhone"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

该JSON响应就是多级嵌套- 将返回所有的Users(在本例中为简单起见,只写了一个User), 每个User中的Orders的所有项(一样只写其中一个为例), 每个Order中的OrderItems的所有项(本例中显示了2个order项),最后Product通过每个OrderItem关联在一起. 现在我们可以读取数据并使用它通过如下方式:

var store = Ext.create('Ext.data.Store', {
    model: "User"
});

store.load({
    callback: function() {
        //被加载的user
        var user = store.first();

        console.log("Orders for " + user.get('name') + ":")

        //遍历每个User中的Orders
        user.orders().each(function(order) {
            console.log("Order ID: " + order.getId() + ", which contains items:");

            //遍历每个Order中的OrderItems
            order.orderItems().each(function(orderItem) {
                //我们都知道Product数据已经被加载,所以我们可以使用同步方法getProduct
                //一般来说,我们会使用异步版本的 (参考 Ext.data.association.BelongsTo)
                var product = orderItem.getProduct();

                console.log(orderItem.get('quantity') + ' orders of ' + product.get('name'));
            });
        });
    }
});

运行以上代码,结果如下:

Orders for Ed:
Order ID: 50, which contains items:
2 orders of MacBook Pro
3 orders of iPhone
Defined By

Config options

Ext.data.reader.Reader
: String

包含一条记录主键值的行对象内的属性名称. 默认为model的id. 若有特别指定一个idProperty,该值将覆盖model中定义的idProperty.

Ext.data.reader.Reader
: Boolean

设为true,则自动解析响应对象中嵌套在其他models的models。 请查看Ext.data.reader.Reader介绍文档获取完整解释.

Defaults to: true

一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象, 一次添加多个事件处理函数。

Ext JS 组建的DOM事件

虽然一些Ext JS组件类输出选定的DOM事件(例如"click"、"mouseover"等), 但是这只能通过添加额外的值(如果能)。例如,DataViewitemclick传递被单击的节点。为了通过Component的子元素直接访问DOM事件, 我们需要指定element选项来标识要 添加DOM监听器的Component属性:

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});
Ext.data.reader.Reader
messageProperty : String

包含响应信息的属性名称.该属性为可选的.

包含响应信息的属性名称.该属性为可选的.

Ext.data.reader.Reader
: Boolean

设为True,即使 success属性返回false,也读取数据包中的记录集。

Defaults to: true

Ext.data.reader.Reader
: String

包含的数据项与Reader配置的Model(s)中的相符合的属性名称。 对JSON Reader来说是一个属性名称(或其根为嵌套时的一个圆点分隔的属性名称列表). 对XML reader 来说是一个CSS选择器.
对Array reader来说,由于数据被认为是单级数组的数组,所以root属性不适用.

一般的,数据的自带的根都是有用的,例如JSON数组的根, XML元素的根, 或数组.

该属性的数据包应该是一个被清空数据或不显示数据的空数组.

Defaults to: ""

Ext.data.reader.Reader
: String

检索'success'标识的属性名称,该标识属性的值标示指定请求是否成功(典型表示为一个布尔值,或‘true’|‘fasle’)。 查阅Ext.data.proxy.Server. 更多详细信息请参考exception .

Defaults to: "success"

Ext.data.reader.Reader
: String

检索数据集中记录总数的属性名称. 只有在所有的数据集没有一次得到,而是由服务端分页得到时,该属性才需要用。

Defaults to: "total"

Defined By

Properties

扩展事件

Defaults to: []

本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听...

本对象包含任何有监听器的事件的键。监听器可以在实例上直接设置, 或者在其类或者父类(通过observe) 或者在MVC EventBus上设置。本对象的值为真 (一个非零的数字)和假(0或者undefined)。它们并不代表确切的监听器数量。 如果事件必须被触发,它的值是真的, 如果没有必要,就是假的。

本属性的设计目的是避免没有监听器时调用fireEvent的开销。 如果fireEvent要调用成百上千次,这尤其有用。 用法:

 if (this.hasListeners.foo) {
     this.fireEvent('foo', this, arg1);
 }

在本类中设置为true将一个对象标识为实例化的Observable或其子类。

Defaults to: true

Ext.data.reader.Reader
: Objectreadonly
原始的元数据若存在,是在最后被读取的。元数据包含现有的Reader配置选项, 例如idProperty, totalProperty,等等. ...

原始的元数据若存在,是在最后被读取的。元数据包含现有的Reader配置选项, 例如idProperty, totalProperty,等等. 这些配置选项都可自动应用于Reader, 并且若有需要的话,这些配置可以被Reader直接存取. 然后,元数据也经常用于传递其他通过应用程序代码处理的自定义数据。 例如,一般情况下,一个grid重新配置数据模型, 总是通过相应的列模型配置来的。 任何类似的数据都不会直接应用于Reader(都只是经由,且为Ext所忽略的)。 此元数据属性给你访问被传递到的所有的元数据,包括任何 被Reader忽略的自定义数据。

这是个只读属性,且每次一个新的元数据对象传递给Reader时都会更新。 注意,一般传递确切相同的元对象给监听对象, 需要处理metachange 事件。 然后,该属性启用的话,在某些情况下,可以更方便的直接经由reader访问。

Ext.data.reader.Reader
: Object

原始数据对象是上次传递给readRecords的参数. 存储用于将来处理时或许有需要.

本身 获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 ...

本身

获取当前类的引用,此对象被实例化。不同于 statics, this.self是依赖范围,它意味着要使用动态继承。 参见 statics 详细对比

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // 依赖 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat' 猫
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard' 雪豹

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Methods

Defined By

Instance Methods

Ext.data.reader.Reader
new( [Object config] ) : Object

创建一个新的reader

Parameters

  • config : Object (optional)

    配置对象.

Returns

( Object config )private

添加配置

Parameters

向本Observable可能触发的事件列表中添加指定的事件。

Parameters

  • eventNames : Object/String...

    要么是有事件名作为属性,属性值为 true的对象。例如:

    this.addEvents({
        storeloaded: true,
        storecleared: true
    });
    

    要么是作为参数的任意个数的事件名。例如:

    this.addEvents('storeloaded', 'storecleared');
    

Parameters

( String/Object eventName, [Function fn], [Object scope], [Object options] )
向本对象添加一个事件处理函数,例如: myGridPanel.on("mouseover", this.onMouseOver, this); 这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如: ...

向本对象添加一个事件处理函数,例如:

myGridPanel.on("mouseover", this.onMouseOver, this);

这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

你也能为每个事件处理函数单独指定选项:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

也能使用在特定作用域的方法。注意 必须指定scope:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters

  • eventName : String/Object

    被监听的事件名。 也可以是属性名字是事件名字的对象。

  • fn : Function (optional)

    事件调用的方法, 或者如果指定了scope,在指定scope的方法名*。 会被调用, 参数为fireEvent的参数加上下述options参数。

  • scope : Object (optional)

    事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

  • options : Object (optional)

    包含事件处理函数配置的对象。

    注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

    这个对象可能包含以下任何一个属性:

    • scope : Object

      事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

    • delay : Number

      事件触发后,调用事件处理函数延时毫秒数。

    • single : Boolean

      设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。

    • buffer : Number

      使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数再调用, 新的事件处理函数接替。

    • target : Ext.util.Observable

      只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数

    • element : String

      这个选项只对绑定在Components上的监听器有效。 Component的一个属性名,这个属性引用一个待添加监听器的元素

      这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      

      组合选项

      使用options参数, 可以组合不同类型的监听器:

      一个延时的一次性监听器:

      myPanel.on('hide', this.handleClick, this, {
          single: true,
          delay: 100
      });
      
向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除 ...

向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除

Parameters

  • item : Ext.util.Observable/Ext.Element

    添加监听器的目标项。

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

  • opt : Object

    (可选的)如果ename参数是事件名, 这就是addListener的选项。

( Object name, Object member )private

Parameters

( Object xtype )private

添加 Xtype

Parameters

Ext.data.reader.Reader
( [Boolean force] )private

为一个对象接收到的记录数据和元数据构建优化方法。 子类可能需要实现它们自己的getRoot方法.

Parameters

  • force : Boolean (optional)

    设为true,自动先删除现有的提取功能

    Defaults to: false

Ext.data.reader.Reader
( )private
返回一个函数,可以以Reader接受的格式读取一个原始行对象, 并且将转换后的数据值填充到一个记录数据对象. ...

返回一个函数,可以以Reader接受的格式读取一个原始行对象, 并且将转换后的数据值填充到一个记录数据对象.

该返回函数必须传递以下参数:

  • dest 新字段值数据注入的一个记录的空数据对象。
  • source 该Reader可消化的任何类型的原始行数据对象
  • record 要被填充的记录.
( Array/Arguments ) : Objectdeprecatedprotected
调用原来的方法,这是以前的override重写 Ext.define('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); ...

调用原来的方法,这是以前的override重写

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callOverridden();

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

This method has been deprecated since 4.1

版本 使用 callParent 代替.

Parameters

  • : Array/Arguments

    参数的参数,数组或'参数'对象 来自当前方法,例如: this.callOverridden(arguments)

Returns

  • Object

    返回调用重写方法的结果。

( Array/Arguments args ) : Objectprotected

所谓的"parent"方法是指当前的方法。 这是以前的方法派生或重写(参见 Ext.define)。

 Ext.define('My.Base', {
     constructor: function (x) {
         this.x = x;
     },

     statics: {
         method: function (x) {
             return x;
         }
     }
 });

 Ext.define('My.Derived', {
     extend: 'My.Base',

     constructor: function () {
         this.callParent([21]);
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // alerts 21

这可以用来重写如下:

 Ext.define('My.DerivedOverride', {
     override: 'My.Derived',

     constructor: function (x) {
         this.callParent([x*2]); // 调用原来的My.Derived构造
     }
 });

 var obj = new My.Derived();

 alert(obj.x);  // 现在提示 42

This also works with static methods.

 Ext.define('My.Derived2', {
     extend: 'My.Base',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Base.method
         }
     }
 });

 alert(My.Base.method(10);     // alerts 10
 alert(My.Derived2.method(10); // alerts 20

然后,它也可以重写静态方法。

 Ext.define('My.Derived2Override', {
     override: 'My.Derived2',

     statics: {
         method: function (x) {
             return this.callParent([x*2]); // 调用 My.Derived2.method
         }
     }
 });

 alert(My.Derived2.method(10); // 现在提示 40

Parameters

  • args : Array/Arguments

    这个参数, 通过当前方法得到数组或者 arguments 对象, 例如: this.callParent(arguments)

Returns

  • Object

    返回调用父类的方法的结果。

移除本对象的包括受管理的监听器在内的所有监听器

移除本对象的所有受管理的监听器

( String eventName, Array args, Boolean bubbles )private

Continue to fire event.

Parameters

( Object newName, [Array beginEnd] ) : Functionprivate

Creates an event handling function which refires the event from this object as the passed event name.

Parameters

  • newName : Object
  • beginEnd : Array (optional)

    The caller can specify on which indices to slice

Returns

通过调用this.getBubbleTarget()(如果存在)允许本Observable对象触发的事件沿着继承体系起泡 在Observable基类中没有实现类。 ...

通过调用this.getBubbleTarget()(如果存在)允许本Observable对象触发的事件沿着继承体系起泡 在Observable基类中没有实现类。

这通常被Ext.Components用来将事件起泡到它的容器。 见Ext.Component.getBubbleTarget。Ext.Component中的默认实现 返回Component的直接容器。但是如果需要一个明显的target, 它可以被重写 以更快地访问需要的target。

使用范例:

Ext.override(Ext.form.field.Base, {
    //  Add functionality to Field's initComponent to enable the change event to bubble
    initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
        this.enableBubble('change');
    }),

    //  We know that we want Field's events to bubble directly to the FormPanel.
    getBubbleTarget : function() {
        if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
        }
        return this.formPanel;
    }
});

var myForm = new Ext.formPanel({
    title: 'User Details',
    items: [{
        ...
    }],
    listeners: {
        change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
        }
    }
});

Parameters

  • eventNames : String/String[]

    待起泡的事件名,或者事件名数组。

( Object config )private

拓展

Parameters

Ext.data.reader.Reader
( Object[]/Object root ) : Arrayprivate

返回摘取的数据, 类型转换的数据行.

Parameters

Returns

  • Array

    记录集数组,包含摘取的数据

使用传递过来的参数(去掉事件名,加上传递给addListener的options对象 )触发指定的事件。 ...

使用传递过来的参数(去掉事件名,加上传递给addListeneroptions对象 )触发指定的事件。

通过调用enableBubble,一个事件 能被设置为沿着Observable的继承体系(见Ext.Component.getBubbleTarget)向上起泡。

Parameters

  • eventName : String

    待触发的事件名。

  • args : Object...

    传递给事件处理函数的可变数量的参数

Returns

  • Boolean

    如果任何一个事件处理函数返回false,就返回false,否则返回true。

Ext.data.reader.Reader
( Object data, String associationName ) : Objectprivate

readAssociated内部调用. 给具体指定的记录提供一个数据对象(可能是json、xml等), 这将给指定的联合名称返回数据的相关部分. 这个方法只需要支持需要通过一个查询才能得到联合数据对象的XML Reader.

Parameters

  • data : Object

    原始数据对象

  • associationName : String

    要获取数据的联合名称(若存在,使用associationKey)

Returns

Gets the bubbling parent for an Observable

Returns

( Object name )private

得到配置项

Parameters

Ext.data.reader.Reader
( Object data ) : Objectprivate

默认的该函数只返回传递给它的参数. 可以由子类继承返回一些其他的东西。 参阅XmlReader有提供一个实例.

Parameters

Returns

Ext.data.reader.Reader
( ) : Stringprivate

获取idProperty给提取数据使用

Returns

得到初始化配置项

Parameters

Ext.data.reader.Reader
( Object response ) : Ext.data.ResultSet
提供一个原始的响应对象(作为参数传递给read方法),并返回有用的数据段 该函数需要每个子类实现. ...

提供一个原始的响应对象(作为参数传递给read方法),并返回有用的数据段 该函数需要每个子类实现.

Parameters

  • response : Object

    响应对象

Returns

Ext.data.reader.Reader
( Object data ) : Objectprivate

该方法一般需要子类实现. 提供一个一般的数据对象(数据类型依赖于我们读取的数据类型), 该函数将返回一个由Reader的‘root’的元数据配置项构成的配置对象。 参阅XmlReader的getRoot实现方法作为实例. 缺省情况下,相同的数据对象将简单地返回.

Parameters

Returns

( Object config )private

根据名称判断配置项是否存在

Parameters

检查本对象是否有特定事件的监听器, 或者检查事件是否起泡。 检查的结果表明事件是否需要出发。

Parameters

  • eventName : String

    待检查的事件名

Returns

  • Boolean

    如果事件被监听或者起泡,返回true, 否则返回false

( Object config ) : Objectprotected
这个类的初始化配置。典型例子: Ext.define('My.awesome.Class', { // 这是默认配置 config: { name: 'Awesome', isAwes...

这个类的初始化配置。典型例子:

Ext.define('My.awesome.Class', {
    // 这是默认配置
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome' 超级棒

Parameters

Returns

  • Object

    mixins 混入原型 键-值对

( Object name, Object mixinClass )private

内部使用混入预处理器(mixins pre-processor)

Parameters

addManagedListener的简写方法 向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除 ...

addManagedListener的简写方法

向任何Observable对象(或者Ext.Element)添加监听器, 当组件被销毁时,监听器自动被移除

Parameters

  • item : Ext.util.Observable/Ext.Element

    添加监听器的目标项。

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

  • opt : Object

    (可选的)如果ename参数是事件名, 这就是addListener的选项。

removeManagedListener的简写方法 移除通过mon方法添加的监听器。 ...

removeManagedListener的简写方法

移除通过mon方法添加的监听器。

Parameters

  • item : Ext.util.Observable/Ext.Element

    待移除监听器的项

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

( String/Object eventName, [Function fn], [Object scope], [Object options] )
addListener的简写方法 向本对象添加一个事件处理函数,例如: myGridPanel.on("mouseover", this.onMouseOver, this); 这个方法也允许传递单个参数,参数为一个 包含指定...

addListener的简写方法

向本对象添加一个事件处理函数,例如:

myGridPanel.on("mouseover", this.onMouseOver, this);

这个方法也允许传递单个参数,参数为一个 包含指定多个事件的属性的配置对象。例如:

myGridPanel.on({
    cellClick: this.onCellClick,
    mouseover: this.onMouseOver,
    mouseout: this.onMouseOut,
    scope: this // Important. Ensure "this" is correct during handler execution
});

你也能为每个事件处理函数单独指定选项:

myGridPanel.on({
    cellClick: {fn: this.onCellClick, scope: this, single: true},
    mouseover: {fn: panel.onMouseOver, scope: panel}
});

也能使用在特定作用域的方法。注意 必须指定scope:

myGridPanel.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

Parameters

  • eventName : String/Object

    被监听的事件名。 也可以是属性名字是事件名字的对象。

  • fn : Function (optional)

    事件调用的方法, 或者如果指定了scope,在指定scope的方法名*。 会被调用, 参数为fireEvent的参数加上下述options参数。

  • scope : Object (optional)

    事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

  • options : Object (optional)

    包含事件处理函数配置的对象。

    注意: 不像ExtJS 3.x, options对象也会作为最后一个参数 传递给每一个事件处理函数。

    这个对象可能包含以下任何一个属性:

    • scope : Object

      事件处理函数执行的作用域(this应用的上下文) 如果省略, 默认为触发事件的对象。

    • delay : Number

      事件触发后,调用事件处理函数延时毫秒数。

    • single : Boolean

      设置为true添加一个事件处理函数,只处理下一次触发的事件, 然后移除这个函数。

    • buffer : Number

      使事件处理函数在Ext.util.DelayedTask中调度运行, 延时指定的毫秒数。如果事件在这段事件再次触发, 原先的事件处理函数再调用, 新的事件处理函数接替。

    • target : Ext.util.Observable

      只有当事件在目标Observable上触发时调用事件处理函数, 如果事件是从Observable的子类起泡的,不会调用事件处理函数

    • element : String

      这个选项只对绑定在Components上的监听器有效。 Component的一个属性名,这个属性引用一个待添加监听器的元素

      这个选项在Component构造过程中向Components的元素添加DOM事件监听器有用。 这些元素只有在Component渲染之后才会存在。 例如, 向Panel的body中添加click监听器:

        new Ext.panel.Panel({
            title: 'The title',
            listeners: {
                click: this.handlePanelClick,
                element: 'body'
            }
        });
      

      组合选项

      使用options参数, 可以组合不同类型的监听器:

      一个延时的一次性监听器:

      myPanel.on('hide', this.handleClick, this, {
          single: true,
          delay: 100
      });
      
( Object names, Object callback, Object scope )private

更新配置项

Parameters

( Object fn, Object scope )private

扩展事件

Parameters

Ext.data.reader.Reader
( Object meta )private

重配置绑定在Reader的元数据

Parameters

让给定的类成为可观察的实例。 这个方法在有类从本类派生或者使用本类作为一个mixin时调用。

Parameters

Ext.data.reader.Reader
( Object response ) : Ext.data.ResultSet

读取给定的响应数据. 该方法将标准化传递给它的不同类型的响应对象。 如果是个XMLHttpRequest对象, 就移交给子类方法getResponseData. 否则, 由方法readRecords获取记录集.

Parameters

  • response : Object

    响应对象. 该对象可能是一个XMLHttpRequest对象,也可能是一个纯js对象

Returns

Ext.data.reader.Reader
( Ext.data.Model record, Object data ) : Stringprivate

从数据对象加载一个记录的联合. 该联合介于记录提供的hasMany和belongsTo联合.

Parameters

Returns

Ext.data.reader.Reader
( Object data ) : Ext.data.ResultSet

被所有reader子类所用的摘要常用功能. 每个子类预期都在运行其本身逻辑前调用该方法,并且返回Ext.data.ResultSet实例。 对大部分的Reader不需要再额外的处理。

Parameters

  • data : Object

    原始数据对象

Returns

( Object origin, String[] events, [String prefix] )

从指定的Observable接替选定的事件就好像事件是this触发的。

例如,如果你想要扩展Grid, 你可能决定转发store的一些事件。 所以你能在你的initComponent中实现这个:

this.relayEvents(this.getStore(), ['load']);

grid实例将会有一个observable的'load'事件, 这个事件的参数是store的load事件的参数。任何grid的load事件触发的函数 可以使用this访问grid。

Parameters

  • origin : Object

    本对象要接替事件的Observable对象

  • events : String[]

    被接替的事件名数组

  • prefix : String (optional)

    附加到事件名的公共前缀。例如:

    this.relayEvents(this.getStore(), ['load', 'clear'], 'store');
    

    这样grid将会以'storeload'和'storeclear'转发store的'load'和'clear'事件。

移除事件处理函数。

Parameters

  • eventName : String

    事件处理函数关联的事件类型

  • fn : Function

    待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。

  • scope : Object

    (可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。

移除通过mon方法添加的监听器。

Parameters

  • item : Ext.util.Observable/Ext.Element

    待移除监听器的项

  • ename : Object/String

    事件名或者包含的事件名属性的对象。

  • fn : Function

    (可选的) 如果ename参数是事件名, 这就是一个事件处理函数。

  • scope : Object

    (可选的) 如果ename参数是事件名, 这就是(this引用的上下文) 事件处理函数执行的作用域。

Remove a single managed listener item

Parameters

  • isClear : Boolean

    True if this is being called during a clear

  • managedListener : Object

    The managed listener item See removeManagedListener for other args

继续事件的触发(见suspendEvents)。

如果事件被使用queueSuspended参数挂起, 那么所有 在事件挂起期间触发的事件将会被发送到任意监听器。

( Object config, Object applyIfNotSet )private

设置配置项

Parameters

Ext.data.reader.Reader
( Object model, Boolean setOnProxy )private

给reader设置一个新的模型

Parameters

  • model : Object

    要创建的模型.

  • setOnProxy : Boolean

    为真时,若有配置一个代理服务器,则设置到代理服务器上

获取从该对象被实例化的类的引用。 请注意不同于 self, this.statics()是独立的作用域,无论this是否运行,总是返回其中的调用类。

Ext.define('My.Cat', {
    statics: {
        totalCreated: 0,
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        var statics = this.statics();

        alert(statics.speciesName);     // 总是等于'Cat',无论'this'是什么,
                                        // 相当于:My.Cat.speciesName

        alert(this.self.speciesName);   // 依赖 'this'

        statics.totalCreated++;
    },

    clone: function() {
        var cloned = new this.self;                      // 依赖 'this'

        cloned.groupName = this.statics().speciesName;   // 相当于: My.Cat.speciesName

        return cloned;
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',

    statics: {
        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
    },

    constructor: function() {
        this.callParent();
    }
});

var cat = new My.Cat();                 // alerts 'Cat', 然后提示 'Cat'

var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', 然后提示 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
alert(clone.groupName);                 // alerts 'Cat'

alert(My.Cat.totalCreated);             // alerts 3

Returns

挂起所有事件的触发。(见resumeEvents)

Parameters

  • queueSuspended : Boolean

    传true,让挂起的事件排队而不是丢弃所有挂起的事件, 这些事件将会在调用resumeEvents之后触发。

配置扩展

removeListener的简写方法 移除事件处理函数。 ...

removeListener的简写方法

移除事件处理函数。

Parameters

  • eventName : String

    事件处理函数关联的事件类型

  • fn : Function

    待移除的事件处理函数。 必须是对传递给addListener 的函数的引用。

  • scope : Object

    (可选的) 原先为事件处理函数指定的作用域。 它必须是和原先调用addListener时指定的作用域参数是一样的,否者监听器将会被移除。

Defined By

Static Methods

( Object members )static

方法/属性添加到这个类的原型。

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Parameters

添加/重写这个类的静态属性。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Parameters

Returns

( Ext.Base fromClass, Array/String members ) : Ext.Baseprivatestatic
这个类的原型借用另一个类的成员 Ext.define('Bank', { money: '$$$', printMoney: function() { alert('$$$$$$$'); } ...

这个类的原型借用另一个类的成员

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Parameters

Returns

创建这个类的新实例。

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

所有参数传递至类的构造。

Returns

创建现有的原型方法的别名。例如: Ext.define('My.cool.Class', { method1: function() { ... ...

创建现有的原型方法的别名。例如:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Parameters

以字符串格式,获取当前类的名称。

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Returns

( Object members ) : Ext.Basedeprecatedstatic

重写这个类的成员。通过callParent重写的方法可以调用。

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!我要成为一只猫!"
                          // alerts "I'm a cat!我是一只猫!"
                          // alerts "Meeeeoooowwww"

在4.1版本, 直接利用这种方法已经过时了。 使用 Ext.define 代替:

Ext.define('My.CatOverride', {
    override: 'My.Cat',
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

以上完成了相同的结果,但可以由Ext.Loader重写, 其目标类和生成过程中,可以决定是否需要根据目标类所需的状态覆盖管理(My.Cat)。

This method has been deprecated since 4.1.0

使用 Ext.define 代替

Parameters

  • members : Object

    添加到这个类的属性。 这应当被指定为一个对象包含一个或多个属性的文字。

Returns

Defined By

Events

Ext.data.reader.Reader
( Ext.data.reader.Reader reader, XMLHttpRequest response, Ext.data.ResultSet error, Object eOpts )

当reader从服务端接收到不正确的编码数据时触发

Parameters