EXTJs 表单控件
TextField 文本输入控件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//Ext.form.TextField
var textField = new Ext.form.TextField(
{
fieldLabel:'用户名',
allowBlank:false,//不允许为空
emptyText:'请填写用户名',//输入为空时提示的默认信息
maxLength:10,//限制输入的数据在5-10之间
minLength:5,
}
);
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[textField],
renderTo:'form'
}
);
}
);
</script>
</head>
<body>
<div id = "form" style = "width:700px;">
</div>
<br>
</body>
</html>
TextArea多行文本输入控件
//Ext.form.TextArea
var textArea = new Ext.form.TextArea(
{
width:200,//宽度
grow:true,//当值为 true 时表示字段可以根据内容自动伸缩
preventScrollbars:true,//防止出现滚动条，如果超出会自动隐藏
fieldLabel:'自我介绍',
allowBlank:false,//不允许为空
emptyText:'空',//输入为空时提示的默认信息
maxLength:100,//限制输入的数据在10-100之间
minLength:10,
}
);
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[textArea],
renderTo:'form'
}
);
当grow:false preventScrollbars:false时如果内容超出显示范围会出现滚动条
DateField日期输入控件
//Ext.form.DateField
var dateField = new Ext.form.DateField(
{
fieldLabel:'生日',
emptyText:'请选择',//输入为空时提示的默认信息
format:'Y-m-d',//用以覆盖本地化的默认日期格式化字串
disableDays:[0,6]//一个以字串形式表示的禁用的日期数组
}
);
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[dateField],
renderTo:'form'
}
);
TimeField时间输入控件
//Ext.form.TimeField
var timeField = new Ext.form.TimeField(
{
fieldLabel:'时间',
emptyText:'请选择',//输入为空时提示的默认信息
minValue:'10:30 AM',//起始时间
maxValue:'14:00 PM',//结束时间
increment:30//时间间隔为30分钟
}
);
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[timeField],
renderTo:'form'
}
);
HtmlEditor在线编辑器
//Ext.form.HtmlEditor
var htmlEditor = new Ext.form.HtmlEditor(
{
fieldLabel:'留言',
enableAlignments:true,//允许居左、居中、居右按钮(默认为 true)。
enableColors:true,//允许前景/高亮颜色按钮
enableFontSize:true,//允许增大/缩小字号按钮(默认为 true)。
enableFont:true,//允许字体选项。
enableFormat:true,//允许粗体、斜体和下划线按钮(默认为 true)。
enableLinks:true,//允许创建链接按钮。
enableLists:true,//允许项目和列表符号按钮。
enableSourceEdit:true,//允许切换到源码编辑按钮。
}
);
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[htmlEditor],
renderTo:'form'
}
);
ComboBox
//ComboBox
var data = [
['0','学生'],
['1','教师'],
['2','工程师'],
['3','农民']
];
var store = new Ext.data.SimpleStore(
{
fields:['value','text'],
data:data
}
);
var combo = new Ext.form.ComboBox(
{
store:store,//store用来为ComboBox提供数据
emptyText:'请选择',
triggerAction:'all',//query 会根据输入信息自动匹配 all 显示所有数据
mode:'local',//在本地读取数据
valueField:'value',//与store定义中的名字一样。正是根据他们之间的对应关系来显示数据。
displayField:'text',
applyTo:'combo',//显示位置，需要与<input id = "combo" type = "text">对应
value:'学生'//设置默认值
}
);
监听事件：
var ReportFaultTypeSchoolCbox = new Ext.form.ComboBox({
fieldLabel: '校区',
width:200,
editable: false, //不允许输入
name: 'School',
id: "School",
hiddenName: "reportFaultTypeSchool",
store: ReportFaultTypeSchoolStore,
emptyText: '--请选择--',
allowBlank: false, //不允许为空
blankText: '请选择校区', //错误提示信息
mode: 'remote',
displayField: 'reportFaultTypeName',
valueField: 'reportFaultTypeId',
triggerAction: 'all'
});
//监听事件
ReportFaultTypeSchoolCbox.on("select",function(comboBox){
alert(comboBox.getValue()+"-"+comboBox.getRawValue());
});
select转换成ComboBox
//select转换成ComboBox
var comboFromSelect = new Ext.form.ComboBox(
{
emptyText:'请选择',
triggerAction:'all',//query 会根据输入信息自动匹配 all 显示所有数据
mode:'local',//在本地读取数据
transform:'comboFS'
}
);
在Html中需要有select下拉框。
<select id = "comboFS"> <option value = "0">苹果</option> <option value = "1">葡萄</option> <option value = "2">香蕉</option> <option value = "3">菠萝</option> </select>
checkbox多选框
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[
{
xtype:'fieldset',
title:'选择你喜欢的运动',
autoHeight:true,
defaultType:'checkbox',
hideLabels:true,
items:[
{boxLabel:'足球',inputValue:'1'},
{boxLabel:'篮球',inputValue:'2'},
{boxLabel:'乒乓球',inputValue:'3'},
{boxLabel:'羽毛球',inputValue:'4'}
]
}
],
renderTo:'form'
}
);
}
);
</script>
</head>
<body>
<div id = "form" style = "width:700px;">
</div>
</body>
</html>
radio单选按钮
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
title:'表单控件',
frame:true,
items:[
{
xtype:'fieldset',
title:'性别',
autoHeight:true,
defaultType:'radio',
hideLabels:true,
items:[
{boxLabel:'男',inputValue:'1',checked:true,name:'radio'},
{boxLabel:'女',inputValue:'2',name:'radio'},
]
}
],
renderTo:'form'
}
);
}
);
</script>
</head>
<body>
<div id = "form" style = "width:700px;">
</div>
</body>
</html>
监听事件：
{
xtype:"fieldset",
title: "附件",
layout:"form",
autoHeight:true,
style:'padding-left:10px;',
items:[
{
xtype:'radiogroup',
fieldLabel: '是否上传附件',
defaultType:'radio',
id:'RadioGroup',
hideLabels:true,
items:[
{boxLabel:'是',inputValue:'1',name:'radio'},
{boxLabel:'否',inputValue:'2',name:'radio',checked:true}
],
listeners: { "change": function()
{
alert("value:"+Ext.getCmp("RadioGroup").getValue().inputValue);
}
}
}
]
}
综合运用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//工作+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var dataWork = [
['0','学生'],
['1','教师'],
['2','工程师'],
['3','农民']
];
var storeWork = new Ext.data.SimpleStore(
{
fields:['value','text'],
data:dataWork
}
);
var comboWork = new Ext.form.ComboBox(
{
fieldLabel:'工作',
store:storeWork,//store用来为ComboBox提供数据
emptyText:'请选择',
triggerAction:'all',//query 会根据输入信息自动匹配 all 显示所有数据
mode:'local',//在本地读取数据
valueField:'value',//与store定义中的名字一样。正是根据他们之间的对应关系来显示数据。
displayField:'text',
value:'学生'//设置默认值
}
);
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//Ext.form.DateField
var birthdayField = new Ext.form.DateField(
{
fieldLabel:'生日',
emptyText:'请选择',//输入为空时提示的默认信息
format:'Y-m-d',//用以覆盖本地化的默认日期格式化字串
disableDays:[0,6],//一个以字串形式表示的禁用的日期数组
name:'birthday',
}
);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var sexField = new Ext.form.ComboBox(
{
fieldLabel:'性别',
name:'sex',
store:new Ext.data.SimpleStore(
{
fields:['value','text'],
data:[
['0','男'],
['1','女']
]
}
),//store
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'请选择',
}
);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var userField = new Ext.form.TextField(
{
fieldLabel:'用户名',
allowBlank:false,//不允许为空
emptyText:'请填写用户名',//输入为空时提示的默认信息
maxLength:10,//限制输入的数据在5-10之间
minLength:5,
name:'username',
}
);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var passwordField = new Ext.form.NumberField(
{
fieldLabel:'密码',
allowBlank:false,//不允许为空
emptyText:'请填写密码',//输入为空时提示的默认信息
name:'password',
}
);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
var textArea = new Ext.form.TextArea(
{
width:200,//宽度
grow:false,//当值为 true 时表示字段可以根据内容自动伸缩
preventScrollbars:false,//防止出现滚动条，如果超出会自动隐藏
fieldLabel:'自我介绍',
allowBlank:false,//不允许为空
emptyText:'空',//输入为空时提示的默认信息
maxLength:100,//限制输入的数据在10-100之间
minLength:10,
}
);
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//Ext.form.FormPanel
var form = new Ext.form.FormPanel(
{
labelAlign:'right',
labelWidth:50,
title:'用户注册',
frame:true,
width:650,
items:[
{
layout:'column',
items:[
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
{
columnWidth:.7,
layout:'form',
defaultType:'textfield',
defaults:{width:300},
autoHeight:true,
xtype:'fieldset',
title:'基本信息',
items:[
userField,
passwordField,
sexField,
birthdayField,
comboWork,
textArea,
]//items
},
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
{
columnWidth:.3,
layout:'form',
items:[
{
xtype:'fieldset',
title:'你喜欢的运动？',
autoHeight:true,
defaultType:'checkbox',
style:'margin-left:10px;',
bodyStyle:'margin-left:10px;',
items:[
{boxLabel:'足球',name:'check',value:'1',checked:true},
{boxLabel:'篮球',name:'check',value:'2'},
{boxLabel:'羽毛球',name:'check',value:'3'},
{boxLabel:'乒乓球',name:'check',value:'4'},
]
},
{
xtype:'fieldset',
title:'你喜欢听音乐吗？',
autoHeight:true,
defaultType:'radio',
style:'margin-left:10px;',
bodyStyle:'margin-left:10px;',
items:[
{boxLabel:'YES',name:'radio',value:'1',checked:true},
{boxLabel:'NO',name:'radio',value:'2'},
]
},
]//items
}
]//items
},
{
layout:'form',
labelAlign:'top',
items:[
{
xtype:'htmleditor',
fieldLabel:'留言',
id:'editor',
anchor:'98%',
}
]
}
],//items
buttons:[
{text:'保存'},
{text:'读取'},
{text:'取消'},
],
renderTo:'form'
}
);
}
);
</script>
</head>
<body>
<div id = "form">
</div>
</body>
</html>
自动把数据填充到表单中
添加数据与修改数据的操作时相辅相成的。如果进行修改还是使用原来的表单，我们需要做的就是在表单显示时为每个控件赋予对应的数据。我们知道Ext.form.Field都有setValue()函数，可以设置表单中对应控件的数据。这样会出现一个问题：每个控件都取出来，然后再赋值，另外很多数据要进行类型的转换，实在是很麻烦。
我们不在使用setValue()函数而是使用了Ext.data.JsonReader来负责数据的读取和转换操作。
后台传过来的数据是只有一个元素的JSON数组，如下：
[{
text:’textField’,
number:12.34,
date:’2008-01-01 00:00:00’,
combo:1
}]
这里提供了字符串，数字，日期等类型的数据，表单中需要配置对应的reader，如下：
var reader = new Ext.data.JsonReader(
{},
[
{name:’text’,type:’string’},
{name:’number’,type:’float’},
{name:’date’,type:’date’,dateFormat:’Y-m-dTH:i:s’},
{name:’combo’,type:’int’},
]
);
现在我们将设置好的reaer放到表单中，后台返回的JSON会在这里被JsonReader转换成对应的数据类型，供表单使用：
var form = new Ext.form.FormPanel(
{
title:’form’,
frame:’true’,
labelWidth:50,
reader:reader,
items:[
{
xtype:’textfield’,
name:’text’
}
]
}
);
当调用form.load()函数时，表单会使用Ajax去后台读取需要的数据。如果调用load()时没有使用任何参数,load（）函数就会使用表单对应的url参数。不过表单中设置的url一般是提交数据的网址，为了不将提交和读取这两个操作混在一起，我们建议另外定义一个专门用来读取数据的url，如下：
{
text：’读取’,
handler:function(){
form.getForm().load({url:’json.txt’});
}
}
现在我们为load()传递一个url参数，指定读取数据的网址。这个网址返回的信息就是上面提到的用于向表单填充数据的JSON字符串，这样就实现了自动为表单中的各个组件填充数据的功能。
窗体window
//var win = new Ext.Window({}):创建一个新的Window窗体对象。
var win = new Ext.Window({
title: "查看报障", //窗体的标题
iconCls: 'bzcl', //一个能提供背景图片的CSS样式类，用于面板头部的图标
width: 400, //宽度
autoHeight:true,//高度，自适应
closeAction: 'close',//当关闭按钮被点击时执行的动作 "close"释放窗体所占内存，"hide"隐藏窗体
plain: true,//true表示强制与背景色保持协调
modal:true,//屏蔽其他控件，只有这个窗体可操作
draggable: false,//是否可拖动
closable: true,//是否可关闭
maximizable:true,//是否可以最大化
minimizable:true,//是否可以最小化
resizable: true,//是否可以调整窗体大小
layout: "form",
items: [
form
]
});