本程序使extjs 加载其他页面的信息变得不再需要使用iframe,直接加载就可以使用,但是目前还有一个样式问题没解决,被加载的子页面样式会丢失!
网上有好多的tabPanel加载其他html页面的方法,但是个人觉得都不是最好的方法,特别是被加载的页面包含JavaScript脚本时更是问题多多,
所以本人就搞了一个这东西!在这里贴出来,希望大家能够互相参考,节省大家的时间!
有很多人说用EXTjs很慢,很庞大,这是一种片面的说法!这说明你对extjs的正确使用方法还不是很了解!甚至有很多人任然使用iframe来加载新页面,殊不知,iframe会造成重新下载已有js的问题!不信你可以打开IE的临时文件,把里面的文件都清空然后再使用你的程序访问,如果你的程序里面新窗口使用了iframe,那么IE的临时文件里面会多出一个ex
t-all.js,ext-base.js
打开2个新窗口就有3个ext-all.js,ext-base.js,(主程序还有一个呢!)
打开一个新的窗口就重新加载一次,速度奇慢!这样的问题怎么办呢?
嘿嘿!我已经给你解决了!
还有人会出现这样的问题!
在一个控件里面想要一个子控件最大化,常用的方法是在父控件里面使用'fit'布局,但是有的时候父控件都不知道自己的大小所以渲染的时候,子控件自然就不知道自己该多大了!这个问题经常出现在window窗口里面,我曾经的解决方法就是定死window窗口的大小!这个比较方便的方法!但是有的时候很多问题还是没法解决高度和宽度的问题!在父控件大小未知的情况下想要子控件'fit'是不可能的!大家可以打开fitlayout布局的源代码看看
FitLayout源代码
Ext.layout.FitLayout = Ext.extend(Ext.layout.ContainerLayout, {
// private
monitorResize:true,
// private
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed){
this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
}
},
// private
setItemSize : function(item, size){
if(item && size.height > 0){ // display none?
item.setSize(size);
}
}
});
Ext.Container.LAYOUTS['fit'] = Ext.layout.FitLayout;其中源代码 this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
中的target就是被渲染的目标,也就是父控件,父控件的大小都不知道, 子控件自然不知道了!
这些问题是极其辣手又必须要解决且经常面对的问题!
想知道怎么解决吗?看看我下面的代码就知道了!
主页面的源代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="./extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="./extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="./extjs2.0/ext-all-debug.js" mce_src="extjs2.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" defer="defer" src="./js/test.js" mce_src="js/test.js">
</head>
<body>
</body>
</html>
test.js的源代码(主程序)
Ext.onReady(function (obj){
var win=new Ext.Window({
title:'测试新窗口的autoLoad',
/*atuoLoad:{
url: "test.htm",
scripts: true,
params: "param1=foo¶m2=bar",
text: "Loading Foo..."
},*/
height:600,
width:800
});
win.on('show',function(){
win.load({
url: "test.htm",
scripts: true,
params: "param1=foo¶m2=bar",
text: "Loading Foo..."
});
});
win.show();
});
test.htm被调用的页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />
</head>
<body>
<!--注意这里没有加载哪个ext-all.js和ext-base.js文件,因为主页面已经加载了,这回你知道如何提升程序性能了吧,你还会说extjs庞大吗?-->
<mce:script src="./js/myextjs/myViewPort.js" mce_src="js/myextjs/myViewPort.js" defer="defer" ></mce:script>
<mce:script src="./js/testAutoPaenl.js" mce_src="js/testAutoPaenl.js" defer="defer" ></mce:script>
<div id="autoSizePanel"></div>
</body>
</html>
下面是 myViewPort.js的代码(你可以自己试着扩展panel的代码增加自动填充功能)(本文章的主要内容全在这文件里我一天的心血啊)
/* *郑桂良编写2009-6-15日 */ MyExt={}; MyExt.ViewPort = Ext.extend(Ext.Container, { initComponent : function() { MyExt.ViewPort.superclass.initComponent.call(this); this.el = Ext.get(this.renderTo); //this.el.setHeight= Ext.emptyFn; //this.el.setWidth = Ext.emptyFn; //this.el.setSize = Ext.emptyFn; this.el.dom.scroll = 'no'; this.el.applyStyles("height:100%;width:100%;"); this.allowDomMove = false; this.bodyStyle="height:100%;width:100%;"; this.autoWidth = true; this.autoHeight = false; this.allowDomMove=true; this.el.on('resize',this.fireResize,this); this.on('afterlayout',this.fireResize,this); }, fireResize : function(){ var w= this.el.getWidth(); var h=this.el.getHeight(); var size={width:w,height:h}; this.setItemSize(this.activeItem || this.items.itemAt(0), size); }, setItemSize : function(item, size){ //alert("w:"+size.width+"h:"+size.height); if(item && size.height > 0){ item.setSize(size); item.doLayout(); } } });
/*
*郑桂良编写2009-6-15日
*/
MyExt={};
MyExt.ViewPort = Ext.extend(Ext.Container, {
initComponent : function() {
MyExt.ViewPort.superclass.initComponent.call(this);
this.el = Ext.get(this.renderTo);
//this.el.setHeight= Ext.emptyFn;
//this.el.setWidth = Ext.emptyFn;
//this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.el.applyStyles("height:100%;width:100%;");
this.allowDomMove = false;
this.bodyStyle="height:100%;width:100%;";
this.autoWidth = true;
this.autoHeight = false;
this.allowDomMove=true;
this.el.on('resize',this.fireResize,this);
this.on('afterlayout',this.fireResize,this);
},
fireResize : function(){
var w= this.el.getWidth();
var h=this.el.getHeight();
var size={width:w,height:h};
this.setItemSize(this.activeItem || this.items.itemAt(0), size);
},
setItemSize : function(item, size){
//alert("w:"+size.width+"h:"+size.height);
if(item && size.height > 0){
item.setSize(size);
item.doLayout();
}
}
});testAutoPaenl.js的源代码 (被调用的页面的js文件)
var tabs = new Ext.Panel({ region : 'center', //renderTo:'autoSizePanel', //bodyStyle:'height:100%;width:100%', title:'飞洒了看法', autoScroll : true, html:'小窗口' }); new myViewPort( { renderTo:'autoSizePanel', //id:'myViewPort', layout : 'fit', title:"wea", items:tabs, nocache: true, border:1 });
var tabs = new Ext.Panel({
region : 'center',
//renderTo:'autoSizePanel',
//bodyStyle:'height:100%;width:100%',
title:'飞洒了看法',
autoScroll : true,
html:'小窗口'
});
new myViewPort(
{
renderTo:'autoSizePanel',
//id:'myViewPort',
layout : 'fit',
title:"wea",
items:tabs,
nocache: true,
border:1
});
效果如下:
