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?

have you checked your response after sending the data ? – Eko Junaidi Salam Feb 18 '15 at 09:40 — Eko Junaidi Salam, Feb 18 '15 at 09:40

score 1 · Answer 1 · edited May 23 '17 at 12:12

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.

wait a minute, you want to submit a "file" or just the "filename" ? if you want to submit a "file" you must let ajax to do that. you can use POST method and you catch your response using your backend like PHP or the others to put your file to your server., how you catch your response for the file ? — Eko Junaidi Salam, Feb 18 '15 at 10:28
I want to submit a "file" and I user Java. How use Ajax to sent the file? — Morteza Malvandi, Feb 18 '15 at 10:32
I've edited my answer, and I share more references for you to try it out. Sorry i use PHP to get the response and store it to the server. If you use a java, check the link in my answer. — Eko Junaidi Salam, Feb 18 '15 at 10:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71167/discussion-between-morteza-malvandi-and-eko-junaidi-salam). — Morteza Malvandi, Feb 18 '15 at 11:17

Submit all of grid rows with Extjs form submit

1 Answers1

Linked