RowWrap.js
3.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
* @private
*/
Ext.define('Ext.grid.feature.RowWrap', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.rowwrap',
// turn off feature events.
hasFeatureEvent: false,
init: function() {
if (!this.disabled) {
this.enable();
}
},
getRowSelector: function(){
return 'tr:has(> ' + this.view.cellSelector + ')';
},
enable: function(){
var me = this,
view = me.view;
me.callParent();
// we need to mutate the rowSelector since the template changes the ordering
me.savedRowSelector = view.rowSelector;
view.rowSelector = me.getRowSelector();
// Extra functionality needed on header resize when row is wrapped:
// Every individual cell in a column needs its width syncing.
// So we produce a different column selector which includes al TDs in a column
view.getComponentLayout().getColumnSelector = me.getColumnSelector;
},
disable: function(){
var me = this,
view = me.view,
saved = me.savedRowSelector;
me.callParent();
if (saved) {
view.rowSelector = saved;
}
delete me.savedRowSelector;
},
mutateMetaRowTpl: function(metaRowTpl) {
var prefix = Ext.baseCSSPrefix;
// Remove "x-grid-row" from the first row, note this could be wrong
// if some other feature unshifted things in front.
metaRowTpl[0] = metaRowTpl[0].replace(prefix + 'grid-row', '');
metaRowTpl[0] = metaRowTpl[0].replace("{[this.embedRowCls()]}", "");
// 2
metaRowTpl.unshift('<table class="' + prefix + 'grid-table ' + prefix + 'grid-table-resizer" style="width: {[this.embedFullWidth()]}px;">');
// 1
metaRowTpl.unshift('<tr class="' + prefix + 'grid-row {[this.embedRowCls()]}"><td colspan="{[this.embedColSpan()]}"><div class="' + prefix + 'grid-rowwrap-div">');
// 3
metaRowTpl.push('</table>');
// 4
metaRowTpl.push('</div></td></tr>');
},
embedColSpan: function() {
return '{colspan}';
},
embedFullWidth: function() {
return '{fullWidth}';
},
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount(),
fullWidth = headerCt.getFullWidth(),
items = headerCt.query('gridcolumn'),
itemsLn = items.length,
i = 0,
o = {
colspan: colspan,
fullWidth: fullWidth
},
id,
tdClsKey,
colResizerCls;
for (; i < itemsLn; i++) {
id = items[i].id;
tdClsKey = id + '-tdCls';
colResizerCls = Ext.baseCSSPrefix + 'grid-col-resizer-'+id;
// give the inner td's the resizer class
// while maintaining anything a user may have injected via a custom
// renderer
o[tdClsKey] = colResizerCls + " " + (orig[tdClsKey] ? orig[tdClsKey] : '');
// TODO: Unhackify the initial rendering width's
o[id+'-tdAttr'] = " style=\"width: " + (items[i].hidden ? 0 : items[i].getDesiredWidth()) + "px;\" "/* + (i === 0 ? " rowspan=\"2\"" : "")*/;
if (orig[id+'-tdAttr']) {
o[id+'-tdAttr'] += orig[id+'-tdAttr'];
}
}
return o;
},
getMetaRowTplFragments: function() {
return {
embedFullWidth: this.embedFullWidth,
embedColSpan: this.embedColSpan
};
},
getColumnSelector: function(header) {
var s = Ext.baseCSSPrefix + 'grid-col-resizer-' + header.id;
return 'th.' + s + ',td.' + s;
}
});