ExtJS网格存储 - 通过CodeIgniter在“保存”/“更新”上向MySQL写入信息

Question

I have a page containing a ExtJS 4.2.2 dataStore and gridPanel showing items created using information from various tables in a MySQL database.

The purpose of the generated grid is to provide a "confirmation" to the user before any information is actually generated in the database in a table separate to those that originated the initial information, as some items can be flagged to be imported; unflagged items are not imported. The page uses HTML, PHP (with CodeIgniter MVC framework) and ExtJS (which implies Javascript and JQuery).

With my current understanding of ExtJS, I would perform the necessary database insert or update by:

1. Saving all the changes in the grid to the store
2. Packaging the store's data into a multidimensional array, which is then assigned into a POST variable in some similar manner to a form
3. Perform a POST to the same page, picking up the POST variable
4. Loop through the POST information, passing each row's data to the model to perform the SQL query and INSERT/UPDATE as necessary.

I'm thinking this is a long-winded and most likely inefficient method for doing this; having previously worked with Kendo UI, I would have thought there is some form of "save" action on the store that simply calls a controller/model function that would act on the data in fewer steps.

Having looked at Ext.data.Store's numerous potential candidates (the commitChanges method, update event, the write event, store.sync etc.), I have to say I'm completely bewildered by how I could perform the kind of action I'm thinking of; I need to write the information to a table separate from those that generated the initial information, and none of the above seem to do that.

I would appreciate a "simple words" play-by-play of how to get the "dirty" data from the grid saved to the store, then the store data being passed to a MVC Controller-then-Model function that allows for update/insert to the DB (if that is the best way to do this) - I also appreciate that I will have to modify aspects of my ExtJS code, but what about my current setup isn't helping, if anything?

ExtJS code below renders the grid with data, and not much else:

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
    'Ext.ux.CheckColumn'
]);

Ext.onReady(function(){
    Ext.define('ConfirmationModel', {
        extend: 'Ext.data.Model',
        fields: [
            'GroupName', // generated if not a member of a group, will eventually be retrieved if already existing in group by checking import table for JobNo, ItemNo and ItemTypeId
            'ItemType',
            'ItemTypeId',
            'JobNo',
            'ItemNo',
            'ThicknessDepth',
            'Cutter',
            'CutterId',
            'Source',
            'Qty',
            'Material',
            'MaterialId',
            'Type',
            'TypeId',
            'Work',
            'WorkId',
            'PaintInternal',
            'PaintExternal',
            'Notes',
            'Documented',
            'ImportDate', // fetched by checking import table for jobNo, itemNo and itemTypeId
            'ImportCheck' // usually automatically checked if not yet imported
        ]
    });

    confirmationStore = Ext.create('Ext.data.Store',{
        model: 'ConfirmationModel',
        autoLoad: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            url: '<?= $site_url ?>Production/ConfirmationJSON/<?php echo $job_no ?>', // currently pulls all the information from three separate tables, pushes to object arrays then converts to and returns as JSON; will also check import table for existing entries as further work
            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'
    });

    confirmationGrid = Ext.create('Ext.grid.Panel', {
        width: 1200,
        store: confirmationStore,
        title: 'Import Confirmation',
        tbar: [
            {
                xtype: 'button',
                text: 'Update',
                handler: function(){
                    // function to handle the save/update of information goes here?
                    document.location.href = '<?php echo site_url() ?>Production/Schedule'; // redirect to next page in steps
                }
            },
            {
                xtype: 'button',
                text: 'Cancel',
                handler: function(){
                    window.history.back();
                }
            }
        ],
        columns: [
            { text: 'Item<br />No.', width:50, dataIndex: 'ItemNo' },
            { text: 'Job<br />No.', width: 65, dataIndex: 'JobNo' },
            { text: 'Item Type', width: 70, dataIndex: 'ItemType' },
            { text: 'Thickness<br />Depth', width: 65, dataIndex: 'ThicknessDepth' },
            { text: 'Cutter', width: 65, dataIndex: 'Cutter' },
            { text: 'Source', width: 65, dataIndex: 'Source' },
            { text: 'Qty', width: 40, dataIndex: 'Qty' },
            { text: 'Material', flex: 1, dataIndex: 'Material' },
            { text: 'Type', flex: 2, dataIndex: 'Type' },
            { text: 'Work', flex: 2, dataIndex: 'Work' },
            { text: 'Paint - Internal', flex: 2, dataIndex: 'PaintInternal' },
            { text: 'Paint - External', flex: 2, dataIndex: 'PaintExternal' },
            { text: 'Notes', flex: 2, dataIndex: 'Notes' },
            { text: 'Documented?', width: 75, dataIndex: 'Documented' },
            { text: 'Import<br />Date', width: 60, dataIndex: 'ImportDate' },
            {
                xtype: 'checkcolumn',
                sortable: false,
                header: 'Import?',
                width: 50,
                dataIndex:'ImportCheck'
            }
        ],
        features: [{
            id: 'group',
            ftype: 'groupingsummary',
            groupHeaderTpl: '{name}',
            enableGroupingMenu: false
        }],
        renderTo: Ext.get('sencha_confirmation')
    });
});

Answer 1

1. There's no need to save data from the grid to the store, since the content you're seeing in the grid is there because it is already in the store (given that the store is the data provider for the grid).

2. To send the data in this format, you simply need to configure your proxy's writer's allowSingle: false. This will force the proxy to send through the records it is persisting as an array always, even if there is only one record.

   Example:

   proxy: { writer: { allowSingle: false }, ... }

3. This can be accomplished by calling sync() on your store. Sync will automatically create a request to the url specified on your proxy, and will batch together new records, updated records, and deleted records. You can call this manually, or add autoSync: true to your store (I prefer controlling when it's called, but that's up to you).

Re: the MVC side of things, that's dependent on how your application is structured. For example, if you have a "save" button on the grid, you could bind to the button's click event, and in your controller listen for this click event and call your store's sync() method there. Of course, this is just an example: there are an number of events/conditions you could respond to and do the same thing.