当前位置：首页技术文章正文

HTML 表单到 ExtJS 表单 | 珊瑚贝

01-05 技术文章 288

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

var form = Ext.create(‘Ext.form.Panel’, {
url:’voyage_berth_monitoring.php’,
fieldDefaults: {
labelAlign: ‘right’
},
layout:{
type:’table’,
columns:3
},
defaults:{
anchor:’100%’
},
tbar:[
{
xtype:’button’,
text:’Clear’
},
{
xtype:’button’,
text:’Delete’
},
{
xtype:’tbfill’
},
{
xtype:’button’,
text:’Save’
},
{
xtype:’button’,
text:’Exit’
}
],
items: [

{
fieldLabel:’item’,
xtype:’textfield’

},
{
fieldLabel:’item’,
xtype:’textfield’,
colspan:2

},
{
fieldLabel:’item’,
xtype:’textfield’

},
{
fieldLabel:’item’,
xtype:’textfield’

},
{
fieldLabel:’item’,
xtype:’textfield’

}

]
});

var win = Ext.create(‘Ext.window.Window’, {
title: ‘Window’,
closable: true,
closeAction:’hide’,
minimizable:true,
maximizable:true,
height:350,
width:750,
layout:’fit’,
autoScroll:true,
items: form
});

win.show();

已经看过：http://dev.sencha.com/deploy/ext-4.0.0/examples/form/dynamic??.html 表格 3 会有所帮助。您也可以将顶部渲染到视口：Ext.create(‘Ext.Viewport’, { \tlayout: ‘fit’, \titems: [top], \trenderTo: Ext.getBody() \t});
感谢您的帮助 Xupypr。我试过了，但是这种结构也不允许像 html 的 table 标记那样具有灵活性，我们可以控制页面的每个部分。此外，使用大量容器在页面中进行所需的定位也使其有点复杂。这种灵活性是不是通过extjs的表格布局是不可能的？

基本上我的布局表也有同样的问题，找不到任何方法将我的显示字段跨越到 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 布局，我得到了想要的外观

扩展是优秀的 Nscob。谢谢分享。不过，我通过结合使用列和 hbox 布局来达到我的目的。但肯定会接触到您为未来的应用程序创建的内容。

另一种方法是将您的 HTML 表单数据序列化为 JSON 并将其加载到 EXT 存储中。一旦它在商店里，EXT 会很乐意用它做任何你想做的事情。

感谢 Diodeus，但这样做可能违反了将”视图”部分与应用程序的其余部分分开的规则。

来源：https://www.codenong.com/7121063/

微信公众号

手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_9046.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

0

分享到：