这功能不错，相当使用，不用再为动态更换组件仇了，代码很简单就不多说了。
| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>加载组件</title> |
| 5 | <link rel="stylesheet" type="text/css" href="../Ext4/resources/css/ext-all.css"/> |
| 6 | <script type="text/javascript" src="../Ext4/bootstrap.js"></script> |
| 7 | <script type="text/javascript" src="../Ext4/locale/Ext-lang-zh_CN.js"></script> |
| 8 | <style type="text/css"> |
| 9 | /*在此添加样式代码*/ |
| 10 | </style> |
| 11 | </head> |
| 12 | <body> |
| 13 | <!--在此添加HTML代码--> |
| 14 | <script type="text/javascript"> |
| 15 | |
| 16 | Ext.onReady(function(){ |
| 17 | if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){ |
| 18 | Ext.BLANK_IMAGE_URL="./images/s.gif"; |
| 19 | } |
| 20 | |
| 21 | //在此添加ExtJS代码 |
| 22 | var panel=Ext.create("Ext.Panel",{ |
| 23 | renderTo:Ext.getBody(), |
| 24 | layout:"auto", |
| 25 | height:500, |
| 26 | width:400, |
| 27 | autoLoad:{ |
| 28 | url:"Component.js", |
| 29 | renderer:"component" |
| 30 | }, |
| 31 | tbar:[ |
| 32 | {text:"加载组件",scope:panel,handler:function(){ |
| 33 | panel.loader.load({ |
| 34 | url:"Component1.js", |
| 35 | renderer:"component" |
| 36 | }) |
| 37 | }}, |
| 38 | {text:"加载组件(removeAll)",scope:panel,handler:function(){ |
| 39 | panel.loader.load({ |
| 40 | url:"Component1.js", |
| 41 | renderer:"component", |
| 42 | removeAll:true |
| 43 | }) |
| 44 | }} |
| 45 | ] |
| 46 | }); |
| 47 | }); |
| 48 | </script> |
| 49 | </body> |
| 50 | </html> |
| 51 |
关键是autoLoad的定义，renderer可以设置渲染方式，渲染方式有3种：html、data和componet。html方式就是更新innerHTML，data复杂点，是以数据格式更新。componet呢则是使用组件的add方法添加组件。注意第二个按钮的removeAll属性，该属性为true会移除面板内原有的所有组件，然后再添加新的，这为更换grid的显示提供了一个便捷的方式。当然了，不用动态加载，直接使用组件的removeAll方法清除组件，然后使用add也是可以添加的。本文的目的是动态加载，所以就这样使用而已。
Componet1.js
| 1 | {xtype:'panel',height:100,width:90,html:"新增的组件"} |
Componet.js
| 1 | {xtype:'panel',height:100,width:200,html:"原有的组件"} |