ExtJS 4动态加载组件

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

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:"原有的组件"}
posted @ 2011-05-24 17:02  程序员天下  阅读(1381)  评论(0)    收藏  举报