您的位置：首页 > 大数据 > 人工智能

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

2009-06-15 16:34 260 查看
本程序使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>  
        <!--注意这里没有加载哪个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();
        }
    }
});

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



效果如下:



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航