如何配置Ext.grid.plugin.Editable按钮?

时间:2018-12-18 09:15:44

标签: extjs extjs4 sencha-touch

我需要在网格中输入ActiveAndroid to DBFlow。现在,我想在默认面板中更改类,女巫向右滑动以编辑行。 但是我不明白如何管理提交和删除按钮功能(例如,我想为提交按钮定义POST)。 toolbarConfig -不起作用

Ext.grid.plugin.Editable

1 个答案:

答案 0 :(得分:2)

以下是具有自定义表单的网格的示例:

https://fiddle.sencha.com/#view/editor&fiddle/2ojt

// model
Ext.define('Fiddle.model.Document', {
    extend: 'Ext.data.Model',

    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'document',
        type: 'string'
    }, {
        name: 'type',
        type: 'string'
    }]
});

//view (grid)
Ext.define('Fiddle.view.DocumentGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'documentlist',

    store: {
        model: 'Fiddle.model.Document',
        data: [{
            id: 1,
            document: 'My First Doc',
            type: 'pdf'
        }, {
            id: 2,
            document: 'My Second Doc',
            type: 'pdf'
        }]
    },

    columns: [{
        text: 'id',
        dataIndex: 'id'
    }, {
        text: 'Document',
        dataIndex: 'document',
        flex: 1
    }, {
        text: 'Type',
        dataIndex: 'type',
    }]
});

var form = Ext.create('Ext.form.Panel', {
    title: 'Form',
    region: 'east',
    layout: {
        type: 'vbox',
        algin: 'stretch'
    },
    collapsible: true,
    bodyPadding: 10,
    hidden: true,
    items: [{
        xtype: 'textfield',
        name: 'document',
        fieldLabel: 'Document'
    }, {
        xtype: 'combo',
        name: 'type',
        fieldLabel: 'type',
        store: ['pdf', 'doc', 'docx', 'odf']
    }],
    buttons: [{
        text: 'Save',
        handler: function () {
            form.updateRecord();
            form.hide();
        }
    }]

});

var grid = Ext.create('Fiddle.view.DocumentGrid', {
    title: 'Document Grid',
    region: 'center',
    listeners: {
        selectionchange: function (selModel, selection) {
            if (Ext.isEmpty(selection)) {
                form.hide();
                return;
            }
            form.loadRecord(selection[0]);
            form.show();
        }
    }

});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            layout: 'fit',

            layout: 'border',
            width: 600,
            height: 600,
            items: [
                grid, form
            ]

        });
    }
});