17

我有一个网格面板，包括日期和组合列jsfiddle

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

在此处输入图像描述

和日期列一样

在此处输入图像描述

我想改变clicksToEdit: 0但失败

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

怎么做，谢谢

4

5 回答 5

9

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

在回复您的评论时，您可以这样做：

{
    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 开发工具检查结果，它会准确地告诉你发生了什么。

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

于 2013-07-18T09:49:54.510 回答
8

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

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

于 2013-07-19T05:15:25.630 回答
6 
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')
});
于 2013-10-10T11:16:23.140 回答
3

试试这个链接。。

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

这是来自 Extjs 5。

更新：

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

这个工作就像一个魅力。

于 2015-02-03T12:05:05.270 回答
1

好的，这里有一个完整的例子来说明如何在 Sencha EXTJS 中使用 Combo Boxes：

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"
        }]
    });
},

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

于 2015-10-06T11:30:52.743 回答