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

Posted 2023-02-26

【中文标题】如何配置 Ext.grid.plugin.Editable 按钮？

【英文标题】：How to configurate Ext.grid.plugin.Editable buttons?

【发布时间】：2018-12-18 09:15:43

【问题描述】：

我的网格中需要Ext.grid.plugin.Editable。现在我想更改默认面板内的类，女巫幻灯片向右编辑行。 但我不明白如何管理提交和删除按钮功能（例如我想为提交按钮定义 POST）。 toolbarConfig - 不起作用

Ext.define('Foresto.model.EditListRenters', 
  extend: 'Ext.grid.Grid',
  xtype: 'rentlist',
  requires: [ //some plugins and models
  ],
  frame: true,
  store: 
    model: 'Foresto.model.RentsListModel',
    autoLoad: true,
    pageSize: 0,
    proxy: 
      type: 'ajax',
      url: '/api/renter/',
      reader: 
        type: 'json',
        rootProperty: 'results'
      

    
  ,
  plugins: [
      type: //someplugins
    ],
    /* toolbarConfig: 
    xtype:'titlebar',
    docked:'top',
    items:[
    xtype:'button', // it is don't work
    ui:'decline',
    text:'decline',
    align: 'right',
    action:'cancel'
    ]
    , */

    columns: [
      text: 'id',

      dataIndex: 'id'
    , 
      text: 'document',
      dataIndex: 'document',
      editable: true,
      flex: 1

    , 
      text: 'document_num',
      dataIndex: 'document_num',
      editable: true
    , 
      text: 'legal_type',
      dataIndex: 'legal_type',
      editable: true

    , 
      text: 'fio_represent',
      dataIndex: 'fio_represent',
      editable: true
    , 
      text: 'position_represent',
      dataIndex: 'position_represent',
      editable: true,
    , 
      text: 'certificate',
      dataIndex: 'certificate',
      editable: true,
    ]
  );

【问题讨论】：

你的问题不是很清楚。您想要网格的 rowEditor、单元格编辑器还是自定义编辑器？或者只是滑入带有表单的面板，您可以在其中编辑一行？

我的意思是：“在带有可以编辑行的表单的面板中滑动”

没有开箱即用的插件。您必须： - 创建一个表单（其中包含所有字段） - 将其停靠在左侧或右侧 - 在您单击或双击记录时让它展开/显示。 - 然后您必须获取所选记录并将其设置或绑定到表单。

或者，如果您不想这样做，您可以选择行编辑器？ docs.sencha.com/extjs/6.5.2/classic/… 你仍然需要在每个字段上定义一个编辑器..

谢谢。但是这个插件需要什么？只是为了展示机会？我真的不明白是什么，如果我们必须创建一些新的类和函数来实现编辑网格行的幻灯片

【参考方案1】：

这是一个带有自定义表单的网格示例：

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
            ]

        );
    
);