dynamically creating multiple Sencha ExtJS stores from a single store

Question

I have developed a page with a single store and grid to display items from a database query. The brief has since expanded to encompass dynamic grouping of the items in the grid via drag and drop.

It has been decided that implementing this functionality will be performed by creating multiple stores and grids on the client side, such that a single GET request provides all the entries for the grid(s).

When the initial "master store" has been loaded, an on load function iterates through the data in the "master store" and creates new stores (cherry-picking out records for said store) and a new grid for each store. The grids will have titles dynamically generated from the contents, but will have simple ids to denote groups in the database.

The user then drags and drops items from each grid into the other grids as required, removing the item from the "old" store and creating it in the "new" store, and in doing so also change its group id.

The user will also be able to create new groups, which generate blank stores and accompanying grids.

Once changes are made, the "master store" is cleared out of data and each store is then aggregated back into the "master store", which then performs a sync as normal.

I'm confident that upon creating the store and grid, I can as part of the function assign ids that both link them together and differentiate them from other stores/grids, but I don't know how to get the unique data from the "master store" into each child store.

Is this the right way to be looking at this? The intent is to avoid multiple instances of the same store and applying filters, as this won't necessarily apply any changes to the group id, and avoiding multiple stores as to keep the overhead of querying the server to single requests.

If it is a (at least "a", if not necessarily "the") right way to do this, how do I set the data in the new stores from the "master store"? I assume I can just iterate through records in the "master store", assign to an array, and apply the array as the data source in some fashion, but as already stated I don't know how to do this.

Example model and store code:

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'
});

EDIT:

I have one "master store", and within it, each row will have a GroupName, such as (for brevity) 'Group 1', 'Group 2' etc. I need to produce, from the "master store", further stores, each looking something like:

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'
        }
    }
});

These stores would then contain only the records relating to that group. My thoughts are to first iterate through the "master store" and retrieve all the unique group names into an array, then create an array for each group name and push from the "master store" only the records where their group name matches.

From there, create a multidimensional array to hold firstly the group name, then the array of records for that group name, then generate the store and setting the name/id/storeId = group[0] and data = group[1]. Long-winded, perhaps, but should generate all the stores required regardless of the number of groups.

Rajinder Rajinder · Accepted Answer · 2014-02-07T06:29:45

    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;
    }

Use this function on load event of your master store. Hope this makes sense!!

dynamically creating multiple Sencha ExtJS stores from a single store

2 Answers