ExtJS。属性网格的 sourceConfig 中的复选框答案

【问题标题】：ExtJS. Checkbox in sourceConfig of property gridExtJS。属性网格的 sourceConfig 中的复选框
【发布时间】：2016-12-06 10:25:09
【问题描述】：

在属性网格的sourceConfig 中，我有一个字段，我希望将其显示为复选框。

目前，我只设置了编辑器，但只有在单击字段时才会呈现复选框，否则会显示简单的文本：

field: {
    editor:
            Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Checkbox')})
}

问题是，如何设置渲染器以显示复选框？

【问题讨论】：

标签： javascript extjs checkbox

【解决方案1】：

您需要在源配置中编写render 函数。

类似这样的：

Ext.create('Ext.grid.property.Grid', {
    title: 'Properties Grid',
    width: 300,
    renderTo: Ext.getBody(),
    source: {
        "(name)": "My Object",
        Available: false,
        NotAvaliable: true,
        "Version": 0.01,
        "Description": "A test object"
    },
    sourceConfig: {
        Available: {
            renderer: function(d){
                var checked = d ? 'checked' : '';
                return '<center><input type="checkbox" name="something" '+checked+'></center>';
            },
            editor: Ext.create('Ext.form.field.Checkbox')
        },
        NotAvaliable: {
            renderer: function(d){
                var checked = d ? 'checked' : '';
                return '<center><input type="checkbox" name="something" '+checked+'></center>';
            },
            editor: Ext.create('Ext.form.field.Checkbox')
        }

    }

});

https://fiddle.sencha.com/#view/editor&fiddle/1lsk

【讨论】：