0

我有一个扩展 Ext.draw.Component 的 Sencha 类，它接受 MyModel 的存储。我正在尝试两种不同的方法，但我得到了不同的、不令人满意的结果。


我在商店中读取的类的构造函数中的第一个方法并执行以下操作：

//Inside constructor of the class
this.store = config.store; //config is passed in from the constructor
var me = this;
me.store.each(function (model) {
    me.renderTo = model.get('elementToRenderTo');
    me.items = [{
        type: 'rect',
        x: 1.6620979,
        y: 52.362183,
        radius: 90,
        width: 448.10959,
        height: 1000,
        fill: model.get('color'),
        stroke: 'none'    
    }];

    if (me.items) {
        Ext.apply(config, { //config is passed in from the constructor
            items: me.items
        });
    }

    me.callParent([config]);
}

当我将最后一段代码放在它所在的位置（store.each 内部）时，我得到一个异常：

未捕获的类型错误：无法调用未定义的方法“应用”

第二种方法
但是，如果我将 Ext.apply 和 callParent 移到 store.each 之外，我不会有任何期望，但只会绘制最后一个模型（可能是因为 me.items 在每次迭代时都会被覆盖该模型）。

//Inside constructor of the class
this.store = config.store; //config is passed in from the constructor
var me = this;
me.store.each(function (model) {
    me.renderTo = model.get('elementToRenderTo');
    me.items = [{
        type: 'rect',
        x: 1.6620979,
        y: 52.362183,
        radius: 90,
        width: 448.10959,
        height: 1000,
        fill: 'black',
        stroke: 'none'    
    }];
}

if (me.items) {
    Ext.apply(config, { //config is passed in from the constructor
        items: me.items
    });
}

me.callParent([config]);

还有另一种方法来创建使用商店的自定义 Ext.draw.Component 吗？我错过了什么？第二种方法似乎不对，但我无法摆脱第一种的异常。

4

1 回答 1

1

这段代码有几个可能的问题：

1

this.store = config.store;

这是商店实例还是字符串配置？在构造函数中处理存储配置的正确方法如下：

this.store = Ext.data.StoreManager.lookup(this.store || 'ext-empty-store');

2

尽管您使用me的是范围，但您可能希望确保范围each确实是它之外的范围，因此：

me.store.each(function (model) { ... }, this);

3

无论您在哪里执行此操作，您都不会推送所有项目：

Ext.apply(config, {
    items: me.items
});

因为您在这里所做的是保持item覆盖me.items.

你不应该对项目应用任何东西——它是一个由组件本身管理的数组。您应该真正向其中添加项目：

items.push( me.items )

4

您是否仅假设本地商店？因为如果要异步加载您的商店 - 除非您在加载时加载项目，否则您将一无所获。

5

你到底想在这里做什么？商品是否从商店加载？如果是这种情况，您不应该在构造函数中执行此操作。

您应该真正查看其中一个 Ext 源文件以了解如何完成此操作。这是Ext.panel.Table的简化版本：

Ext.define('Ext.panel.Table', {
    extend: 'Ext.panel.Panel',

    initComponent: function() {
        var me          = this,
            store       = me.store = Ext.data.StoreManager.lookup(me.store || 'ext-empty-store');

        me.mon(store, {
            load: me.onStoreLoad,
            scope: me
        });
    },

    onStoreLoad: function() {
    }
});
于 2013-03-08T20:23:11.477 回答