1.Extjs ä¹ initComponent å constructorçåºå«
2.EXTjsä¸å¦ä½è·åPanelä¸htmlçå
容
3.easyuiåextjsåªä¸ªå¥½
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?仿bili源码
this.callParent(arguments);
this.callParent(arguments);
è¿éçarguments æ¯éè¦çã
(å¨Extjs 4 ä¹åççæ¬ä¸ï¼ å¯è½ä¼çå°æ¯è¾å¤çXXX.superclass.constructor.call åæ³)
sencha çå®ç½ä¸æä¸ç¯é对è¿ä¸¤ä¸ªåºå«ç讨论ï¼
/forum/showthread.php?-constructor-Vs-initComponent
ä¸è¿è¯æ³æ¯åºäºExtjs 3 æ¥è®¨è®ºçï¼ ç¬è è§å¾ä½ç¨ä¸æ¯å¾å¤§ã
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);
}
}]
});
ä½ è¯è¯å§~~~
easyuiåextjsåªä¸ªå¥½
ä½ä¸ºExtJsåEasyUIé½ç¨å¾å¾çç»çä¸ä¸ªèèµæ ¼ç¨åºåï¼æå表ä¸ä¸æççæ³ã
é¦å 两个æ¡æ¶çç»ä»¶é½å¾ä¸°å¯ï¼åä¸åºç¨é½è¦æ¶è´¹ãExtJSçå¨ææ§åæ©å±æ§æ´å¥½ï¼ä»ä½¿ç¨ææçï¼easyuiçç»ä»¶ç¸å¯¹ä½éªæ´å¥½ä¸ç¹ã
ExtJS
ä¼ç¹ï¼1.å®å ¨å¼æºï¼æ说çå¼æºçææ并ä¸æ¯è¯´ä¸æ¶è´¹ã
2.æé常èµèµå®çæ¶æ设计ï¼å®å ¨çé¢å对象çç»ä»¶å设计ãææçç»ä»¶é½æ¯ä»ä¸äºåºç¡çç»ä»¶æ´¾çåºæ¥çï¼å¹¶ä¸æä¾äºoveride,extendçæ©å±æ¹å¼ï¼å¯ä»¥è¯´è½å¤ä»»ææ©å±ãå¯è½ä¸äºå桶水ç人è§å¾ExtJSå¾é¾ç¨ï¼é£æ¯å 为ä»ä»¬åªæç®æ¯ã
3.ExtJSçææ¡£åå®ä¾åå¾æ¯EasyUIè¦å¥½å¾å¤ï¼åºç¡æ¯è¾å¥½çå¼å人ååªç¨çå®æ¹çææ¡£ãdemoãéå½åèæºç å°±è½å¤å®æä»»ä½å·¥ä½ï¼éå°é®é¢å®å ¨ä¸ç¨å»ç¾åº¦æ论åé®å ¶ä»äººã
4.å¯ä»¥å®å ¨å¨æå¼å,代ç é½åå¨JSæ件éï¼ä¸åExtJSé£æ ·éå¾å¨é¡µé¢æ¾ä¸ä¸ªDOMå ç´ ãæ以å¯ä»¥èªå·±å®å¶ç»ä»¶å¨ä»»æ页é¢å¼ç¨ï¼å¤ç¨æ§å¥½ã
缺ç¹ï¼1.å¯è½å¤ªå¤äººç¨ï¼é æ审ç¾ç²å³ï¼åæ£æçè »äºå®ççé¢ï¼èªå·±å®å¶çé¢ä¸»é¢æ太é¾ã
2.å¯è½å 为å®å¤ªåºå¤§ï¼ä¸åeasyUIé£æ ·åºäºé¡µé¢å·²æçHTML
DOM渲æï¼æ以ä¸è¬äººè§å¾æ¯è¾é¾(ä½æ¯è¯æ说ä¼æ¥ï¼å¦æ使ç¨è çæ°´å¹³é«çè¯ï¼è¿å ¶å®ä¹æ¯ä¹æ¯å®çä¼ç¹ãå ä¸ºä½ è¦æ¯å¨åä¸ä¸ªçé¢ç¹å»ä¸åæé®è¦å¨ææ¾ç¤ºåç§åæ ·ä¸åçwindowãformçççè¯ï¼åªè¦æè¿äºJSå¼ç¨å°å½å页é¢å°±å¯ä»¥å§ï¼è§ä¸è¿°ä¼ç¹4ï¼ã
easyui
ä¼ç¹ï¼
1.å¨é¡µé¢çDOMå ç´ å ä¸äºå±æ§ç¶åå å è¡JSå°±å¯ä»¥å¨ææé åºç¸åºçç»ä»¶ãå¼åæ¹å¼ç¸å¯¹ExtJSç´è§åç®æ´ä¸äºã
2.ç»ä»¶ç¸å¯¹ä½éªæ´å¥½ä¸ç¹ï¼çé¢å¥½åè·å¹²åç®æ´ã
缺ç¹ï¼1.åå¼æºï¼å¯¹äºä¸ä¸ªé«ææ¥è¯´çä¸å°æºä»£ç æ¯å¾çè¦çï¼äºï¼å 为ä»ä»¬æ»æè¿æ ·é£æ ·çæ©å±éæ±ã
2.ä¸å®è¦å¨é¡µé¢ä¸æ¾ç½®ç¸åºçDOMå ç´ æè½æ¸²æï¼å¦æä¸å¯¹domå ç´ è®¾ç½®éèçè¯ï¼å¨é¡µé¢æ²¡æ渲æè¿ç¨ä¸ä¼æ¾ç¤ºä¸å ä¹±ä¸å «ç³çä¸è¥¿ï¼æ以æ æ³èªå·±å®å¶ç»ä»¶å¨å ¶ä»é¡µé¢å¼ç¨ï¼è¦å¤ç¨çè¯å¾æ¬ç ä¸æ ·æJSåDOMé½å¤å¶è¿æ¥ï¼éå°é常å¤æç页é¢é£æ¯ç¸å½æä¹±åçè¦çã