Submit all of grid rows with Extjs form submit

Question

I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.

Model:

Ext.define('FM.model.DefineCode', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'id',  type: 'int'},
        {name: 'name',  type: 'string'},
        {name: 'filename',  type: 'string'}
    ],
    validations: [
        {type: 'presence',  field: 'id'},
        {type: 'presence',  field: 'name'},
        {type: 'presence',  field: 'filename'}
    ]
});

Store:

Ext.define('FM.store.DefineCode', {
    extend: 'Ext.data.Store',
    model: 'FM.model.DefineCode',
    autoLoad: true,
    data: []
});

View:

Ext.define('FM.view.map.DefineCode', {
    extend: 'Ext.window.Window',
    title: 'Define Code',
    alias: 'widget.mmDefineCode',
    width: 600,
    modal: true,
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'gridpanel',
            title: 'myGrid',
            store: 'DefineCode',
            columns: [
                {
                    text: 'Id',
                    xtype: 'rownumberer',
                    width: 20 
                }, {
                    text: 'Name',
                    dataIndex: 'name',
                    flex: 1, 
                    editor:{
                        xtype: 'textfield'
                    }
                }, {
                    text: 'File', 
                    dataIndex: 'filename', 
                    width: 200,
                    editor:{
                        xtype: 'filefield',
                        emptyText: 'Select your Icon',
                        name: 'photo-path',
                        buttonText: '',
                        flex: 1,
                        buttonConfig: {
                            iconCls: 'icon-upload-18x18'
                        },
                        listeners: {
                            change: function(e, ee, eee) {

                                var grid = this.up('grid');
                                var store = grid.getStore();
                                var newStore = Ext.create('FM.store.DefineCode',{});
                                store.insert(store.data.items.length, newStore);
                            }
                        }
                    },
                }, { 
                    text: '', 
                    width: 40 
                }
            ],
            height: 200,
            width: 600,
            plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1
                })
            ]}
        ],
    }],
    buttons: [{text: 'OK', action: 'OK'}],
    initComponent: function() {
        var me = this;


        Ext.apply(me, {});
        me.callParent(arguments);
    }
});

Controller:

...
form.submit({
    url: 'icon/create',
});

When I submit form, only last row is sending to server. Where is problem?

Answer 1

Why you using this ?

var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);

try using rowEditing to edit/submit 1 row data :

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 2,
    clicksToMoveEditor: 1,
    listeners: {
        'validateedit': function(editor, e) {},
        'afteredit': function(editor, e) {
            var me = this;
            var jsonData = Ext.encode(e.record.data);
            Ext.Ajax.request({
            method: 'POST',
            url: 'your_url/save',
            params: {data: jsonData},
            success: function(response){
                e.store.reload({
                    callback: function(){
                        var newRecordIndex = e.store.findBy(
                            function(record, filename) {
                                if (record.get('filename') === e.record.data.filename) {
                                    return true;
                                }
                                return false;
                            }
                        );
                        me.grid.getSelectionModel().select(newRecordIndex);
                    }
                });
            }
        });
            return true;
        }
    }
});

and place it to your plugin. I don't try it first, but may be this will help you a little.

AND this is for your controller to add a record from your grid, you need a button to trigger this function.

createRecord: function() {
    var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
    var r = Ext.ModelManager.create({
        id: '',
        name: '',
        filename: ''
    }, model);
    this.getYourgrid().getStore().insert(0, r);
    this.getYourgrid().rowEditing.startEdit(0, 0);
}

check this for your need, this is look a like. You need to specify the content-type.

And for your java need, please read this method to upload a file.