ExtJS 4动态加载组件

最新推荐文章于 2021-08-20 09:31:23 发布

weixin_33834137

最新推荐文章于 2021-08-20 09:31:23 发布

阅读量50

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/weixin_33834137/article/details/85194680

版权

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

 
  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 
16Ext.onReady(function(){
17if(Ext.BLANK_IMAGE_URL.substr(0,4)!="data"){ 
18Ext.BLANK_IMAGE_URL="./images/s.gif";
19}
20 
21//在此添加ExtJS代码
22var panel=Ext.create("Ext.Panel",{
23renderTo:Ext.getBody(),
24layout:"auto",
25height:500,
26width:400,
27autoLoad:{
28url:"Component.js",
29renderer:"component" 
30},
31tbar:[
32{text:"加载组件",scope:panel,handler:function(){
33panel.loader.load({
34url:"Component1.js",
35renderer:"component"
36})
37}},
38{text:"加载组件(removeAll)",scope:panel,handler:function(){
39panel.loader.load({
40url:"Component1.js",
41renderer:"component",
42removeAll: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:"原有的组件"}

weixin_33834137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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