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

来源：互联网发布：软件著作权多久编辑：程序博客网时间：2024/05/19 17:06

第一次接触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();}}});

三，运行结果

阅读全文

0 0