ExtJs - 基于记录值的不同xtype的列编辑器

时间:2014-10-20 14:37:07

标签: extjs extjs4 extjs5

我有一个启用了rowediting插件的网格面板。我想知道是否可以根据从服务器返回的数据在同一单元格中显示checkbox控件或numberfield。我之前没有见过这样的东西,谷歌搜索没有产生任何结果,所以根本不可能。看起来我必须指定不同的编辑器类型,不是每列而是每个单元格。

我怎样才能做到这一点?

P.S。我必须有机会编辑该单元格,即更改数字值或选中/取消选中复选框。

3 个答案:

答案 0 :(得分:2)

这很容易实现,您需要使用网格列的getEditor方法并让它返回您想要的表单字段:

示例:

{
    xtype: 'gridcolumn',
    getEditor: function(record) {
        var grid = this.up('grid'),
            cellediting = grid.findPlugin('cellediting'),
            editors = cellediting.editors,
            editor = editors.getByKey(this.id),
            fieldType;

        if (editor) {
        // Do this to avoid memory leaks
            editors.remove(editor);
        }
        fieldType = isNaN(parseFloat(record.get('salary'))) ? 'textfield' : 'numberfield';

        return {
            xtype: fieldType,
            allowBlank: false
        };
    },
    dataIndex: 'salary',
    text: 'Salary',
    flex: 1
}

我已经创建了一个演示如何使用此方法的小提琴,如果列Salary包含一个字符串,它将使用文本字段进行编辑,如果它包含一个数字,它将使用Numberfield进行编辑。

希望有所帮助

小提琴:https://fiddle.sencha.com/#fiddle/c2m

  • 我的小提琴正在使用CellEditor插件,您必须进行调整以使其与RowEditor插件一起使用,以供进一步参考,查看Grid Column和getEditor方法的文档。

答案 1 :(得分:1)

非常感谢Guilherme Lopes开始使用的优秀代码。以下是我最终得到的样本:

 var data = [{
                name: 'Richard Wallace',
                age: 24,
                hired: '9/21/2013',
                active: true,
                salary: 1,
                checkbox: true
            }, {
                name: 'Phyllis Diaz',
                age: 29,
                hired: '1/27/2009',
                active: false,
                salary: 41244,
                checkbox: false
            }, {
                name: 'Kathryn Kelley',
                age: 23,
                hired: '9/14/2011',
                active: false,
                salary: 98599.9,
                checkbox: false
            }, {
                name: 'Annie Willis',
                age: 36,
                hired: '4/11/2011',
                active: true,
                salary: 0,
                checkbox: true
            }];

            var store = Ext.create('Ext.data.Store', {
                data: data,
                fields: [{
                    name: 'name'
                }, {
                    type: 'float',
                    name: 'age'
                }, {
                    type: 'date',
                    name: 'hired'
                }, {
                    type: 'boolean',
                    name: 'active'
                }, {
                    name: 'salary'
                }]
            });

            Ext.define('MyApp.view.MyGridPanel', {
                extend: 'Ext.grid.Panel',
                alias: 'widget.mygridpanel',
                height: 315,
                width: 784,
                title: 'Employees',
                store: store,
                viewConfig: {
                    listeners: {
                        beforecellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
                            if (cellIndex == 4 && record.get('checkbox')) {
                                if (record.get('salary')) {
                                    record.set('salary', 0);
                                } else {
                                    record.set('salary', 1);
                                }
                                return false;
                            }
                            return true;
                        }
                    }
                },

                columns: [{
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name',
                    flex: 1,
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    xtype: 'gridcolumn',
                    dataIndex: 'age',
                    text: 'Age'
                }, {
                    xtype: 'datecolumn',
                    dataIndex: 'hired',
                    text: 'Hired',
                    flex: 1
                }, {
                    xtype: 'checkcolumn',
                    dataIndex: 'active',
                    text: 'Active'
                }, {
                    xtype: 'gridcolumn',
                    getEditor: function (record) {
                        var fieldType = record.get('checkbox') ? 'checkboxfield' : 'textfield';
                        return Ext.create('Ext.grid.CellEditor', {
                            field: {
                                xtype: fieldType,
                                allowBlank: false
                            }
                        });
                    },
                    renderer: function (value, metaData) {
                        if (metaData.record.get('checkbox')) {
                            if (metaData.record.get('salary')) {
                                return '<div style="text-align: center"><img class="x-grid-checkcolumn x-grid-checkcolumn-checked" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';

                            } else {
                                return '<div style="text-align: center"><img class="x-grid-checkcolumn" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
                            }
                        }
                        return value;
                    },
                    dataIndex: 'salary',
                    text: 'Salary',
                    flex: 1
                }],
                plugins: [{
                    ptype: 'cellediting',
                    autoCancel: false,
                    clicksToEdit: 1
                }]
            });
        Ext.create('MyApp.view.MyGridPanel', {
            renderTo: Ext.getBody()
        });

关于Sencha's fiddle https://fiddle.sencha.com/#fiddle/c3p

的工作示例

答案 2 :(得分:0)

编辑器包含一个字段,此编辑器用于整个列。您无法为一列指定两个xtypes或多个编辑器。

尽管如此,这并非完全不可能,但需要一些工作。 您必须使用自定义xtype定义新的自定义字段。 告诉此字段要么渲染一个复选框字段,要么是一个数字字段,具体取决于值。

这将要求您覆盖/实现Ext.form.field.Base具有的大部分功能......