这功能不错，相当使用，不用再为动态更换组件仇了，代码很简单就不多说了。

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:"原有的组件"}