HTML 表单到 ExtJS 表单

HTML Form to ExtJS Form

我有一个 html 表单，其中的字段非常分散。该页面是使用 html 表 - rowspan 和 colspan 组合创建的。

我需要将此表单转换为 ExtJS 并在窗口中显示。

经过一些研究，我觉得表格布局可能是定位字段的最佳选择。但是我一直面临以下几个问题：

如果我将 rowspan 或 colspan 设置为 2 或更多，那么字段的大小也不会增加以占用可用空间并保持在单列中。

如果我调整窗口大小，则表格不会调整大小(不过，表格会随着顶部的 tbar 展开以占据整个空间)。

我将布局用作窗口的"适合"，并将布局用作表单的"表格"。

我也尝试过对表单使用"锚"布局，然后使用带有表格布局的字段集，但定位不起作用。

有人可以说明一下吗。以下是我正在使用的基本代码片段：

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

相关讨论

基本上我的布局表也有同样的问题，找不到任何方法将我的显示字段跨越到 td 的长度，并且 2 列字段也有同样的问题。

我更喜欢的解决方案是扩展表格布局并赋予它灵活性

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

Ext.define('Extended.TableLayout', {
alias:'layout.extendedTable',
extend: 'Ext.layout.container.Table',
type: 'extendedTable',
columns: 2,
rightMargin: 20,
tableAttrs:{
width: '100%'
},
tdAttrs:{
width:'50%'
},
itemCls:'x-table-cell',
renderItems: function(items) {

var totalWidth = this.getLayoutTargetSize().width,
len = items.length,
i, item, colNr;

for (i = 0; i < len; i++) {
item = items[i];

colNr = this.columns;
if ((colNr > 1) && Ext.isNumber(item.colspan)) {
colNr = colNr - item.colspan + 1;
}
item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
}
this.callParent(arguments);
}
});

使用 extendedTable 布局，我得到了想要的外观