extjs 4 如何在网格单元格中保留组合框答案

【问题标题】：extjs 4 How too keep combobox in grid cellextjs 4 如何在网格单元格中保留组合框
【发布时间】：2023-03-15 06:23:01
【问题描述】：

我在其他地方看到过类似的问题没有得到解答。我想在一列中有一个组合框，里面有两个选项（ASC，DEC）。我希望它显示在每一行中，或者至少在未选中时显示其值。

我知道在每一行中渲染一个组合框不是一个“好主意”，但在这种情况下，我知道我最多会有大约 20 行，所以这应该不是什么大问题。如果无法做到这一点，我希望从组合框中显示选定的值。目前，当我单击一行时，我只会出现组合框，这没有多大意义，因为除非你正在做，否则你看不到你的选择。有什么办法解决这个问题？

另外，我想摆脱单击一行时弹出的更改和取消按钮，我只想能够使用组合框编辑单元格，并让它自动更改/保存。

【问题讨论】：

标签： extjs datagrid combobox extjs4

【解决方案1】：

您可以为combo 设置默认值。

这应该会在启动时渲染。

使用单元格renderer 到render 和combo 的displayField 到您的网格中。遵循一个可以在其中一个 API 代码框中张贴的工作示例。

工作JSFiddle

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'id'],
    data: {
        'items': [{
            "name": "Lisa",
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224",
            "id": 0
        }, {
            "name": "Bart",
            "email": "bart@simpsons.com",
            "phone": "555-222-1234",
            "id": 1
        }, {
            "name": "Homer",
            "email": "home@simpsons.com",
            "phone": "555-222-1244",
            "id": 2
        }, {
            "name": "Marge",
            "email": "marge@simpsons.com",
            "phone": "555-222-1254",
            "id": 3
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
    return function(value) {
        var idx = combo.store.find(combo.valueField, value);
        var rec = combo.store.getAt(idx);
        return (rec === null ? '' : rec.get(combo.displayField));
    };
}
// the combo store
var store = new Ext.data.SimpleStore({
    fields: ["value", "text"],
    data: [
        [1, "Option 1"],
        [2, "Option 2"]
    ]
});
// the edit combo
var combo = new Ext.form.ComboBox({
    store: store,
    valueField: "value",
    displayField: "text"
});


// demogrid
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'Phone',
        dataIndex: 'phone'
    }, {
        header: 'id',
        dataIndex: 'id',
        editor: combo,
        renderer: comboBoxRenderer(combo)
    }],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

【讨论】：

通过什么配置：我有价值：'ASC'，这不是诀窍
@Bbb 我在上面...希望让它运行... ;)
@Bbd 这行得通。使用渲染器，该渲染器使用组合的显示字段来渲染组合的显示值以进行编辑。
我也是这样做的
我将其调整为对 MVC 更友好：code renderer: function (value, metaData, record, rowIndex, colIndex, store) { if (value == '') return '';@ 987654329@ var combo = this.columns[colIndex].getEditor(); var sto = Ext.getStore(combo.store); var idx = sto.find(combo.valueField, value); var rec = sto.getAt(idx); return (rec === null || rec === undefined ? '' : rec.get(combo.displayField)); }

【解决方案2】：

{
    header: 'Your header',
    dataIndex: 'your Column',
    editor: {
        xtype: 'combobox',
        store: yourStore,
        queryMode: 'local',
        displayField: 'Your Display..',
        valueField: 'Your Value'
    }

【讨论】：