ext编辑器
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>我的测试</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// HtmlEditor需要这个
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 50,
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: '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'
}]
},{
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'
}]
}]
}]
},{
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'htmleditor',
fieldLabel: '在线编辑器',
id: 'editor',
anchor: '98%'
}]
}],
buttons: [{
text: '保存'
},{
text: '读取'
},{
text: '取消'
}]
});
form.render("form");
});
</script>
</head>
<body>
<script type="text/javascript" src="js/examples.js"></script>
<div id="form" style="margin:20px;"></div>
</body>
</html>
这是一个很不错的ext编辑器！希望大家学习学习！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>我的测试</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
// HtmlEditor需要这个
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 50,
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: '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'
}]
},{
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'
}]
}]
}]
},{
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'htmleditor',
fieldLabel: '在线编辑器',
id: 'editor',
anchor: '98%'
}]
}],
buttons: [{
text: '保存'
},{
text: '读取'
},{
text: '取消'
}]
});
form.render("form");
});
</script>
</head>
<body>
<script type="text/javascript" src="js/examples.js"></script>
<div id="form" style="margin:20px;"></div>
</body>
</html>
这是一个很不错的ext编辑器！希望大家学习学习！