Extjs-如何在网格列中显示组合框

我有一个gridpanel包含日期和组合列

但我不想点击显示我的组合。我想显示我的组合没有点击，而不是像隐藏在单元格内

日期列也是一样，比如

我想切换到

单击编辑：0

但失败

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

---

如何做到这一点，多亏了

只有在您单击单元格时才会注入组合框或日期选择器，在您单击之前，它们根本不存在于网格中。更改单元格外观的方法是使用列上的渲染器。 通过这种方式，您可以添加一个假触发框作为背景图像或类似的内容

作为对您评论的回复，以下是您可以做到的：

{
    xtype: 'gridcolumn',
    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
        metaData.tdCls = 'fake-combo';

        return value;
    },
    text: 'MyColumn8',
    editor: {
        xtype: 'combobox',
        store: ...
    }
}

研究所有渲染器选项的。您可以指定不同的类和属性，DomHelper将使用这些类和属性。css类可以有一个背景图像，但您必须在这里进行实验。要获得与您想要执行的操作一致的布局并不容易，但是您可以完全访问渲染到单元中的div。 确保使用Firebug或Chrome开发工具检查结果，它将准确地向您显示发生了什么

---

虽然你可以截图一个组合框，并将其设置为背景图像。但最好不要尝试在渲染器中创建组合框，它不是这样工作的。每一行都有一个真正的组合框是自定义的，如果您有很多行，可能会影响性能。

在4.2x或更低版本中实现这一点的唯一方法是使用自定义组件，如Skiller的组件列。此列类型将允许您在单元格中插入任意组件

即将发布的ExtJS将有一个叫做Gadget Grid的东西，它将允许类似的功能

试试这个链接

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        header: 'Category',
        dataIndex: 'CategoryName',
        editor: {
            xtype: 'combobox',
            store: 'categoryStore',
            displayField: 'CategoryName',
            valueField: 'CategoryID'
        }
    }],
    width: 450,
    renderTo: Ext.getElementById('hede')
});

这是来自ExtJS5的

更新：

{
    xtype: 'widgetcolumn',
    text: 'Progress',
    width: 120,
    widget: {
        xtype: 'combobox'
    }
}

---

这一个很有魅力。

好的，下面是如何在Sencha EXTJS中使用组合框的完整示例：

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        xtype: 'gridcolumn',
        text: 'UserStatus',
        dataIndex: 'userstatus',
        editor: {
            xtype: 'combobox',
            allowBlank: false,
            displayField: 'Name',
            valueField: 'Id',
            queryMode: 'local',
            store: this.getStatusChoicesStore()
        }
    }],
    width: 450,
    renderTo: Ext.getElementById('hede')
});

现在，this.getStatusChoiceStore（）函数将为我们提供此组合框的选项（您可以在任何地方定义该函数，或者只将其内联到列定义中，如果我为其创建函数，它将更易于阅读）：

---

此外，还可以找到更多信息和示例。

但如果使用渲染器，必须返回组合框或日期X类型的对象？我如何将用户的选择放在该组合框中？这是如何回答上述问题的。@从这个问题中，我很惊讶，他不喜欢单击网格单元格来显示组合框。签出给定链接中的第二个示例。如何将用户的选择放入该组合框中？提供的链接目前不起作用。目前可能是这样的：

getStatusChoicesStore: function() {
    return Ext.create('Ext.data.Store', {
        data: [{
            Id: 0,
            Name: "Active"
        }, {
            Id: 1,
            Name: "Inactive"
        }]
    });
},