Javascript ExtJS 4：克隆商店

ExtJS 4: cloning stores

提问by Wilk

I'm trying to figure out how to clone an Ext.data.Storewithout keeping the old reference.

我试图弄清楚如何在Ext.data.Store不保留旧参考的情况下克隆 an 。

Let me explain better with some code. Here's the source store:

让我用一些代码更好地解释。这是源商店：

var source = Ext.create ('Ext.data.Store', {
    fields: ['name', 'age'] ,
    data: [
        {name: 'foo', age: 20} ,
        {name: 'boo', age: 30} ,
        {name: 'too', age: 10} ,
        {name: 'yoo', age: 80} ,
        {name: 'zoo', age: 30}
    ]
});

Follows an example of what I want to do:

遵循我想要做的一个例子：

var target = source;
target.removeAll ();
// Here I need to have target empty and source unchanged
// But in this case, source is empty as well

Now, in the above example the copy is done by reference while I need to do it by value. So I found Ext.clone ()in the docs but it seems it doesn't work for complex object, like Ext.data.Store:

现在，在上面的例子中，复制是通过引用完成的，而我需要通过值来完成。所以我Ext.clone ()在文档中发现，但它似乎不适用于复杂的对象，例如Ext.data.Store：

var target = Ext.clone (source);
target.removeAll ();
// source is still empty

Then I tried with Ext.data.Model.copy ()but the only way to do it work is this:

然后我尝试了Ext.data.Model.copy ()但唯一的方法是这样的：

var target = Ext.create ('Ext.data.Store', {
    fields: ['name', 'age']
});

source.each (function (model) {
    target.add (model.copy ());
});

Now, for my reasons, I don't want to instantiate another Ext.data.Store, so I want to avoid this:

现在，出于我的原因，我不想实例化 another Ext.data.Store，所以我想避免这种情况：

var target = Ext.create ('Ext.data.Store', {
    fields: ['name', 'age']
});

I'd like to have something like this:

我想要这样的东西：

var target;

source.each (function (model) {
    target.add (model.copy ());
});

But, obviously, it doesn't work.

但是，显然，它不起作用。

So, how can I clone the source store?

那么，如何克隆源存储？

采纳答案by knalli

ExtJS 3.x solution

ExtJS 3.x 解决方案

Try this:

尝试这个：

cloneStore : function(originStore, newStore) {

    if (!newStore) {
        newStore = Ext.create('Ext.data.Store', {
            model : originStore.model
        });
    } else {
        newStore.removeAll(true);
    }

    var records = [], originRecords = originStore.getRange(), i, newRecordData;
    for (i = 0; i < originRecords.length; i++) {
        newRecordData = Ext.ux.clone(originRecords[i].copy().data);
        newStore.add(new newStore.model(newRecordData, newRecordData.id));
    }

    newStore.fireEvent('load', newStore);

    return newStore;
}

Note: Ext.ux.cloneis a separated plugin (you will find it) which makes a deepclone of an object. Maybe, Ext JS 4 provides a familiar thing, I don't know.. I'm using this special clone since Ext JS 3.x

注意：Ext.ux.clone是一个单独的插件（你会找到它），它可以对对象进行深度克隆。也许，Ext JS 4 提供了一个熟悉的东西，我不知道.. 我从 Ext JS 3.x 开始使用这个特殊的克隆

It is possible that it is required to specify the proxy memorywhen creating a new store (I'm not sure right now because I'm using always the "provided" way.

memory创建新商店时可能需要指定代理（我现在不确定，因为我总是使用“提供”的方式。

ExtJS 4.x solution

ExtJS 4.x 解决方案

function deepCloneStore (source) {
    var target = Ext.create ('Ext.data.Store', {
        model: source.model
    });

    Ext.each (source.getRange (), function (record) {
        var newRecordData = Ext.clone (record.copy().data);
        var model = new source.model (newRecordData, newRecordData.id);

        target.add (model);
    });

    return target;
}

回答by Christiaan Westerbeek

ExtJS 6.x, 5.x and 4.x solution

ExtJS 6.x、5.x 和 4.x 解决方案

Here's a quasi-all ExtJS versions solution. Mind you that record.copy already creates a clone of the data. No need to Ext.clone that again.

这是一个准所有 ExtJS 版本的解决方案。请注意，record.copy 已经创建了数据的克隆。无需再次 Ext.clone。

function deepCloneStore (source) {
    source = Ext.isString(source) ? Ext.data.StoreManager.lookup(source) : source;

    var target = Ext.create(source.$className, {
        model: source.model,
    });

    target.add(Ext.Array.map(source.getRange(), function (record) {
        return record.copy();
    }));

    return target;
}

回答by TriumphST

I did the following successfully in Ext.js 4.1:

我在 Ext.js 4.1 中成功执行了以下操作：

var source = Ext.create('Ext.data.Store', {
    fields: ['name', 'age'],
    data: [
        {name: 'foo', age: 20},
        {name: 'boo', age: 30},
    ],
});

In a method:

在一个方法中：

cloneStore: function (source) {
    var clone = Ext.create('Ext.data.Store', {
        fields: ['name', 'age']
    });

    // load source store data
    clone.loadData(source.data.items);

    return clone;
}

Inline:

排队：

var clone = Ext.create('Ext.data.Store', {
    fields: ['name', 'age']
}).loadData(source.data.items);

回答by Allie

since this is still something I was looking for and the above answers did not fix it for me, I found another solution myself:

由于这仍然是我一直在寻找的东西并且上述答案并没有为我解决这个问题，我自己找到了另一个解决方案：

var target = Ext.create ('Ext.data.Store', {
    // add other properties here if needed
    reader: source.reader
})

This worked for me to create clones of a store.

这对我有用，可以创建商店的克隆。