|
|
 <HTML>
<HEAD>
<TITLE> New Document </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 LANGUAGE="JavaScript">
 <!--
  /**//*
* msgTarget的几种配置
* qtip 当光标停留在域上时显示一个快速提示
title 显示一个默认的浏览标题属性弹出
under 增加一个空div在域下面并显示错误信息
side 增加一个错误图标在域右边,鼠标悬停时显示错误信息
 */
Ext.onReady(function()
{
//初始化快速提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
var bd = Ext.getBody();
bd.createChild({
tag : 'h3',
html: 'Form中的复杂编辑器'
});
var form = new Ext.FormPanel({
labelAlign : 'top',
title : 'Inner Tabs',
bodyStyle : 'padding : 5px',
width : 600,
frame : true,
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.submit();
},
items : [
{
layout : 'column',
border : false,
items :
[
{
columnWidth : .5,
layout : 'form',
border : false,
items:[{
xtype : 'textfield',
allowBlank : false,
blankText : '名字不能为空',
fieldLabel : '名',
name : 'first',
anchor : '95%' //上级容器宽度的百分比,即此控件的宽度
},
{
xtype : 'textfield',
minLength : 3,
maxLength : 5,
minLengthText : '公司长度不能小于3',
maxLengthText : '公司长度不能大于5',
fieldLabel : '公司',
name : 'company',
anchor : '95%'
}]
}
]
},
{
columnWidth : .5,
layout : 'form',
border : false,
items : [
{
xtype : 'textfield',
fieldLabel : '地址',
maxLength : 50,
maxLengthText : '地址长度不能超过50个字符',
name : 'address',
anchor : '95%'
},
{
xtype : 'textfield',
fieldLabel : '邮箱',
name : 'email',
vtype : 'email',
vtypeText : '邮箱格式不正确',
anchor : '95%'
}
]
},
{
xtype : 'tabpanel',
plain : true, //不用背景图片
activeTab : 0,
height : 235,
defaults : {bodyStyle : 'padding : 10 px'},
items:[
{
title : '个人信息',
layout : 'form',
defaults : {width : 230},
defaultType : 'textfield',
items : [
{
fieldLabel : '名字',
name : 'first',
allowBlank : false,
value : '天使'
},
{
fieldLabel : '编辑器',
name : 'editor',
xtype : 'htmleditor'
}
]
},
{
title : '电话号码',
layout : 'form',
defaults:{width : 230},
defaultType : 'textfield',
items :[
{
fieldLabel : '宅电',
name : 'home',
value : '(888) 555-1212'
},
{
fieldLabel : '公司电话',
name : 'mobile'
},
{
fieldLabel : '传真',
name : 'fax'
}
]
},
{
cls : 'x-plain',
title : 'Html编辑器',
layout : 'fit',
items : {
xtype : 'htmleditor', //html复杂编辑器
id : 'bio2',
fieldLabel : 'Biogarphy'
}
},
{
title : '弹出式编辑器',
layout : 'form',
items: [
{
xtype : 'button',
text : '弹出式html编辑器',
handler : function()
{
new Ext.form.HtmlEditor(
{
renderTo: 'editor', //Ext.getBody(),
width: 300,
draggable : true,
height: 300,
x : 200,
y :200,
frame: true,
layout: 'fit'
});
}
}
]
}
]
}
],
buttons : [
{
text : '保存',
handler : function()
{
if(form.getForm().isValid())
{
form.getForm().getEl().dom.action = 'http://www.blogjava.net/supercrsky';
form.getForm().getEl().dom.submit();
}
}
},
{
text : '重置',
handler : function()
{
form.getForm().getEl().dom.reset();
}
}
]
});
form.render(document.body);
});
//-->
 </SCRIPT>
</HEAD>
<BODY>
<div id='editor'></div>
</BODY>
</HTML>
|