使用Extjs表單提交所有網格行

Question

我有一個表格中的網格面板。 網格面板的任何行都有一個文件字段。 我想將任何行（名稱字段和文件名字段）發送到服務器。

型號 ：

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

商店：

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

視圖：

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

控制器：

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

當我提交表單時，只有最后一行發送到服務器。 問題在哪里？

Answer 1

為什么使用這個？

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

嘗試使用rowEditing編輯/提交1行數據：

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

並將其放置到您的插件中。 我沒有先嘗試，但是可能會有所幫助。

而且這是為了讓您的控制器從網格中添加一條記錄，您需要一個按鈕來觸發此功能。

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

檢查這對您的需要，這是看起來像。 您需要指定內容類型。

為了您的Java需求，請閱讀此方法以上傳文件。