这功能不错，相当使用，不用再为动态更换组件仇了，代码很简单就不多说了。
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:"原有的组件"}
没有评论:
发表评论