1.renderToåapplyToçåºå«
2.Extjs ä¹ initComponent å constructorçåºå«
3.extjs å¼å¾å¦ä¹ å
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',目源码e码android简单天气预报源码 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 ä¹ initComponent å constructorçåºå«
Extjs æä¾çç»ä»¶è¿æ¯æºä¸°å¯çï¼ ä½æ¯ææ¶åéæ±æ´ä¸°å¯ã
å½Extjs åççç»ä»¶æ æ³å®ç°æ们çè¦æ±çæ¶åï¼ å°±éè¦æ©å±Extjs çç»ä»¶å®ç°èªå¶ç»ä»¶äºã
é¤äºè¿ç§ä½¿ç¨ç¶åµï¼ ææ¶å对äºä¸äºç¸åå´æ使ç¨å¾å¤çé ç½®ï¼ å¯è½åæå®ç¬ç«åºæ¥ï¼åç¬è®¾ä¸ºä¸ç§ç»ä»¶ä¾å¤§å®¶è°ç¨ï¼ èçå¼åæ¶é´åæé«ä»£ç éç¨åº¦ã
initComponent å constructor å°±æ¯Extjs æä¾ç¨æ¥å®ç°ç»§æ¿åæ©å±çæ¹å¼ã
1. initComponentè¿ä¸ªæ¹æ³æ¯å¨Ext.Componentçæé å½æ°(constructor)ä¸è°ç¨çï¼åªæç´æ¥æé´æ¥ç»§æ¿èª Ext.Componentçç±»æä¼å¨constructoréè°ç¨initComponentæ¹æ³
çä¸ä¸ Ext.AbstractComponentçæºç æ件 src/AbstractComponent.js
å¨ constructoræ¹æ³ä¸è°ç¨äºinitComponent
2.
1ï¼èªå®ä¹ç±»ä¸ç initComponentãå½æ°ä¸å¿ é¡»è°ç¨ callParent();å¦å è°ç¨è æ æ³åå§åè¿ä¸ªå¯¹è±¡
2ï¼é对button è¿æ ·çæ©å±ç»ä»¶æ¥è¯´ï¼èªå®ä¹ç±»ä¸ç constructor ï¼éè¦è°ç¨callParent( arguments);å¦å è°ç¨è æ æ³åå§åè¿ä¸ªå¯¹è±¡
[html] view plaincopyprint?
this.callParent(arguments);
this.callParent(arguments);
è¿éçarguments æ¯éè¦çã
(å¨Extjs 4 ä¹åççæ¬ä¸ï¼ å¯è½ä¼çå°æ¯è¾å¤çXXX.superclass.constructor.call åæ³)
sencha çå®ç½ä¸æä¸ç¯é对è¿ä¸¤ä¸ªåºå«ç讨论ï¼
/forum/showthread.php?-constructor-Vs-initComponent
ä¸è¿è¯æ³æ¯åºäºExtjs 3 æ¥è®¨è®ºçï¼ ç¬è è§å¾ä½ç¨ä¸æ¯å¾å¤§ã
extjs å¼å¾å¦ä¹ å
å¦æéè¦çè¯ï¼å¼å¾å¦ä¹ä¸ç¨åè°cssï¼éä½äºå·¥ä½éï¼
ææ¡£åä¾åé½å ¨ï¼æ¯å¼æºçï¼æ¹ä¾¿æ¥çæºç ï¼
ç»ä»¶ä¸°å¯ï¼å¯ä»¥èªè¡å°è£ ç»ä»¶ï¼
æ´»è·çExtjså¼å交æµq群ï¼