1.renderToåapplyToçåºå«
2.EXTjsä¸å¦ä½è·åPanelä¸htmlçå
容
renderToåapplyToçåºå«
ExtJSä¸çrenderToåapplyToçå·®å« å¯¹applyToårenderToçç解åæè个人认为è¿ä¸¤ç¯æç« åçä¸å¤éä¿ãåä¸ä¸ªç®åçä¾åæ¥ççæç»çæäºä»ä¹ä»£ç ï¼ å¤å¶ä»£ç 代ç å¦ä¸: <head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="ext-3.1.0/ext-all-debug.js"></script> <script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var button = new Ext.Button({ renderTo: 'button',例源autoupdate源码 text:'OK' }); }); </script> </head> <body> <div id="button">sadfa</div> </body> </html> æ¤ä»£ç çæçhtmlå¦ä¸ï¼ å¦ææ¯applyTo:buttonï¼åçæç代ç ä¸ºï¼ å¾ææ¾ï¼ç®åç说ï¼applyToæ¯å°ç»ä»¶å å¨äºæå®å ç´ ä¹åï¼èrenderToåæ¯å å¨æå®å ç´ ä¹å ã æ¥ä¸æ¥ï¼æ们åç¨ç¨æ¢å¯»ä¸extjsæºç ç奥ç§ãççextjså é¨æ¯å¦ä½ä½¿ç¨è¿ä¸¤ä¸ªé 置项çï¼å©ç¨firebugæ件è°è¯ä¸ä¸ext-all-debug.jsè¿ä¸ªæ件ã å¨Ext.Componentçæé å½æ°Ext.Component = function(config){ â¦}ä¸æè¿æ ·ä¸æ®µä»£ç ï¼3.1.0çæ¬æ¯è¡ï¼ï¼å¤å¶ä»£ç 代ç å¦ä¸: if(this.applyTo){ this.applyToMarkup(this.applyTo); delete this.applyTo; }else if(this.renderTo){ this.render(this.renderTo); delete this.renderTo; } å¯è§applyToå±æ§ä½¿å¾Componentè°ç¨applyToMarkupæ¹æ³ï¼èrenderTo使å¾å®è°ç¨renderæ¹æ³ï¼å¹¶ä¸å¦æ两个é½è®¾ç½®çè¯ä» æapplyToææï¼è¿ç¹å¨extjsçææ¡£ä¸ä¹æç¹å«æåºã appylToMarkupæ¹æ³å¦ä¸(3.1.0çæ¬æ¯è¡)ï¼ å¤å¶ä»£ç 代ç å¦ä¸: applyToMarkup : function(el){ this.allowDomMove = false; this.el = Ext.get(el); this.render(this.el.dom.parentNode); } å®æç»è°ç¨çä¹æ¯renderï¼ä¸è¿renderçä½ç½®æ¯parentNode,renderæ¹æ³å¦ä¸(3.1.0çæ¬æ¯è¡) å¤å¶ä»£ç 代ç å¦ä¸: render : function(container, position){ if(!this.rendered && this.fireEvent('beforerender', this) !== false){ if(!container && this.el){ this.el = Ext.get(this.el); container = this.el.dom.parentNode; this.allowDomMove = false; } this.container = Ext.get(container); if(this.ctCls){ this.container.addClass(this.ctCls); } this.rendered = true; if(position !== undefined){ if(Ext.isNumber(position)){ position = this.container.dom.childNodes[position]; }else{ position = Ext.getDom(position); } } this.onRender(this.container, position || null); if(this.autoShow){ this.el.removeClass(['x-hidden','x-hide-' + this.hideMode]); } if(this.cls){ this.el.addClass(this.cls); delete this.cls; } if(this.style){ this.el.applyStyles(this.style); delete this.style; } if(this.overCls){ this.el.addClassOnOver(this.overCls); } this.fireEvent('render', this); var contentTarget = this.getContentTarget(); if (this.html){ contentTarget.update(Ext.DomHelper.markup(this.html)); delete this.html; } if (this.contentEl){ var ce = Ext.getDom(this.contentEl); Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']); contentTarget.appendChild(ce); } if (this.tpl) { if (!this.tpl.compile) { this.tpl = new Ext.XTemplate(this.tpl); } if (this.data) { this.tpl[this.tplWriteMode](contentTarget, this.data); delete this.data; } } this.afterRender(this.container); if(this.hidden){ this.doHide(); } if(this.disabled){ this.disable(true); } if(this.stateful !== false){ this.initStateEvents(); } this.fireEvent('afterrender', this); } return this; } renderæ¹æ³çèµ·æ¥æ¯è¾å¤æï¼ä»ç»é 读ä¸å ¶å®ä¹ä¸æ¯å¤ªé¾ï¼ä¸»è¦å°±æ¯ä¸ºä¸ä¸ªDOMèç¹è®¾ç½®classï¼å¯è§æ§ï¼å¨onRenderæ¹æ³ä¸ä¼å¯¹è¿ä¸ªç»ä»¶çæç¸åºçhtml代ç ã å¨ å¯¹applyToårenderToçç解åæè ä¸æå°çelé ç½®å±æ§,ææ¥extjsçææ¡£åç°è¿æ¯ä¸ä¸ªåªè¯»å±æ§ï¼è½ç¶ææ¹æ³è¦çå®ï¼ä¸è¿ä¸è¬ä¸éè¦æå¨è®¾ç½®ï¼ä¸é¢æ¯Panelçå ¬å ±å±æ§elçææ¡£åæï¼ el : Ext.Element The Ext.Element which encapsulates this Component. Read-only. This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config. Note: this element will not be available until this Component has been rendered. æ以æ估计æ¤æåçæ¯ä»¥åçæ¬çextjsã个人认为ï¼elæ¯ç´§å 裹çextjsç»ä»¶çä¸ä¸ªDOMèç¹ï¼ä¸è¬æ¯ç±extjsèªå·±çæçï¼å¥½åç»èèä¸æ ·ï¼å¦ææ¨å¼äºå®ï¼é£ä¹è¿ä¸ªç»ä»¶å°±ä¸å®æ´äºï¼å¾å¯è½ä¼è¡¨ç°çä¸æ£å¸¸ãèrenderæ¹æ³ä¸çcontainerï¼ä¹å°±æ¯applyToä¸æå®å ç´ çç¶å ç´ ï¼renderToä¸æå®çå ç´ ï¼ï¼æ¯è¯¥ç»ä»¶çç¶å ç´ ï¼è¿ä¸ªcontainerä¸å¯ä»¥å æ¬å ¶ä»çhtmlå ç´ æè extjsç»ä»¶ã 综ä¸æè¿°ï¼å ¶å®applyToårenderTo没æå¾æ¬è´¨åºå«ï¼åªæ¯renderçä½ç½®ä¸åã
EXTjsä¸å¦ä½è·åPanelä¸htmlçå 容
// private
afterRender : function(){
if(this.floating && !this.hidden && !this.initHidden){
this.el.show();
}
if(this.title){
this.setTitle(this.title);
}
this.setAutoScroll();
if(this.html){
this.body.update(Ext.isObject(this.html) ?
Ext.DomHelper.markup(this.html) :
this.html);
delete this.html;//çè¿é
}
è¿ä¸ªæ¯Panelå®ä¹çæºç ï¼å¯ä»¥çå°Panelå¨æ¸²æåï¼æhtmlå±æ§è¢«body.update使ç¨äºï¼ç¶å该å±æ§å°±è¢«å é¤äºãå æ¤ä½ å®ä¹åºæ¥çpanel对象æ æ³éè¿ç¹å±æ§æ¥è·åhtmlä½ å®ä¹çå 容äºã
æ以æ们åªè½éè¿bodyæ¥è·åäºãè¿æ ·å°±è¡äºï¼
var tb = new Ext.Panel({html:'',
tbar:[{
text:"ç¹å»è·å",
handler : function() {
alert(tb.body.dom.innerHTML);
}
}]
});
ä½ è¯è¯å§~~~
