[英]Extjs - How to show combobox in Grid column
我有一个gridpanel包括日期和组合列jsfiddle
但我不想点击显示我的组合。 我希望在没有点击的情况下显示我的组合,而不是隐藏在单元格中
和日期栏一样
我觉得chage 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: ...
}
}
研究所有渲染器选项的文档 。 您可以指定不同的类以及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"
}]
});
},
此外,可以在此处找到更多信息和示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.