extjs3.3 htmleditor各种修正和扩充

最新推荐文章于 2021-07-22 12:12:45 发布
最新推荐文章于 2021-07-22 12:12:45 发布
阅读量106 收藏
点赞数
分类专栏： Ext 文章标签： javascript php ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_8420/article/details/82277504
版权

转载地址：http://floydd.iteye.com/blog/1326338

1.editor的iframe window的keydown事件绑定

由于htmleditor本身提供的specialkey event不给力，所以自己手动在init时增加更加精确的keydown事件来弥补

需要注意的是：chrome的事件必须绑定在body上，否则ENTER这种特殊的键无法触发

 

 

Javascript代码 
  1. var win = Ext.isIE ? ed.getDoc() : ed.getWin();  
  2. ...  
  3. Ext.EventManager.on(!Ext.isWebKit ? win : win.document.body,  
  4.                     'keydown', function(e) {  
  5.                         if (e.isSpecialKey())  
  6.                             this.fireEvent('_specialkey', this, e)  
  7.                     }, ed);  

 

 

2.chrome下htmleditor回车会有问题（光标位置不正确），发现源代码中extjs官网是加了2个br，结果是不对的，修正方法是在fixKeys方法中修改webkit部分，回车时插入\n（chrome会自动变成\n<br>）,getvalue时干掉所有\n<br>,比较纠结的方法，但是能解决问题，代码 如下

 

 

Javascript代码 
  1. fixKeys : function() {  
  2.         if (Ext.isIE) {  
  3.             ...  
  4.                } else if (Ext.isOpera) {  
  5.             ...  
  6.                } else if (Ext.isWebKit) {  
  7.             return function(e) {  
  8.                 var k = e.getKey();  
  9.                 if (k == e.TAB) {  
  10.                     e.stopEvent();  
  11.                     this.execCmd('InsertText', '\t');  
  12.                     this.deferFocus();  
  13.                 } else if (k == e.ENTER) {  
  14.                     e.stopEvent();  
  15.                     // fix chrome ENTER double pressed bug  
  16.                     <strong>this.execCmd('InsertText', '\n');  
  17. </strong>                 this.deferFocus();  
  18.                 }  
  19.             };  
  20.         }  
  21.     }(),  
  22. getValue : function() {  
  23.   var ret = FloatHtmlEditor.superclass.getValue.apply(this, arguments);  
  24.   if (ret) {  
  25.    // fix edit grid panel compare startvalue & nowvalue  
  26.    // fix '\n' patch for webkit(chrome) when ENTER pressed  
  27.    ret = ret.replace(/^(&nbsp;|<br>|\s)*|(&nbsp;|<br>|\s)*$/ig, '')  
  28.             ret = ret.replace(/<div>(.+?)<\/div>/ig,'<br>$1')  
  29.   }  
  30.   if (!ret) {  
  31.    ret = '';  
  32.   }  
  33.   return ret;  
  34.  },  

 

 

FloatHtmlEditor 是一个用于嵌入在grid中的editor，主要是修改了edit的bar，能够浮动出来，节约grid中的编辑区域

其他扩展特性：

* copy/paste 简化所有copy内容为纯文本，包括word/excel等复杂的格式

* 能够自适应文字大小，自动扩展编辑区域

* 修正多个平台下的focus的问题（htmleditor默认的focus和其他field有区别，不能定位的文字末尾）

完整源码：

 

 

