0
A
回答
2
我成功地做到了一种行跨度,而不是行分裂的。海事组织更容易,它看起来像附加图像上的网格一样。示例代码:
var grid = new Ext.grid.EditorGridPanel({
[...],
// hook up events
initComponent: function() {
Ext.grid.GridPanel.prototype.initComponent.call(this);
this.getView().on('refresh', this.updateRowSpan, this);
this.getView().on('rowupdated', this.updateRowSpan, this);
},
onLayout : function(vw, vh) {
this.updateRowSpan();
},
// set span on rows
updateRowSpan: function() {
var columns = this.getColumnModel().config,
view = this.getView(),
store = this.getStore(),
rowCount = store.getCount(),
column = columns[0], // put propert column index here
dataIndex = column.dataIndex,
spanCell = null,
spanCount = null;
spanValue = null;
for (var row = 0; row < rowCount; ++row) {
var cell = view.getCell(row, 0),
record = store.getAt(row),
value = record.get(dataIndex);
if (spanValue != value) {
if (spanCell !== null) {
this.setSpan(Ext.get(spanCell), spanCount);
}
spanCell = cell;
spanCount = 1;
spanValue = value;
} else {
spanCount++;
}
}
if (spanCell !== null) {
this.setSpan(Ext.get(spanCell), spanCount);
}
},
// set actual span on row
setSpan: function(cell, count) {
var view = this.getView(),
innerCell = Ext.get(cell.down('*')),
height = cell.getHeight(),
width = cell.getWidth();
cell.setStyle('position', 'relative');
if (count == 1) {
innerCell.setStyle('position', '');
innerCell.setStyle('height', '');
innerCell.setStyle('height', '');
} else {
innerCell.setStyle('position', 'absolute');
innerCell.setStyle('height', (height * count - cell.getPadding('tb') - innerCell.getPadding('tb')) + 'px');
innerCell.setStyle('width', (width - cell.getPadding('lr') - innerCell.getPadding('lr')) + 'px');
}
}
});
此代码通过应用position: absolute
和足够大的尺寸,以低于覆盖行改变了.x-grid3-cell-inner
风格。请注意,您还必须应用一些不透明背景才能使其工作。工作样本:http://jsfiddle.net/RpxZ5/8/
我第一次写代码的Ext JS 4,如果你有兴趣,这里是工作示例:http://jsfiddle.net/wQSQM/3/
+0
这是完美的! – shiva
+0
它确实有效,但有一个问题。由于'.X-GRID3 - 细胞inner'施加'位置:absolute'的'forcefit'功能停止工作对于该行。你可以检查你提供的jsfiddle。任何想法如何解决? 这个问题只在3.4版本中。它可以与4.x一起使用 –
相关问题
- 1. Ext JS EditorGridPanel不可编辑
- 2. 在Ext JS 2.0.2中从EditorGridPanel删除行
- 3. GWT-Ext EditorGridPanel渲染问题
- 4. Ext JS - 多行显示字段
- 5. 显示/隐藏在Ext JS的一系列单行元件4
- 6. 网格显示在Ext JS中
- 7. 如何在phpExcel中拆分单元格
- 8. Ext Js 4 - 网格单元格到单元格的拖放?
- 9. 将Excel中的多值单元格拆分成行
- 10. 拆分单元格中的字符串并创建多行
- 11. 拆分分隔字符串/单元格的值为多行
- 12. 如何将字符串拆分为多个单元格的单元格?
- 13. EXT JS 4.1如何在tabPanel中显示网格
- 14. 将行中的单元格中的文本拆分为多行,对于多列
- 15. 拆分多个单元格到列
- 16. JTable拆分单元格。我如何
- 17. ExtJS的 - EditorGridPanel:当选定单元格
- 18. 如何在熊猫数据框的多行中拆分单元格的值?
- 19. 如何编辑Ext JS 3.4中的网格面板中的单元格?
- 20. 如何将多行数据显示为逗号分隔的单个单元格
- 21. 如何隐藏和显示ext js 4.2中的网格面板行?
- 22. 如何在Ext Js中显示子菜单?
- 23. Ext JS的网格显示多个报头
- 24. Ext Js - 显示/隐藏网格的标题菜单
- 25. ExtJS EditorGridPanel〜设置行高和单元格宽度以显示所有单元格内容
- 26. 如何拆分更多的活动单元格
- 27. 如何在EXT-GWT中拆分面板?
- 28. 如何在单独的Ext网格中显示相关模型?
- 29. Ext Js如何将组合框添加到网格中的特定单元格?
- 30. 如何在iphone中显示多行内表格单元格中的文本?
哪个Ext JS的版本? – Krzysztof
ExtJS的3.4版本 – shiva
在内线4+很容易 - 你可以,而不是分裂,只设置rowspan的第一列细胞。另一方面,在Ext 3.4中并不那么容易。每行都被渲染为用div包裹的独立表格,所以rowspan将不起作用。最简单的方法可能是改变第一列中的单元格样式并将它们渲染到下面的单元格中。我稍后会想出一些事情。 – Krzysztof