HtmlEditor Readonly 或 Disabled

最新推荐文章于 2024-03-29 10:08:47 发布

最新推荐文章于 2024-03-29 10:08:47 发布 · 162 阅读

文章标签：

#EXT

Ext 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用ExtJS框架实现在线编辑器的遮罩效果，通过Panel的mask()方法为HtmlEditor组件的父容器添加遮罩，达到美观且实用的功能展示。

利用Panel的mask()方法。

这种取巧的方法跟我的另一篇文章“Ext FieldSet 布局”(http://fireinjava.iteye.com/admin/blogs/501592)有点类似。

效果：

Ext.onReady(function() {

			Ext.QuickTips.init();

			var htmlEditor = new Ext.form.HtmlEditor({
						fieldLabel : '在线编辑器',
						name : 'htmlEditor',
						height : 100,
						width : 400,
						fontFamilies : ['宋体', '黑体'],
						value : '333333'
					});

			var p1 = new Ext.Panel({
						layout : 'fit',
						width : 300,
						items : [htmlEditor]
					});

			var formPanel = new Ext.form.FormPanel({
						border : false,
						formId : 'addForm',
						labelAlign : 'right',
						frame : true,
						labelAlign : 'right',
						labelWidth : 150,
						items : [p1]
					});

			var viewport = new Ext.Viewport({
						layout : 'fit',
						items : [formPanel]
					});
			p1.getEl().mask();//给htmlEditor的父容器设置遮罩
		})