ExtJS4.2学习(16)制作表单
本节开始我们正式讲EXT的第2大类组件--表单控件，有了之前几节的经验，现在应该学起来得心应手，这里先介绍下Extjs4.2里的样式，以便于美化界面，今天无意中还搜到了几篇自己制作样式的文章，相当给力，对于我来说是个好消息，我会在后面的学习中逐渐学习。
css文件夹里有总体对应的下面theme样式，
access是黑色样式
classic为默认蓝色经典样式
ext-theme-classic-sandbox为没有样式，最基本的，超难看，建议别用这个
ext-theme-gray是灰色样式
ext-theme-neptune是蓝色样式
接下来的例子中我们主要使用ext-theme-neptune样式，我们来制作一个简单的表单：
主要代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">
<script src="../../ExtJS4.2/ext-all.js"></script>
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
title:'第一个表单',
defaultType:'textfield', //默认表单里的控件类型
buttonAlign:'center', //按钮对齐方式
frame:true,
width:220,
fieldDefaults:{
labelAlign:'right', //文本对齐方式
labelWidth:70
},
items:[{ //内容
fieldLabel:'输入框'
}],
buttons:[{
text:'按钮'
}]
});
form.render("form");
});
</script>
</head>
<body>
<h1>我的ExtJS4.2学习之路</h1>
<hr />
作者：束洋洋
开始日期：2013年12月10日 20:36:56
<h2>深入浅出ExtJS之制作表单</h2>
<div id="form"></div>
</body>
</html>
再来看看整体表单有哪些控件：
看看代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">
<script src="../../ExtJS4.2/ext-all.js"></script>
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// HtmlEditor需要这个
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
buttonAlign: 'center',
width: 600,
title: 'form',
frame: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 70
},
items: [{
xtype: 'container',
layout: 'column',
items: [{
columnWidth:.7,
xtype:'fieldset',
collapsible: true, //是否为可折叠
collapsed: false, //默认是否折叠
title: '单纯输入',
autoHeight:true,
defaults: {width: 300},
defaultType: 'textfield',
items: [{
fieldLabel: '文本',
name: 'text'
},{
xtype: 'numberfield',
fieldLabel: '数字',
name: 'number'
},{
xtype:"combo",
fieldLabel: '选择',
name: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['value1', 'text1'],
['value2', 'text2']
]
}),
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText:'请选择'
},{
xtype: 'datefield',
fieldLabel: '日期',
name: 'date'
},{
xtype: 'timefield',
fieldLabel: '时间',
name: 'time'
},{
xtype: 'textarea',
fieldLabel: '多行',
name: 'textarea'
},{
xtype: 'hidden',
name: 'hidden'
}]
},{
xtype: 'container',
columnWidth:.3,
layout:'form',
items:[{
xtype:'fieldset',
checkboxToggle:true, //多选
title: '多选',
autoHeight:true,
defaultType: 'checkbox',
hideLabels: true,
style: 'margin-left:10px;',
bodyStyle: 'margin-left:20px;',
items: [{
boxLabel: '首先要穿暖',
name: 'check',
value: '1',
checked: true,
width: 'auto'
},{
boxLabel: '然后要吃饱',
name: 'check',
value: '2',
checked: true,
width: 'auto'
},{
boxLabel: '房子遮风避雨',
name: 'check',
value: '3',
width: 'auto'
},{
boxLabel: '行路方便',
name: 'check',
value: '4',
width: 'auto'
}]
},{
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,
width: 'auto'
},{
boxLabel: '祈求爱情',
name: 'rad',
value: '2',
width: 'auto'
}]
}]
}]
},{
xtype: 'container',
layout: 'form',
items: [{
labelAlign: 'top',
xtype: 'htmleditor',
fieldLabel: '在线编辑器',
id: 'editor',
anchor: '98%',
height: 200
}]
}],
buttons: [{
text: '保存'
},{
text: '读取'
},{
text: '取消'
}]
});
form.render("form");
});
</script>
</head>
<body>
<h1>我的ExtJS4.2学习之路</h1>
<hr />
作者：束洋洋
开始日期：2013年12月10日 21:09:01
<h2>深入浅出ExtJS之表单控件</h2>
<div id="form"></div>
</body>
</html>
连载中，请大家继续关注！本文出自我的个人网站思考者日记网