Javascript代码 
  1. var FloatHtmlEditor = Ext.extend(Ext.form.HtmlEditor, {  
  2.     fixKeys : function() {  
  3.         if (Ext.isIE) {  
  4.             return function(e) {  
  5.                 var k = e.getKey(), doc = this.getDoc(), r;  
  6.                 if (k == e.TAB) {  
  7.                     e.stopEvent();  
  8.                     r = doc.selection.createRange();  
  9.                     if (r) {  
  10.                         r.collapse(true);  
  11.                         r.pasteHTML('');  
  12.                         this.deferFocus();  
  13.                     }  
  14.                 } else if (k == e.ENTER) {  
  15.                     r = doc.selection.createRange();  
  16.                     if (r) {  
  17.                         var target = r.parentElement();  
  18.                         if (!target || target.tagName.toLowerCase() != 'li') {  
  19.                             e.stopEvent();  
  20.                             r.pasteHTML('<br />');  
  21.                             r.collapse(false);  
  22.                             r.select();  
  23.                         }  
  24.                     }  
  25.                 }  
  26.             };  
  27.         } else if (Ext.isOpera) {  
  28.             return function(e) {  
  29.                 var k = e.getKey();  
  30.                 if (k == e.TAB) {  
  31.                     e.stopEvent();  
  32.                     this.win.focus();  
  33.                     this.execCmd('InsertHTML', '');  
  34.                     this.deferFocus();  
  35.                 }  
  36.             };  
  37.         } else if (Ext.isWebKit) {  
  38.             return function(e) {  
  39.                 var k = e.getKey();  
  40.                 if (k == e.TAB) {  
  41.                     e.stopEvent();  
  42.                     this.execCmd('InsertText', '\t');  
  43.                     this.deferFocus();  
  44.                 } else if (k == e.ENTER) {  
  45.                     e.stopEvent();  
  46.                     // fix chrome ENTER double pressed bug  
  47.                     this.execCmd('InsertHTML', '\n<br>');  
  48.                     this.deferFocus();  
  49.                 }  
  50.             };  
  51.         }  
  52.     }(),  
  53.     _measureDiv : null,  
  54.     _getFrame : function() {  
  55.         if (!this._frm)  
  56.             this._frm = this.getEl().parent().query('iframe')[0];  
  57.         return this._frm  
  58.     },  
  59.     _adjustHeight : function() {  
  60.         var t = Ext.fly(this._getFrame());  
  61.         var div = this._measureDiv  
  62.         if (!div) {  
  63.             div = this._measureDiv = this.__measureDiv = document  
  64.                     .createElement('div');  
  65.             div.style.position = 'absolute';  
  66.             // div.style.border = '1px solid red'  
  67.             div.style.top = '-1px';  
  68.             div.style.left = '-10000px'  
  69.             div.style.whiteSpace = 'normal';  
  70.             div.style.wordWrap = 'break-word';  
  71.             div.style.lineHeight = '15px'  
  72.             document.body.appendChild(div)  
  73.         }  
  74.         if (t.dom.contentWindow.document.body.innerHTML == '') {  
  75.             t.setHeight(this._min_h);  
  76.             return  
  77.         }  
  78.         if (div.innerHTML == t.dom.contentWindow.document.body.innerHTML)  
  79.             return;  
  80.         var width = parseInt(t.getWidth());  
  81.         Ext.isIE ? width -= 25 : width -= 7  
  82.         div.style.width = width + 'px'  
  83.         div.innerHTML = t.dom.contentWindow.document.body.innerHTML;  
  84.         this._adjust_h = div.offsetHeight  
  85.         if (this._adjust_h < this._min_h) {  
  86.             this._adjust_h = this._min_h;  
  87.         }  
  88.         t.setHeight(this._adjust_h);  
  89.     },  
  90.     onEditorEvent : function(e) {  
  91.         if (this.onSpecialKey) {  
  92.             this.onSpecialKey(e);  
  93.         }  
  94.         return FloatHtmlEditor.superclass.onEditorEvent.apply(this, arguments)  
  95.     },  
  96.     getValue : function() {  
  97.         var ret = FloatHtmlEditor.superclass.getValue.apply(this, arguments);  
  98.         if (ret) {  
  99.             // fix edit grid panel compare startvalue & nowvalue  
  100.             // fix '\n' patch for webkit(chrome) when ENTER pressed  
  101.             ret = ret.replace(/^(|<br>|\s)*|(|<br>|\s)*$/ig, '')  
  102.                         ret = ret.replace(/<div>(.+?)<\/div>/ig,'<br>$1')  
  103.         }  
  104.         if (!ret) {  
  105.             ret = '';  
  106.         }  
  107.         return ret;  
  108.     },  
  109.     markTeamMember : function() {  
  110.         this.teamCmp = true  
  111.     },  
  112.     initComponent : function() {  
  113.         this.valueEditToolbarId = Ext.id()  
  114.         this.onBlur = Ext.form.Field.prototype.onBlur;  
  115.         FloatHtmlEditor.superclass.initComponent.call(this);  
  116.         this.addEvents('_specialkey')  
  117.         this.on('afterrender', function() {  
  118.                     this.getToolbar().hide();  
  119.                 }, this)  
  120.         this.on('show', function() {  
  121.                     this._adjust_h = 0;  
  122.                     this._adjustHeight.defer(100, this);  
  123.                     this.focus()  
  124.                 }, this)  
  125.         this.on('initialize', function(ed) {  
  126.             var toolbarWin = this.toolbarWin = new Ext.Window({  
  127.                         html : '<div id="' + this.valueEditToolbarId  
  128.                                 + '" class=""></div>',  
  129.                         height : 255,  
  130.                         width : 50,  
  131.                         closeAction : 'hide',  
  132.                         resizable : false,  
  133.                         iconCls : 'icon-toolbox'  
  134.                     })  
  135.             toolbarWin.show();  
  136.             var xy = this.getHoverTarget().getEl().getXY();  
  137.             toolbarWin.setPagePosition(xy[0] + this.getHoverTarget().getWidth()  
  138.                             - toolbarWin.getWidth(), xy[1]);  
  139.             var el = this.getToolbar().getEl();  
  140.             var appentToEl = Ext.getDom(this.valueEditToolbarId);  
  141.             appentToEl.className = el.dom.parentNode.className;  
  142.             el.appendTo(appentToEl);  
  143.             this.getToolbar().show();  
  144.             var tbarRawRow = el.query('.x-toolbar-left-row')[0];  
  145.             var btnNodes = Ext.Element.fly(tbarRawRow).query('.x-toolbar-cell');  
  146.             Ext.each(btnNodes, function(btnNode) {  
  147.                         var btnEl = Ext.Element.fly(btnNode);  
  148.                         if (btnEl.query('.xtb-sep').length) {  
  149.                             btnEl.remove();  
  150.                         } else {  
  151.                             var newRow = Ext.Element.fly(tbarRawRow)  
  152.                                     .insertSibling({  
  153.                                                 tag : 'tr',  
  154.                                                 cls : 'x-toolbar-left-row'  
  155.                                             });  
  156.                             newRow.appendChild(btnNode);  
  157.                             var nel = Ext.Element.fly(btnNode);  
  158.                             nel.query('button')[0].setAttribute('unselectable',  
  159.                                     'on')  
  160.                             nel.on('click', function() {  
  161.                                         this.fireEvent('styleBtnClick')  
  162.                                     }, this)  
  163.                         }  
  164.                     }, this)  
  165.             toolbarWin.hide();  
  166.             if (!Ext.isIE) {  
  167.                 toolbarWin.on('move', function() {  
  168.                             ed.markTeamMember()  
  169.                         })  
  170.             }  
  171.             this.getEl().findParent("div", 2, true).query('.x-html-editor-tb')[0].style.display = 'none'  
  172.             Ext.EventManager.on(ed.getWin(), 'blur', function() {  
  173.                         if (this.adjustTimer) {  
  174.                             clearInterval(this.adjustTimer);  
  175.                             delete this.adjustTimer  
  176.                         }  
  177.                         if (this._measureDiv) {  
  178.                             this._measureDiv.innerHTML = ''  
  179.                         }  
  180.                         this._adjust_h = 0;  
  181.             (function   () {  
  182.                             var teamCmp = ed.teamCmp;  
  183.                             teamCmp ? delete ed.teamCmp : ed.onBlur.apply(ed,  
  184.                                     arguments)  
  185.                         }).defer(10, ed, arguments);  
  186.                     }, ed);  
  187.             ed.getWin().document.body.style.overflow = 'hidden'  
  188.             ed.getWin().document.body.style.whiteSpace = 'normal';  
  189.             ed.getWin().document.body.style.wordWrap = 'break-word';  
  190.             ed.getWin().document.body.style.lineHeight = '15px';  
  191.             Ext.EventManager.on(ed.getWin(), 'focus', function() {  
  192.                         if (this.teamCmp)  
  193.                             delete this.teamCmp  
  194.                     }.dg(this), ed);  
  195.             var win = Ext.isIE ? ed.getDoc() : ed.getWin()  
  196.             Ext.EventManager.on(Ext.isIE ? ed.getDoc().documentElement : ed  
  197.                             .getWin(), 'paste', function(e) {  
  198.                         var html = ed.getDoc().body.innerHTML;  
  199.                         if (html.length >= 4  
  200.                                 && html.substring(html.length - 4) == '<br>') {  
  201.                             ed._beforePasteHTMLPos = html.length - 4;  
  202.                         } else {  
  203.                             ed._beforePasteHTMLPos = html.length  
  204.                         }  
  205.                     })  
  206.             // fix chrome keydown problem  
  207.             Ext.EventManager.on(!Ext.isWebKit ? win : win.document.body,  
  208.                     'keydown', function(e) {  
  209.                         if (!this.adjustTimer) {  
  210.                             this.adjustTimer = setInterval(function() {  
  211.                                         this._adjustHeight();  
  212.                                     }.dg(this), 200);  
  213.                         }  
  214.                         if (e.isSpecialKey())  
  215.                             this.fireEvent('_specialkey', this, e)  
  216.                     }, ed);  
  217.             // fix IE first range select  
  218.             this.moveCursorToEnd()  
  219.         }, this)  
  220.     },  
  221.     // public >>>  
  222.     getHoverTarget : Ext.emptyFn,  
  223.     toolbarWin : null,  
  224.     valueEditToolbarId : null,  
  225.     // public <<<  
  226.     _adjust_h : 0,  
  227.     _min_h : 34,  
  228.     setSize : function(w, h) {  
  229.         if (typeof w == 'object') {  
  230.             h = w.height  
  231.             w = w.width  
  232.         }  
  233.         if (this._adjust_h == 0)  
  234.             this._min_h = h - 4;  
  235.         FloatHtmlEditor.superclass.setSize.apply(this, arguments);  
  236.         var t = Ext.Element.fly(this.getEl().parent().query('iframe')[0]);  
  237.         t.setHeight(this._adjust_h ? this._adjust_h : this._min_h);  
  238.     },  
  239.     focus : function(st, delay) {  
  240.         var t = this.getWin();  
  241.         if (this._focus_delay)  
  242.             clearTimeout(this._focus_delay)  
  243.         this._focus_delay = window.setTimeout(function() {  
  244.                     t.focus();  
  245.                 }, 10);  
  246.     },  
  247.     moveCursorToEnd : function() {  
  248.         this.focusPatch()  
  249.     },  
  250.     focusPatch : function() {  
  251.         var ed = this;  
  252.         if (!ed.win)  
  253.             return  
  254.         var doc = ed.getDoc();  
  255.         ed.win.focus();  
  256.         if (Ext.isIE) {  
  257.             var r = doc.selection.createRange();  
  258.             if (r) {  
  259.                 r.moveStart('character', 1000);  
  260.                 r.collapse(true);  
  261.                 r.select();  
  262.             }  
  263.         } else {  
  264.             var contentDoc = doc;  
  265.             var range = contentDoc.createRange();  
  266.             var lastNode = contentDoc.body.childNodes[contentDoc.body.childNodes.length  
  267.                     - 1];  
  268.             var end = 0;  
  269.             var selection = ed.getWin().getSelection();  
  270.             range.setStart(contentDoc.body.firstChild, 0);  
  271.             if (lastNode.nodeType == 3) {  
  272.                 end = lastNode.textContent.length;  
  273.                 range.setEnd(lastNode, end);  
  274.             } else {  
  275.                 range.setEndAfter(lastNode)  
  276.             }  
  277.             selection.removeAllRanges();  
  278.             // chorme need the range collapsed before add to selection  
  279.             range.collapse(false);  
  280.             selection.addRange(range);  
  281.         }  
  282.     },  
  283.     showTBWin : function() {  
  284.         var tbwin = this.toolbarWin  
  285.         if (tbwin) {  
  286.             var a = tbwin.toFront  
  287.             tbwin.toFront = function() {  
  288.             }  
  289.             tbwin.show()  
  290.             tbwin.toFront = a  
  291.         }  
  292.     },  
  293.     // clean all tags  
  294.     syncValue : function() {  
  295.         if (this.initialized) {  
  296.             var bd = this.getEditorBody();  
  297.             var len = bd.innerHTML.length;  
  298.             FloatHtmlEditor.superclass.syncValue.call(this);  
  299.             if (this._beforePasteHTMLPos != null) {  
  300.                 this.syncValue1();  
  301.                 var pastehtml = bd.innerHTML  
  302.                 // .substring(this._beforePasteHTMLPos);  
  303.                 // replace all tags,only plain text from clipboard  
  304.                 var adjustpastehtml = pastehtml  
  305.                         // trim spaces between tags  
  306.                         // replace \n for excel paste  
  307.                         .replace(/\s+/ig, '')  
  308.                         // replace tag except for <br>  
  309.                         .replace(/<(?!br).*?>/ig, '')  
  310.                 if (pastehtml != adjustpastehtml) {  
  311.                     bd.innerHTML = adjustpastehtml;  
  312.                 }  
  313.                 delete this._beforePasteHTMLPos;  
  314.             }  
  315.         }  
  316.     },  
  317.     destroy : function() {  
  318.         if (this._measureDiv) {  
  319.             this._measureDiv.parentNode.removeChild(this._measureDiv);  
  320.             delete this._measureDiv  
  321.         }  
  322.         if (this.adjustTimer) {  
  323.             clearInterval(this.adjustTimer)  
  324.             delete this.adjustTimer  
  325.         }  
  326.         FloatHtmlEditor.superclass.destroy.call(this)  
  327.     },  
  328.     enableAlignments : false,  
  329.     enableFont : false,  
  330.     enableLinks : false,  
  331.     enableSourceEdit : true,  
  332.     // 清理excel,word copy paste的内容,code from HtmlLintEditor  
  333.     dirtyHtmlTags : [  
  334.             // http://stackoverflow.com/questions/2875027/clean-microsoft-word-pasted-text-using-javascript  
  335.             // http://stackoverflow.com/questions/1068280/javascript-regex-multiline-flag-doesnt-work  
  336.             {  
  337.         regex : /<!--[\s\S]*?-->/gi,  
  338.         replaceVal : ""  
  339.     },  
  340.             // http://www.1stclassmedia.co.uk/developers/clean-ms-word-formatting.php  
  341.             {  
  342.                 regex : /<\\?\?xml[^>]*>/gi,  
  343.                 replaceVal : ""  
  344.             }, {  
  345.                 regex : /<\/?\w+:[^>]*>/gi,  
  346.                 replaceVal : ""  
  347.             }, // e.g. <o:p...  
  348.             {  
  349.                 regex : /\s*MSO[-:][^;"']*/gi,  
  350.                 replaceVal : ""  
  351.             }, {  
  352.                 regex : /\s*MARGIN[-:][^;"']*/gi,  
  353.                 replaceVal : ""  
  354.             }, {  
  355.                 regex : /\s*PAGE[-:][^;"']*/gi,  
  356.                 replaceVal : ""  
  357.             }, {  
  358.                 regex : /\s*TAB[-:][^;"']*/gi,  
  359.                 replaceVal : ""  
  360.             }, {  
  361.                 regex : /\s*LINE[-:][^;"']*/gi,  
  362.                 replaceVal : ""  
  363.             }, {  
  364.                 regex : /\s*FONT-SIZE[^;"']*/gi,  
  365.                 replaceVal : ""  
  366.             }, {  
  367.                 regex : /\s*LANG=(["'])[^"']*?\1/gi,  
  368.                 replaceVal : ""  
  369.             },  
  370.             // keep new line  
  371.             {  
  372.                 regex : /<(P)[^>]*>([\s\S]*?)<\/\1>/gi,  
  373.                 replaceVal : "$2<br>"  
  374.             }, {  
  375.                 regex : /<(H\d)[^>]*>([\s\S]*?)<\/\1>/gi,  
  376.                 replaceVal : "$2"  
  377.             },  
  378.             {  
  379.                 regex : /\s*\w+=(["'])((|\s|;)*|\s*;+[^"']*?|[^"']*?;{2,})\1/gi,  
  380.                 replaceVal : ""  
  381.             }, {  
  382.                 regex : /<span[^>]*>(|\s)*<\/span>/gi,  
  383.                 replaceVal : ""  
  384.             },  
  385.             // {regex: /<([^\s>]+)[^>]*>(|\s)*<\/\1>/gi, replaceVal: ""},  
  386.             // http://www.codinghorror.com/blog/2006/01/cleaning-words-nasty-html.html  
  387.             {  
  388.                 regex : /<(\/?title|\/?meta|\/?style|\/?st\d|\/?head|\/?html|\/?body|\/?link|!\[)[^>]*?>/gi,  
  389.                 replaceVal : ""  
  390.             }, {  
  391.                 regex : /(\n(\r)?){2,}/gi,  
  392.                 replaceVal : ""  
  393.             }],  
  394.     syncValue1 : function() {  
  395.         if (this.initialized) {  
  396.             var bd = this.getEditorBody();  
  397.             var html = bd.innerHTML;  
  398.             if (this.hasDirtyHtmlTags(html)) {  
  399.                 // Note: the selection will be lost...  
  400.                 bd.innerHTML = this.cleanHtml(html);  
  401.                 if (Ext.isGecko) {  
  402.                     // Gecko hack, see:  
  403.                     // https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8  
  404.                     this.setDesignMode(false); // toggle off first  
  405.                     this.setDesignMode(true);  
  406.                 }  
  407.             }  
  408.         }  
  409.     },  
  410.     hasDirtyHtmlTags : function(html) {  
  411.         if (!html)  
  412.             return;  
  413.         var hasDirtyHtmlTags = false;  
  414.         Ext.each(this.dirtyHtmlTags, function(tag, idx) {  
  415.                     return !(hasDirtyHtmlTags = html.match(tag.regex));  
  416.                 });  
  417.         return hasDirtyHtmlTags;  
  418.     },  
  419.     cleanHtml : function(html) {  
  420.         if (!html)  
  421.             return;  
  422.         Ext.each(this.dirtyHtmlTags, function(tag, idx) {  
  423.                     html = html.replace(tag.regex, tag.replaceVal);  
  424.                 });  
  425.         // http://www.tim-jarrett.com/labs_javascript_scrub_word.php  
  426.         html = html.replace(new RegExp(String.fromCharCode(8220), 'gi'), '"'); // “  
  427.         html = html.replace(new RegExp(String.fromCharCode(8221), 'gi'), '"'); // ”  
  428.         html = html.replace(new RegExp(String.fromCharCode(8216), 'gi'), "'"); // ‘  
  429.         html = html.replace(new RegExp(String.fromCharCode(8217), 'gi'), "'"); // ‘  
  430.         html = html.replace(new RegExp(String.fromCharCode(8211), 'gi'), "-"); // –  
  431.         html = html.replace(new RegExp(String.fromCharCode(8212), 'gi'), "--"); // —  
  432.         html = html.replace(new RegExp(String.fromCharCode(189), 'gi'), "1/2"); // ½  
  433.         html = html.replace(new RegExp(String.fromCharCode(188), 'gi'), "1/4"); // ¼  
  434.         html = html.replace(new RegExp(String.fromCharCode(190), 'gi'), "3/4"); // ¾  
  435.         html = html.replace(new RegExp(String.fromCharCode(169), 'gi'), "(C)"); // ©  
  436.         html = html.replace(new RegExp(String.fromCharCode(174), 'gi'), "(R)"); // ®  
  437.         html = html.replace(new RegExp(String.fromCharCode(8230), 'gi'), "..."); // …  
  438.         return FloatHtmlEditor.superclass.cleanHtml.call(this, html);  
  439.     }  
  440. })  

 

iteye_8420
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs的空间htmlEditor源码 浅析，可以重写里面的方法来扩展相关功能
小杰的专栏
12-16 1372
The source code /** * @class Ext.form.HtmlEditor * @extends Ext.form.Field * Provides a lightweight HTML Editor component. Some toolbar features are
EXT_JS6.0富文本编辑器htmlEditor扩展上传图片
qq_38704282的博客
04-22 339
EXT_JS6.0富文本编辑器htmlEditor扩展上传图片 扩展上传图片功能需要重写Ext.form.field.HtmlEditor里面的getToolbarCfg()方法 在项目根目录下面的overrides新建一个文件夹，然后在创建一个js文件如： 重写HtmlEditor.js具体内容 Ext.define("app.overrides.htmleditor.HtmlEditor", ...
extjs的HtmlEditor在chrome中高亮文字
05-07
extjs 4.2 的HtmlEditor在chrome中高亮文字
Extjs2.x中使用htmleditor遇到的问题记录
liuxi1024的专栏
10-16 203
1、IE6下htmleditor文本编辑器无法显示 解决：删除 anchor:'100%'; xtype: 'htmleditor', //labelAlign: 'top', autoWidth:false, labelSeparator: ':' + '&amp;nbsp;&amp;nbsp;&lt;img src="'+ Ext.NEEDED_IMAGE_URL + '...
解决ExtJS在chrome或火狐中正常显示，但是在ie中不显示的问题
dearbaba_11的博客
07-22 140
解决ExtJS在chrome或火狐中正常显示，但是在ie中不显示的问题
ExtJs3.3中文API.CHM_extjs3.3中文文档_
09-30
这个“ExtJS3.3中文API.CHM”文档是为中文用户特别准备的，帮助他们更好地理解和使用ExtJS 3.3的各种功能。 CHM文件，全称是Microsoft Compiled HTML Help，是微软推出的一种帮助文件格式，它将HTML文件打包成单一...
extjs3.3教程，extjs3.3教程.中文教程
04-24
extjs3.3教程.中文教程。程序员福利。
extjs 3.3正式版
07-22
2. **布局管理**：EXTJS 强大的布局管理器允许开发者灵活地安排页面元素，如Fit布局、Border布局、Form布局等，适应各种屏幕尺寸和响应式设计需求。 3. **数据绑定**：EXTJS 3.3 支持双向数据绑定，使得UI组件可以...
Extjs3.3+swfUpload2.2实现多文件上传组件.pdf
12-12
Extjs3.3+swfUpload2.2 实现多文件上传组件是一种功能强大且灵活的文件上传解决方案，适用于各种 Web 应用程序。该组件的实现主要基于 swfUpload2.2 和 Extjs3.3，提供了良好的用户体验和可扩展性。
extjs3.3 中文文档
10-27
10. **API参考**：EXTJS 3.3的中文文档还包含了一个详细的API参考，列出了所有可用的类、方法、属性和事件，便于开发者查找和使用。 总的来说，EXTJS 3.3中文文档是学习和开发EXTJS应用程序的重要资源。通过深入...
实现 textarea随内容高度自动变化
wisher的博客
12-09 3335
原理：生成一个新的textarea，不停获取当前textarea最新的值，然后计算高度赋给当前的textarea var addHandler = window.addEventListener?             function(elem,event,handler){elem.addEventListener(event,handler);}:             f
EXT window.open()的用法
iteye_8420的博客
06-14 2073
  EXT window.open()   window.open(pageURL,name,parameters)pageURL 打开页面路径name 子窗口句柄parameters 窗口参数(各参数用逗号分隔)eg:&lt;SCRIPT&gt;&lt;!--window.open ('http://www.taobao.com','new','height=200,width=40...
Ext.data.JsonReader 取出当前所在的对象
iteye_8420的博客
07-02 216
在后台用json格式ObjectMapper对象写出数据 在Ext怎样得到整个对象，直接用Ext.data.JsonReader.jsonData.可以得到整个对象。一般在Ext.data.JsonReader中通过设置的root ：‘data’  来获取设置的主要信息...
解决extjs grid文字不能选中的问题
iteye_8420的博客
02-13 172
转载：http://floydd.iteye.com/blog/1326342 解决extjs grid文字不能选中的问题 博客分类：  web javascript css extjsgrid文字不能选中   Css代码  .x-selectable, .x-selectable * {       -moz-user-sele...
Extjs信息提示框
iteye_8420的博客
08-02 152
1、 Ext.MessageBox提供的信息提示框与标准JavaScript提供的原始提示框的差别，主要表现在3个方面：           1） 实现方式 标准JavaScript提供的信息提示对话框是一个真正的弹出窗口。Ext.MessageBox提供的信息对话框并不是真正的弹出窗口，它只是在当前页面显示一个层(div)。 2） 显示信息的格式 标...
ExtJS layout的9种样式风格总结
iteye_8420的博客
12-18 116
文章转载自：http://virgoooos.iteye.com/blog/288924，版权归原作者所有   extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。  absolute 顾名思义，在容器内部，根...
Ext数据扩展显示
iteye_8420的博客
08-04 104
  //有些大数据量放在列信息里面会占据较大的位置，影响界面美观，可以把它进行缩放 1. 定义该数据的缩放信息      var myExpander = new Ext.grid.RowExpander({ tpl : new Ext.Template('&lt;p style="color:#999;margin:2px 0px 2px 48px;"&gt;{acontent}&l...
ExtJS开发指南：快速入门和高级应用
* EXTJS新手入门：介绍EXTJS的基本概念、安装和配置、基本使用方法等。 * 组件体系结构：介绍EXTJS的组件体系结构、组件的使用方法、控件的使用方法等。 * ExtJS中各控件的使用方法：介绍EXTJS中各控件的使用方法、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值