`
y1d2y3xyz
  • 浏览: 253103 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext表单组件之HtmlEditor

ExtjsjavascriptprototypeHtmlEditorExt 
阅读更多
所有设置都是按部就班，没有特别的地方，基本就只是功能的开启与关闭
createLinkText：‘’表示创建超链接按钮的提示信息，在这之前别忘记了把
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'title';
加上，否则提示信息会看不到效果！
还有一个选项就是buttonTips,其接受一个对象
sourceedit:{title:'源代码编辑',text:'切换源代码编辑模式'}
具体实现看代码，

htmleditor.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<title>htmleditor.html</title>
		<style type="text/css">  
			body{background-color:#777777} 
			#form-he{width: 700px;margin-left: auto;margin-right: auto;} 
		</style>  
		<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../Ext/ext-all.js"></script>
		<script type="text/javascript" src="htmleditor.js"></script>
	</head>
	<body>
			<div id="form-he"></div>
	</body>
</html>


htmleditor.js 
Ext.onReady(function() {
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'title';
			var form = new Ext.FormPanel({
						title : 'HtmlEditor应用',
						width : 600,
						autoHeight : true,
						renderTo : 'form-he',
						bodyStyle : "padding:2px",
						border : false,
						frame : true,
						items : [{
								autoHeight : true,
								xtype : 'fieldset',
								collapsible :true,
								collapsed :false,
								layout : 'form',
								title:'复选框',
								items:[{
									xtype:'htmleditor',
									name:'content',
									hideLabel :true,
									anchor : '100%',
									createLinkText :'创建超链接',//创建超链接的提示信息
									defaultLinkValue :'http://www.',//默认连接值，默认值为http://
									enableAlignments :true,//是否启用对齐按钮，包括左中右三个按钮
									enableColors :true,//是否启用前景色背景色按钮，默认为true
									enableFont :true,//是否启用字体选择按钮 默认为true
									enableFontSize :true,//是否启用字体加大缩小按钮
									enableFormat :true,//是否启用加粗斜体下划线按钮
									enableLists :true,//是否启用列表按钮t
									enableSourceEdit :true,//是否启用代码编辑按钮
									fontFamilies :['宋体','隶书','黑体'],
									buttonTips :{
										bold : {//用来设置按钮的提示信息,可以为每个按钮设置,这里做俩个演示其他的去试下就知道了
										        title: '粗体 (Ctrl+B)',
										        text: '设置字体样式为粗体.'
										},
								    italic : {
								        title: '斜体 (Ctrl+I)',
								        text: '设置字体样式为斜体.'
								    },
								    sourceedit:{
								    	title:'源代码编辑',
								    	text:'切换源代码编辑模式'
								    }
		
									}
								}]
						}],
						buttons : [{
									text : '提交',
									scope : this,
									handler : function() {
										alert(Ext.encode(form.form.getValues()));
									}
								}, {
									text : '重置'
								}]
					})
		})


这么简单的配置，看以下就差不多了，用的时候再查API都行！
分享到：
| Ext表单组件之checkbox
评论
1 楼 superwwt 2010-07-27  
谢谢，帮助很大
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics