Ext.js 组件的简单应用——【Window】和【HtmlEditor】结合使用

最新推荐文章于 2021-11-01 17:19:07 发布

菜鸡程序员_小小

最新推荐文章于 2021-11-01 17:19:07 发布

阅读量530

点赞数 1

分类专栏：经验，学习文章标签： extjs

本文链接：https://blog.csdn.net/qingdatiankong/article/details/73927427

版权

经验，学习专栏收录该内容

117 篇文章 1 订阅

订阅专栏

第一次接触Extjs，感觉效果蛮不错的，写几篇文件记录一下个人学习中的简单的小成果。

Ext.js 窗口+Ext.js HTML编辑器的结合使用

一、html代码

	<head>
		<script type="text/javascript" src="extjs4.2/ext-all.js"></script>
		<script type="text/javascript" src="extjs4.2/locale/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="js/2017062904.js"></script>
		<link href="extjs4.2/resources/css/ext-all.css" rel="stylesheet"/>
	</head>
	<body>
	<p>点击按钮，以发送邮件</p>
	<div id = "buttonId"></div>
	<br>
	<div id = "editor"></div>
	</body>

二、js代码

Ext.onReady(function() {
	var win = new Ext.Window({
		title:'邮件窗口',
		layout:'form',
		width:650,
		closeAction:'close',
		target:'buttonId',
		plain:true,
		items:[{
			xtype:'textfield',
			fieldLabel:'收件人',
		},{
			xtype:'textfield',
			fieldLabel:'抄送'
		},{
			xtype:'textfield',
			fieldLabel:'密送'
		},{
			xtype:'textfield',
			fieldLabel:'标题'
		},{
			xtype:'htmleditor',
			fieldLabel:'邮件内容'
		}],
		buttons:[{
			text:'保存草稿',
			handler:function(){Ext.Msg.alert('保存草稿','您的邮件已保存');}
		},{
			text:'发送',
			handler:function(){Ext.Msg.alert('发送','您的邮件已发送');}
		},{
			text:'取消',
			handler:function(){Ext.Msg.alert('取消','您的邮件已取消');}
		}],
		buttonAlign:'center'
	});
	Ext.create('Ext.Button',{
		renderTo:'buttonId',
		text:'发邮件',
		listeners: {
			click:function(){
				win.show();
			}
		}
	});

三，运行结果