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

第一次接触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();
			}
		}
	});
三,运行结果




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值