ux.form.field.KindEditor 所见所得编辑器
注意需要引入KindEditor相关资源
1 //所见所得编辑器 2 Ext.define('ux.form.field.KindEditor', { 3 extend: 'Ext.form.field.TextArea', 4 alias: 'widget.kindEditor', 5 xtype: 'kindEditor', 6 //最大文本长度 7 maxLength:5000, 8 //配置 9 editorConfig: { 10 //选项功能 11 items: [ 12 'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 13 14 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr', 'emoticons', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' 15 ], 16 minHeight: 200 17 }, 18 afterRender: function () { 19 var me = this; 20 me.callParent(arguments); 21 //延迟输入验证 22 me.task = Ext.create('Ext.util.DelayedTask', 23 function (t) { 24 me.isValid(); 25 }, 26 me); 27 if (!me.editor) { 28 //创建富文本插件 29 me.editor = KindEditor.create("#" + me.getInputId(), Ext.apply(me.editorConfig, { 30 //编辑器创建成功 31 afterCreate: function () { 32 //标识完成 33 me.KindEditorIsReady = true; 34 }, 35 //内容发生改变时 36 afterChange: function () { 37 //编辑器初始化完成才执行 38 if (me.KindEditorIsReady) { 39 //延迟输入验证 40 me.task.delay(100); 41 } 42 }, 43 //失去焦点 44 afterBlur: function () { 45 //输入验证 46 me.isValid(); 47 } 48 })); 49 } else { 50 me.editor.html(me.getValue()); 51 } 52 }, 53 setValue: function (value) { 54 //console.log('setValue'); 55 var me = this; 56 if (!me.editor) { 57 me.setRawValue(me.valueToRaw(value)); 58 } else { 59 if(value){ 60 me.editor.html(value.toString()); 61 }else{ 62 63 } 64 } 65 me.callParent(arguments); 66 return me.mixins.field.setValue.call(me, value); 67 }, 68 getRawValue: function () { 69 //console.log('getRawValue'); 70 var me = this; 71 if (me.KindEditorIsReady) { 72 //自动同步值 73 me.editor.sync(); 74 } 75 v = me.inputEl ? me.inputEl.getValue() : ''; 76 me.rawValue = v; 77 return v; 78 }, 79 //重置 80 reset: function () { 81 if (this.editor) { 82 this.editor.html(''); 83 } 84 this.callParent(); 85 }, 86 //销毁富文本控件 87 destroyEditor: function () { 88 var me = this; 89 if (me.rendered) { 90 try { 91 me.editor.remove(); 92 me.editor = null; 93 } catch (e) { } 94 } 95 }, 96 //销毁 97 onDestroy: function () { 98 var me = this; 99 me.destroyEditor(); 100 me.callParent(arguments); 101 } 102 });
ux.form.field.KindEditor 所见所得编辑器相关推荐
- ux.form.field.Verify 验证码控件
1 //验证码控件 2 Ext.define('ux.form.field.Verify', { 3 extend: 'Ext.container.Container', 4 alias: ['wid ...
- ux.form.field.SearchField 列表、树形菜单查询扩展
1 //支持bind绑定store 2 //列表搜索扩展,支持本地查询 3 //支持树形菜单本地一级菜单查询 4 Ext.define('ux.form.field.SearchField', { 5 ...
- ux.form.field.Year 只能选年的时间扩展
效果如图,亲测6.2.1版本可用,用法同时间选择控件 1 //只选择年的控件 2 Ext.define('ux.picker.Year', { 3 extend: 'Ext.Component', 4 ...
- 所见所得的OFFICE功能区编辑器(自定义界面编辑)RibbonCreator
所见所得的OFFICE功能区编辑器(自定义界面编辑)RibbonCreator 对于Microsoft Access 2007.Excel 2007.Word 2007,RibbonCreator是用 ...
- Ext.ux.form.SearchField使用方法
这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才 ...
- ext时间控件Ext.ux.form.DateTimeField和Ext.form.DateField的用法比较
Ext.ux.form.DateTimeField 页面效果 可以精确到年月日时分秒 var _txtEndTime = new Ext.ux.form.DateTimeField({name: 'e ...
- ext中引用ux_Ext.ux.form.SearchField使用方法
这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才 ...
- Ext.form.field.ComboBox组合框
1.Ext.form.field.ComboBox主要配置 Ext.form.field.ComboBox主要配置项 配置项 类型 说明 allQuery String 发往服务器用来查询全部信息的查 ...
- Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目 配置项 类型 说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
- ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...
最新文章
- 开源:推荐一个不错的离线IP地址定位库
- python字符串find函数-python字符串查找函数的用法详解
- C++ 值传递、指针传递、引用传递
- Super-palindrome(思维)
- linux 中断分上下部分的原因
- ASP.NET中WEB上弹出消息框的N种方法(为了以后方便,转了很多网友的文章!希望不会介意)...
- opencv检测相交点_OpenCV学习18--霍夫变换检测直线
- Kvaser新品推介:一款坚固耐用的单通道CAN / CAN FD转USB接口-Kvaser U100 编码:73-30130-01173-1
- java watir_基于Ruby的watir-webdriver自动化测试方案与实施(一)
- _stdcall与_cdecl区别
- 聚合广告SDK开发(一)——基础知识
- 腾讯入股艺龙,在线旅游市场引发关注
- 对于rh v5系列服务器,华为rh2288v5服务器重定向问题引起pxe报错
- 路由器、AC、AP及POE交换机理解
- WIN10下配置Yolov3(VS2019,GPU)+opencv训练自己的数据集(绝对详细,小白型记录)
- json数据条件查询,json数据sql查询中文乱码
- java.lang.ClassNotFoundException: Cannot find class:
- 公比为无理数的等比数列的近似表示
- 基于STM32的智能家居控制系统设计与实现(带红外遥控控制空调)
- 使用安卓模拟器时提示关闭hyper-v
热门文章
- 获取GridView的BoundField值
- hadoop shell 详解
- 如何自己编写Makefile(高级篇)
- 网站发布在中文操作系统,但ReportViewer的工具栏显示为英文的解决方法
- MFC单文档多视图程序设计与Splitter拆分窗口
- Parallels Desktop如何检查Windows系统是否具有EFI/UEFI或 Legacy BIOS固件接口
- Xilisoft iPad Magic Platinum for Mac一键下载在线视频并将其转换为 iPad?
- 教你使用Donemax DMmenu可以解决Mac启动缓慢的问题呢?
- Maven For Mac下的环境搭建
- SCOM 2012知识分享-16:管理任务窗格