Extjs - 如何在网格列中显示组合框 [英] Extjs - How to show combobox in Grid column

问题描述

我有一个包含日期和组合列的网格面板 用于所有渲染器选项.您可以指定不同的类以及 DomHelper 将使用的属性.css 类可以有背景图片，但您必须在这里进行试验.获得与您想做的事情一致的布局并不容易，但您可以完全访问呈现到单元格中的 div.请务必使用 Firebug 或 Chrome Dev Tools 检查结果，它会准确显示发生了什么.

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

I have a gridpanel include date and combo column jsfiddle

But I don't want click to show my combo. I want show my combo without click, not hide inside cell like

and the same for date column like

I think chage to clicksToEdit: 0 but fail

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

How to do that, thanks

解决方案

The combobox or datepicker are only injected once you click on the cell, they simply don't exist in the grid before you click. The way to change the appearance of a cell is by using the renderer on the column. This way you could add a fake triggerbox as a background image or something like that.

In reply to your comment, here's how you could do it:

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

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

Study the docs for all the renderer options. There are different classes you can specify and attributes that will be used by the DomHelper. The css class could have a background image, but you have to experiment here. It won't be easy to get a consistent layout with what you want to do, but you have full access to the div that is rendered into the cell. Make sure to inspect the results with Firebug or Chrome Dev Tools, it will show you exactly what happens.

Though you could screenshot a combobox and set it as a background image. But better don't try to create a combobox in the renderer, that's not how it works. Having a real combobox for every row is custom only and could impact performance if you have a lot of rows.

这篇关于Extjs - 如何在网格列中显示组合框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！