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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Extjs - 如何在Grid列中显示组合框相关的知识,希望对你有一定的参考价值。

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

但我不想点击显示我的组合。我希望在没有点击的情况下显示我的组合,而不是隐藏在单元格中

和日期栏一样

我认为chaz to clicksToEdit: 0但失败了

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

怎么做,谢谢

答案

在4.2x或更低版本中实现此目的的唯一方法是使用自定义组件,如Skirtle的组件列http://skirtlesden.com/ux/component-column此列类型将允许您将任意组件插入单元格。

即将发布的ExtJS将有一个名为Gadget Grid的东西,它将允许类似的功能。

另一答案

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

在回复您的评论时,您可以通过以下方式进行操作:

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

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

研究docs所有渲染器选项。您可以指定不同的类以及DomHelper将使用的属性。 css类可以有背景图像,但你必须在这里进行实验。使用您想要的内容获得一致的布局并不容易,但您可以完全访问渲染到单元格中的div。确保使用Firebug或Chrome Dev Tools检查结果,它会准确显示发生的情况。

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

另一答案
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')
});
另一答案

试试这个链接..

http://docs.sencha.com/extjs/5.0/components/grids/widgets_widgets_columns.html

这是来自Extjs 5。

更新:

{
    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.getStatusChoicesStore()函数将为我们提供这个组合框的选择(你可以在任何地方定义该函数,或者只是在列定义中内联它,对我来说,如果我为它创建一个函数,它会更容易阅读) :

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

此外,更多信息和示例可以找到here

以上是关于Extjs - 如何在Grid列中显示组合框的主要内容,如果未能解决你的问题,请参考以下文章

Extjs中如何遍历grid的数据(正在显示的数据)

ExtJS4:如何在文本框、组合框等旁边显示验证错误消息

extjs:加载时如何设置组合框的值

extjs 组合框在单击时显示空白列表

如何让组合框选择与 ExtJS6 中显示的值不同的值?

如何在网格列中显示值。