自动最大化的Container,MyExt.ViewPort,自动填充到所属元素的最大状态

来源：互联网发布：excel重复数据标红编辑：程序博客网时间：2024/04/28 18:35

本程序使extjs 加载其他页面的信息变得不再需要使用iframe,直接加载就可以使用,但是目前还有一个样式问题没解决,被加载的子页面样式会丢失!

网上有好多的tabPanel加载其他html页面的方法,但是个人觉得都不是最好的方法,特别是被加载的页面包含JavaScript脚本时更是问题多多,

所以本人就搞了一个这东西!在这里贴出来,希望大家能够互相参考,节省大家的时间!

有很多人说用EXTjs很慢,很庞大,这是一种片面的说法!这说明你对extjs的正确使用方法还不是很了解!甚至有很多人任然使用iframe来加载新页面,殊不知,iframe会造成重新下载已有js的问题!不信你可以打开IE的临时文件,把里面的文件都清空然后再使用你的程序访问,如果你的程序里面新窗口使用了iframe,那么IE的临时文件里面会多出一个ext-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>  <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(); } }});

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});

效果如下:

效果图