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