主要原理:
[color=darkred][b]利用{html : '<pre> </pre>'}填充空格:[/b][/color]
若按钮紧挨着一个输入框:
{
layout : 'table',
items : [{layout : 'form',items : [txt1]},
{layout : 'form',items : [btn1]}
]
}
[color=darkred][b]利用{html : '<pre> </pre>'}填充空格:[/b][/color]
var Text1 = new Ext.form.TextField({
fieldLabel : 'Text1',
name : 'creator',
width : 100
});
var Text2 = new Ext.form.NumberField({
fieldLabel : 'Text2',
name : 'orderId',
width : 100
});
var Text3 = new Ext.form.DateField({
fieldLabel : '到',
name : 'Text3',
width : 100,
value : null,
format : 'Y-m-d'
});
var searchBtn2 = new Ext.Button({
text : '查询2'
});
var resetBtn2 = new Ext.Button({
text : '重置2'
})
var formPanel = new Ext.form.FormPanel({
height : 100,
layout : 'table',
layoutConfig : {
columns : 2
},frame : true,
defaults : {
bodyStyle : 'padding: 0px;',
border : false
},
labelAlign : 'right',
labelWidth : 100,
items : [{
layout : 'form',
items : [Text1]
}, {
layout : 'form',
items : [Text2]
}, {
layout : 'form',
items : [Text3]
}, {
layout : 'table',
items : [{html : '<pre> </pre>'}, searchBtn2, resetBtn2]
}]
});
若按钮紧挨着一个输入框:
{
layout : 'table',
items : [{layout : 'form',items : [txt1]},
{layout : 'form',items : [btn1]}
]
}
本文介绍使用ExtJS框架进行表单布局的具体方法,包括TextField、NumberField和DateField等组件的应用,以及如何通过预定义的布局配置实现按钮与输入框的紧密排列。
427

被折叠的 条评论
为什么被折叠?



