这功能不错，相当使用，不用再为动态更换组件仇了，代码很简单就不多说了。
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>
removeAll属性，该属性为true会移除面板内原有的所有组件，然后再添加新的，这为更换grid的显示提供了一个便捷的方式。当然了，不用动态加载，直接使用组件的removeAll方法清除组件，然后使用add也是可以添加的。本文的目的是动态加载，所以就这样使用而已。
Componet1.js
{xtype:'panel',height:100,width:90,html:"新增的组件"}
Componet.js
{xtype:'panel',height:100,width:200,html:"原有的组件"}
