ext表单控件
js文件
Ext.onReady(function() {
// 对于提交中出现的乱码，在Ext中可以修改Request Header中Content-Type的设置
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
Ext.QuickTips.init();
Ext.apply(Ext.QuickTips.getQuickTip(), {
dismissDelay : 0
});
Ext.form.Field.prototype.msgTarget = 'side';
var data = [['湖北', 'hubei'], ['江西', 'jiangxi'], ['江苏', 'jiangsu'],
['安徽', 'anhui'], ['北京', 'beijing'], ['上海', 'shanghai'],
['天津', 'tianjin']];
var store = new Ext.data.SimpleStore({
fields : ['chinese', 'english'],
data : data
});
var combo1 = new Ext.form.ComboBox({
id : 'province',
name : 'province',
hiddenName : 'provinceHidden',
displayField : 'chinese',
valueField : 'english',
mode : 'local',
minChars : '1',
queryDelay : 300,// 延时300毫秒
store : store,
triggerAction : "all",
pageSize : 3,
width : 200,
labelSeparator : ':',
emptyText : '请选择',
fieldLabel : '省',
readOnly : false,
listeners : {
select : function(comb, record, index) {
alert(comb.getValue());
}
}
});
// 创建Form面板
var form = new Ext.form.FormPanel({
id : 'form',
name : 'form',
// applyTo : 'div1',
frame : true,
bodyStyle : 'padding:1px 0 0 0;',
buttonAlign : 'center',
labelAlign : 'left',
labelWidth : 60,
width : 600,
defaultType : 'textfield',
items : [{
id : 'username',
name : 'username',
allowBlank : false,
msgTarget : 'qtip',
fieldLabel : '姓名',
itemCls : 'sex-male', // 向左边浮动,处理控件横排
clearCls : 'allow-float'// 允许两边浮动
}, {
id : 'password',
name : 'password',
fieldLabel : '密码',
inputType : 'password'
}, {
xtype : 'radio',
fieldLabel : '性别',
boxLabel : '男',
name : 'sex',
id : 'male',
itemCls : 'sex-male', // 向左边浮动,处理控件横排
clearCls : 'allow-float', // 允许两边浮动,在实际生成的HTML结构中有专门的DIV阻断浮动
checked : true
}, {
xtype : 'radio',
boxLabel : '女',
name : 'sex',
id : 'female',
width : 60,
itemCls : 'sex-female', // 向左浮动,处理控件横排
clearCls : 'allow-float', // 允许两边浮动
hideLabel : true
// 不显示前面"性别"的标签
}, {
xtype : 'checkbox',
boxLabel : '是否毕业',
name : 'graduate',
id : 'graduate',
itemCls : 'sex-female', // 向左浮动,处理控件横排
clearCls : 'allow-float', // 允许两边浮动
hideLabel : true
// 不显示前面"性别"的标签
}, {
xtype : 'numberfield',
fieldLabel : '年龄',
id : 'i_age',
name : 'n_age',
allowNegative : false,
allowDecimals : false,
itemCls : 'age-field', // 向左浮动,处理控件横排
clearCls : 'allow-float', // 允许两边浮动
width : 90
}, {
xtype : 'textfield',
fieldLabel : '住址',
name : 'n_address',
allowBlank : false,
emptyText : '请输入',
id : 'i_address',
maxLength : 20,
itemCls : 'stop-float', // 不允许浮动,结束控件横排
width : 300
}, {
xtype : 'datefield',
fieldLabel : '出生日期',
name : 'n_birthday',
id : 'i_birthday',
disabledDays : [0],// 禁止选择星期日
itemCls : 'sex-male', // 不允许浮动,结束控件横排
clearCls : 'allow-float', // 允许两边浮动
width : 120
}, {
xtype : 'timefield',
fieldLabel : ' ',
name : 'n_time',
id : 'i_time',
itemCls : 'sex-male', // 不允许浮动,结束控件横排
clearCls : 'allow-float', // 允许两边浮动
width : 120,
hideLabel : true
}, {
xtype : "trigger",
fieldLabel : "触发",
anchor : "50%",
onTriggerClick : function(e) {// 在这里写你要实现的事件，很容易扩展
alert("www.langsin.com");
}
}, {
xtype : 'textarea',
fieldLabel : '备注',
name : 'n_area',
id : 'i_area',
// itemCls:'sex-male', //不允许浮动,结束控件横排
// clearCls:'allow-float', //允许两边浮动
width : 300
}, {
xtype : 'checkboxgroup',
fieldLabel : '外协录入',
columns : 4,
items : [{
boxLabel : '外协申请批件',
name : 'lrb1',
inputValue : '100'
}, {
boxLabel : '合同洽谈',
name : 'lrb2',
inputValue : '101'
}, {
boxLabel : '市场准入材料',
name : 'lrb3',
inputValue : '102'
}, {
boxLabel : '网上审批',
name : 'lrb4',
inputValue : '103'
}, {
boxLabel : '合同信息',
name : 'lrb5',
inputValue : '104'
}, {
boxLabel : '付款情况',
name : 'lrb6',
inputValue : '105'
}, {
boxLabel : '检查验收',
name : 'lrb7',
inputValue : '106'
}]
}, {
xtype : 'combo',
fieldLabel : '网站',
name : 'n_url',
triggerAction : "all",// 请设置为"all",否则默认为"query"的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为"all"的话，每次下拉均显示全部选项
listeners : {
select : function(comb, record, index) {
alert(comb.getValue());
}
},
readOnly : true,
transform : "select",// html中的id
lazyRender : true,
width : 120
}, {// 显示图片
id : 'browseImage',
fieldLabel : '照片',
autoCreate : {
tag : 'input',
type : 'image',
src : 'demo/oicq.gif',
// src : Ext.BLANK_IMAGE_URL,
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
name : 'imageBrowse'
}
}, {
inputType : 'file',
id : 'imageUpload',
fieldLabel : '文件',
width : 300
}, {
id : 'url',
name : 'url',
allowBlank : false,
width : 300,
fieldLabel : '网址',
value : 'http://www.163.com',
vtype : 'url'// url,email,alpha,alphanum
}, combo1, {
xtype : 'htmleditor',
id : 'editor',
name : 'editor',
fieldLabel : '编辑器',
// fontFamilies:['宋体','隶书','楷体'],
width : 250,
anchor : "99%"
}
],
buttons : [{
text : '确定',
handler : onOK
// 实际应用一般是处理form.getForm.submit()事件
}, {
text : '重置',
handler : function() {
form.form.getEl().dom.reset();// 使用Dom的刷新方法
form.getForm().reset();// Ext reset()
// 方法刷新时,无法刷新inputType:file的值的解决方法
}
}],
keys : [{ // 处理键盘回车事件
key : Ext.EventObject.ENTER,
fn : onOK,
scope : this
}]
});
var menus = new Ext.menu.Menu({
shadow : 'frame',// 设置菜单四打边有阴影
items : [{
text : '是否启用',
checked : true,
handler : onSave
}, {
text : '另存为',
handler : onSave,
menu : new Ext.menu.Menu({
items : [{
text : '文件另存为',
group : 'theme',
checked : false,
handler : onSave
}, {
text : '图片另存为',
group : 'theme',
checked : false,
handler : onSave
}]
})
}]
});
function onSave(item) {
alert(item.text);
}
// 工具栏
var toolbar = new Ext.Toolbar({
applyTo : 'tool',
width : 500
});
toolbar.addButton([{
text : '新建'
}, {
text : '打开'
}, {
text : '保存'
}]);
toolbar.addSeparator();
toolbar.addField(new Ext.form.TextField({
width : 30
}));
toolbar.addFill();
toolbar.addText('静态文本');
toolbar.add('-', '->', {
text : '文件',
menu : menus
});
// 确定按钮事件,这里只是简单获取各控件值,实际应用一般和后台脚本结合
function onOK() {
var strMsg;
strMsg = '姓名：' + form.getComponent('username').getValue() + '，性别：';
if (form.getComponent('male').checked)
strMsg += '男';
if (form.getComponent('female').checked)
strMsg += '女';
strMsg += '，年龄：' + form.getComponent('i_age').getValue();
strMsg += '，住址：' + form.getComponent('i_address').getValue();
// 通过循环遍历checkboxgroup获得值
// alert(strMsg);
var checkboxgroup = form.items.itemAt(11);
// alert(checkboxgroup.getXType());//类型
var vItems = checkboxgroup.items;
var vCount = vItems.getCount();
for (var i = 0; i < vCount; i++) {
// alert(vItems.itemAt(i).getValue());//值
}
form.form.submit({
waitMsg : '登陆中,请稍等...',
method : 'POST',
clientValidation : true,
params : {
p : '参数'
}, // 传递的参数
url : "demo/MyJsp.jsp",
// 定义要跳转的url,格式被请求的页面格式为{ 'success': true,'msg': '成功'}
success : function(form, action) {
// Ext.Msg.alert('信息',"提示："+"response.responseText");//加粗体是得到后台的具体返回信息。
Ext.Msg.alert('提示', "数据修改成功");// 成功提示信息
},
failure : function(form, action) {
Ext.Msg.alert('提示', action.failureType);
}
});
}
// 创建主窗口
var win = new Ext.Window({
title : 'Ext中的FormPanel面板及Form控件',
width : window.document.body.clientWidth / 2,
closable : true,
y : 10,
collapsible : true,
// draggable: false,
resizable : false,
modal : false,
closeAction : 'hide',
tbar : [{
text : '顶部按钮'
}],
border : true,
manager : wgroup,
items : [form],
buttons : []
});
win.show();
var wgroup = Ext.WindowGroup();
// 隐藏全部window
// wgroup.hideAll();
});
/**
* 在Ext2.2的Ext.form.FormPanel中如果有RadioGroup或者CheckboxGroup，那么
* FormPanel.form.setValues方法对这2个东东内部的radio和checkbox无法动态赋值，需要对
* Ext.form.BasicForm的findField方法进行修正，代码如下：
*/
Ext.override(Ext.form.BasicForm, {
findField : function(id) {
var field = this.items.get(id);
if (!field) {
this.items.each(function(f) {
if (f.isXType('radiogroup') || f.isXType('checkboxgroup')) {
f.items.each(function(c) {
if (c.isFormField
&& (c.dataIndex == id || c.id == id || c
.getName() == id)) {
field = c;
return false;
}
});
}
if (f.isFormField
&& (f.dataIndex == id || f.id == id || f.getName() == id)) {
field = f;
return false;
}
});
}
return field || null;
}
});
html文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form控件测试</title>
<style type="text/css" media="all">
.allow-float {clear:none!important;} /* 允许该元素浮动 */
.stop-float {clear:both!important;} /* 阻止该元素浮动 */
.sex-male {float:left;}
.sex-female {float:left;padding:0 0 0 20px;}
.age-field {float:left;padding:0 0 0 50px;}
</style>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<div id="tool"></div>
<select id="select">
<option value="1">
浪曦
</option>
<option value="2">
博客园
</option>
<option value="3">
百度
</option>
<option value="4">
新浪
</option>
</select>
</body>
</html>