Ext Js 3.2 form表单布局的小例子
1：代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>form表单布局的简单例子</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext3.2/ext-all-debug.js"></script>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var formPanel = new Ext.form.FormPanel({
labelAlign: 'right', //标签位置
labelWidth: 50, //标签宽度
buttonAlign: 'center',
width: 600,
title: 'form',
frame: true,
items: [{
layout: 'column', //布局方式
items: [{
columnWidth: .7, //列宽
xtype: 'fieldset',
checkboxToggle: true,
title: '单纯输入',
autoHeight: true,
defaults: {width: 300},
defaultType: 'textfield', //默认类型
items: [{
fieldLabel: '姓名',
name: 'name'
}, {
xtype: 'combo',
fieldLabel: '性别',
name: 'sex',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['man', '男'],
['woman', '女']
]
}),
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: '请选择'
}, {
xtype: 'textarea',
fieldLabel: '个性签名',
name: 'signature'
}, {
xtype: 'hidden',
name: 'hidden'
}]
}, {
columnWidth: .3,
layout: 'form',
items: [{
xtype: 'fieldset',
checkboxToggle: true,
title: '单选',
autoHeight: true,
defaultType: 'radio',
hideLabels: true,
style: 'margin-left: 10px;',
bodyStyle: 'margin-left: 20px;',
items: [{
boxLabel: '渴望自由',
name: 'rad',
value: '1',
checked: true,
autoWidth: 'auto'
}, {
boxLabel: '祈求爱情',
name: 'rad',
value: '2',
width: 'auto'
}]
}]
}]
}, {
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'htmleditor',
fieldLabel: '在线编辑器',
id: 'editor',
anchor:'98%',
height: 100
}]
}],
buttons: [{
text: '保存'
}, {
text: '取消'
}]
});
formPanel.render('hello');
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
2：程序效果图