`

Ext window的大小与屏幕匹配

阅读更多
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth


HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)



1.function resize(){  
2. var win =  Ext.fly('窗体对象组件');//获得要调整的窗体,注意这里先用Ext.fly的方式来获取组件

,如果不行再换别的,如getCmp,get等  
3.//然后参考 http://www.iteye.com/topic/155981 这篇博客,来动态设定组件的大小  
4. 
5.}  
6.window.onresize = resize;  
7.          
8.Ext.onReady(function(){           
9.  resize();  
10.  //.....  
11.} 

Ext.onReady(function(){
formWindow = new Ext.Window({  
                    layout:'fit', 
                    width:480, 
                    height:360, 
                    resizable:true, 
                    closeAction:'close', 
                    plain: true, 
                    maximizable: true, 
                //    minimizable : true,  // 最小化
                    listeners: { 
                        close:function(w){ 
                            //关键部分:关闭窗口前先还原,滚动条才不会消失 
                            w.restore(); 
                        }, 
                        maximize:function(w){     
                            //关键部分:最大化后需要将窗口重新定位,否则窗口会从最顶端开始最大

化                         
                            w.setPosition(document.body.scrollLeft-4,document.body.scrollTop-

4); 
                        } 
                    } 
});
formWindow.show();
})
  • 大小: 101.1 KB
分享到:
评论
1 楼 ygswine 2009-10-10  
仔细看了
楼主很善于总结,学习了

相关推荐

    Ext window的使用

    Ext.Window是Ext JS中的一个类,继承自Ext.container.Container,它创建了一个可以在页面上自由移动和调整大小的浮动窗口。窗口通常用作模态对话框、信息提示或其他需要用户交互的场景。 2. **创建一个基本的Ext....

    Ext_Window用法

    Ext_Window用法

    一个简单的Ext.Window中插入图片的例子

    在Ext JS这个强大的JavaScript框架中,`Ext.Window`是一个常用组件,用于创建浮动、可弹出的窗口。在Web应用程序中,我们常常需要在这些窗口中展示各种内容,包括文字、表格、按钮,当然还有图片。本文将详细介绍...

    Ext.window从右下角弹出/隐藏

    ### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...

    ext 仿window 界面

    "ext 仿window 界面"指的是使用EXTJS 框架来创建类似于Windows桌面操作系统的用户界面,提供一种熟悉且直观的交互体验。这种设计方式可以使Web应用在视觉上更接近本地应用,提高用户的使用舒适度。 EXTJS 提供了...

    EXT Window 通过DIV布局(源代码)

    Ext.Window 通过DIV布局,通过DIV填充window内容,带Ext所需文件。

    Ext-window属性

    以下是对`Ext.Panel` API中与`Window`相关的属性的详细解释: 1. **activeItem**: 这个属性用于指定当前活动的子组件,可以是子组件的序号或ID。在支持一次仅显示一个子组件的布局中,如`Ext.layout.Accordion`、`...

    ext 动态,匹配,下拉单

    EXT的动态匹配下拉单功能允许用户输入文本时实时过滤并显示匹配的选项,极大地提升了用户体验。 在EXT中,动态匹配下拉单主要通过`Ext.form.ComboBox`类实现。这个组件不仅具有基本的下拉列表功能,还支持自动完成...

    Ext.window的一个扩展组件SuperWin.js

    Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;

    EasyExt_003_第一个组件Ext.Window

    EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window

    EXT4 源码+window下模拟ext2+linux_ext文件系统模拟

    EXT4的主要改进包括更大的文件系统大小支持、更快的性能以及对大量小文件的优化处理。在这个压缩包中,你可能会找到EXT4的源代码,这对于理解其工作原理和进行文件系统开发非常有价值。 EXT4的源码分析: EXT4的...

    ExtJs4.2 Window常用方法

    var win = new Ext.Window({ title: '无边框窗口', width: 300, height: 200, plain: true, html: '这是一个无边框的窗口' }); ``` #### resizable - **默认值**:`true` - **作用**:指定Window是否可...

    Ext.window

    NULL 博文链接:https://oppovaan.iteye.com/blog/627655

    Windows读写Ext2/Ext3/Ext4文件系统

    可以读写Ext2,以Ext2方式挂载Ext3文件系统(不支持Ext3日志),不支持中文! It provides Windows NT4.0/2000/XP/2003/Vista/2008 with full access to Linux Ext2 volumes (read access andwrite access). This ...

    Ext2IFS windows

    标题中的"Ext2IFS windows"表明我们正在讨论一个与Windows操作系统相关的软件,该软件的主要功能是支持挂载Linux的ext文件系统。在Windows环境中,通常无法直接读取或写入Linux系统的ext2、ext3或ext4分区,而Ext2...

    ext window

    extjs window的练习 主要介绍下window的主要的配置项,主要的方法和windowGroup

    Extjs使用Window最小化窗口

    1. **创建Window**:使用`Ext.create('Ext.window.Window', { ... })`来创建一个Window实例,设置相关的配置项,如宽度、高度、标题等。 2. **添加工具栏**:在Window的配置中,加入`dockedItems`,创建一个工具栏...

    WindowLite 基于EXT的可拖动改变大小的提示窗口 v2.0

    2. **响应式布局**:EXT支持多种屏幕尺寸和设备类型,WindowLite也因此具备了良好的跨平台兼容性和自适应性。 3. **丰富的API**:EXT提供了一套完善的API,允许开发者对组件进行深度定制,包括样式、行为、事件处理...

    Ext.get与Ext.fly的区别

    ### Ext.get与Ext.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...

    Ext JS Notification 插件

    Ext JS 是一个强大的JavaScript应用程序框架,它提供了丰富的用户界面组件和功能,用于构建富客户端Web应用。在Ext JS中,“Notification”插件是用于显示通知消息的一个组件,它可以帮助开发者在用户界面上创建吸引...

Global site tag (gtag.js) - Google Analytics