Question

我有一个扩展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中）时，我得到一个例外：

未捕获的TypeError：无法调用未定义的方法'apply'

第二种方法
但是，如果我将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？我错过了什么？第二种方法似乎不对，但我无法摆脱第一种情况。

Answer 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() {
    }
});

在Ext.js store.each中调用this.callParent

1 个答案:

1

2

3

4

5