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

时间:2014-02-06 16:17:48

标签: javascript extjs

我开发了一个包含单个商店和网格的页面,用于显示数据库查询中的项目。该简报已经扩展到包含通过拖放动态分组网格中的项目。

已决定通过在客户端创建多个存储和网格来执行此功能,以便单个GET请求提供网格的所有条目。

当加载了初始“主商店”时,加载功能会遍历“主商店”中的数据,并为每个商店创建新商店(挑选所述商店的记录)和新网格。网格将具有从内容动态生成的标题,但将具有简单的ID来表示数据库中的组。

用户然后根据需要将每个网格中的项目拖放到其他网格中,从“旧”商店中删除该项目并在“新”商店中创建该项目,并且这样做也会更改其组ID。 / p>

用户还可以创建新组,生成空白商店和附带的网格。

更改后,“主存储”将从数据中清除,然后将每个存储聚合回“主存储”,然后正常执行同步。

我有信心在创建商店和网格时,我可以作为功能分配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 ]。也许是啰嗦,但无论团体数量多少,都应该生成所需的所有商店。

2 个答案:

答案 0 :(得分: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;
    }

在主商店的加载事件中使用此功能。希望这有意义!!

答案 1 :(得分:0)

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

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

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

我认为,与简单增加分组ID相比,我在问题中考虑的方法非常笨重。可以改进这个想法,以便在将信息提交到服务器时迭代每个项目,并确保分组ID之间没有间隙,但就我的目的而言,只是增加值可以工作。