从单个商店动态创建多个 Sencha ExtJS 商店

Posted 2023-02-26

【中文标题】从单个商店动态创建多个 Sencha ExtJS 商店

【英文标题】：dynamically creating multiple Sencha ExtJS stores from a single store

【发布时间】：2014-02-06 16:17:48

【问题描述】：

我开发了一个带有单个商店和网格的页面，用于显示来自数据库查询的项目。此后，该简报已扩展为包含通过拖放对网格中的项目进行动态分组。

已决定通过在客户端创建多个商店和网格来实现此功能，以便单个 GET 请求提供网格的所有条目。

当初始“主存储”已加载时，加载函数会遍历“主存储”中的数据并创建新存储（为所述存储选择樱桃记录）并为每个存储创建一个新网格。网格将具有从内容动态生成的标题，但将具有简单的 ID 来表示数据库中的组。

然后用户根据需要将每个网格中的项目拖放到其他网格中，从“旧”存储中删除该项目并在“新”存储中创建它，同时更改其组 ID。

用户还可以创建新组，生成空白商店和伴随的网格。

一旦进行了更改，“主存储”中的数据就会被清除，然后每个存储都会聚合回“主存储”，然后正常执行同步。

我相信在创建商店和网格后，我可以作为函数的一部分分配 id，将它们链接在一起并将它们与其他商店/网格区分开来，但我不知道如何获取唯一数据从“主存储”到每个子存储。

这是看待这个问题的正确方式吗？目的是避免同一存储的多个实例并应用过滤器，因为这不一定会对组 ID 应用任何更改，并避免多个存储以保持查询服务器对单个请求的开销。

如果它是正确的方法（至少是“a”，如果不一定是“the”），我如何从“主存储”设置新存储中的数据？我假设我可以遍历“主存储”中的记录，分配给一个数组，并以某种方式将该数组用作数据源，但如前所述，我不知道该怎么做。

示例模型和商店代码：

Ext.define('ConfirmationModel', 
    extend: 'Ext.data.Model',
    fields: [
        'GroupName',
        'ItemType',
        'ItemTypeId',
        'JobNo',
        'ItemNo',
        'Thickness',
        'Cutter',
        'CutterId',
        'Source',
        'Qty',
        'Material',
        'MaterialId',
        'Type',
        'TypeId',
        'Work',
        'WorkId',
        'InternalFinish',
        'ExternalFinish',
        'Notes',
        'Documented?',
        'ImportDate',
        'ImportCheck'
    ]
);

confirmationStore = Ext.create('Ext.data.Store',
    id: 'confirmationStore',
    model: 'ConfirmationModel',
    autoLoad: true,
    proxy: 
        // load using HTTP
        type: 'ajax',
        url: '<?= $site_url ?>Production/ConfirmationJSON/<?php echo $job_no ?>',
        pageParam: false, //to remove param "page"
        startParam: false, //to remove param "start"
        limitParam: false, //to remove param "limit"
        noCache: false, //to remove param "_dc"
        reader: 
            type: 'json',
            model: 'ConfirmationModel'
        
    ,
    groupField: 'GroupName'
);

编辑：

我有一个“主商店”，在其中，每一行都有一个 GroupName，例如（为简洁起见）'Group 1'、'Group 2'等。我需要从“主商店”生产，更多的商店，每个看起来都像：

group1Store = Ext.create('Ext.data.Store',
    id: 'Group 1',
    model: 'ConfirmationModel',
    autoLoad: false,
    proxy: 
        // load using HTTP
        type: 'memory',
        reader: 
            type: 'json'
        
    
);

group2Store = Ext.create('Ext.data.Store',
    id: 'Group 2',
    model: 'ConfirmationModel',
    autoLoad: false,
    proxy: 
        // load using HTTP
        type: 'memory',
        reader: 
            type: 'json'
        
    
);
...
group#Store = Ext.create('Ext.data.Store',
    id: 'Group #',
    model: 'ConfirmationModel',
    autoLoad: false,
    proxy: 
        // load using HTTP
        type: 'memory',
        reader: 
            type: 'json'
        
    
);

这些存储将只包含与该组相关的记录。我的想法是首先遍历“主存储”并将所有唯一组名检索到一个数组中，然后为每个组名创建一个数组，并从“主存储”只推送他们组名匹配的记录。

从那里，创建一个多维数组来首先保存组名，然后是该组名的记录数组，然后生成存储并设置名称/id/storeId = group[0] 和 data = group[1 ]。可能是冗长的，但无论组数如何，都应该生成所需的所有商店。

【参考方案1】：

    createStoreClone: function(sourceStore)
        var targetStore = Ext.create('Ext.data.Store', 
          model: sourceStore.model
        );
        var records = [];
        Ext.each(sourceStore.getRange(), function(record)
            if(your_condition)//push record to array when condition is true
               records.push(record.copy());
        );
        targetStore.add(records);
        return targetStore;
    

在主存储的加载事件中使用此功能。希望这是有道理的！

【讨论】：

这似乎不会从一个商店创建多个商店；它似乎只做一个。我会更新我的问题，尝试更好地了解我的要求。

您必须多次调用此函数[要创建的子商店数量]。但是您可能必须根据您的要求更改 if 条件（可以作为另一个参数传递给此函数）。希望它能解决你的问题。

【参考方案2】：

由于该问题的主要目的是将信息分组以插入 SQL DB，因此我将概述我如何解决分组问题：

首先，我从数据库中检索了最新的组 ID，作为检索要确认的项目的初始信息的一部分。

作为执行分组的一部分，我为分组 ID 添加了一个附加列；这依次增加了组 ID 并将其应用于每个项目，使每个项目成为“一个组”。当我执行分组操作时，我只是增加了分组 id 并将其应用于所有分组项的分组 id。

我认为与简单增加分组 id 相比，我在问题中考虑的方法明显笨拙。这个想法可以细化为迭代每个项目，将信息提交到服务器并确保分组 id 之间没有间隙，但为了我的目的，只需增加值即可。