`
literary_fly
  • 浏览: 92579 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

extjs 如何自动缩放

阅读更多
例如 可编辑的grid面板 
var grid_material = new Ext.grid.EditorGridPanel({ 
width:document.body.clientWidth, 
height:document.body.clientHeight, 
}] 


如果你的面板是包含在jsp页面里面的,上面的设置可以让你获取jsp页面的大小,拖动鼠标改变浏览器大小后,页面随着改变,这样设置自然就可以获得页面大小了,就能随着浏览器改变了  我就是这样做的,效果还不错。 

如果你只是靠jsp页面去引导,整个系统就是用ext去做,本身就是自适应的。 


一下是相关资料  可以从中找到适合你的 
out += "<br />网页可见区域宽:"+   document.body.clientWidth;   
out += "<br />网页可见区域高:"+   document.body.clientHeight;   
out += "<br />网页可见区域宽:"+   document.body.offsetWidth     +"   (包括边线和滚动条的宽)";   
out += "<br />网页可见区域高:"+   document.body.offsetHeight   +"   (包括边线的宽)";   
out += "<br />网页正文全文宽:"+   document.body.scrollWidth;   
out += "<br />网页正文全文高:"+   document.body.scrollHeight;   
out += "<br />网页被卷去的高:"+   document.body.scrollTop;   
out += "<br />网页被卷去的左:"+   document.body.scrollLeft;   
out += "<br />网页正文部分上:"+   window.screenTop;   
out += "<br />网页正文部分左:"+   window.screenLeft;   
out += "<br />屏幕分辨率的高:"+   window.screen.height;   
out += "<br />屏幕分辨率的宽:"+   window.screen.width;   
out += "<br />屏幕可用工作区高度:"+   window.screen.availHeight;   
out += "<br />屏幕可用工作区宽度:"+   window.screen.availWidth;   
out += "<br />你的屏幕设置是   "+   window.screen.colorDepth   +"   位彩色";   
out += "<br />你的屏幕设置   "+   window.screen.deviceXDPI   +"   像素/英寸"; 
// XHTML1.0规范 

var docHeight =document.documentElement.clientHeight;//网页可见区域宽 
var docHeightWithBorder=document.documentElement.offsetHeight //网页可见区域高(包括边线的宽) 
var bodyWidth =document.body.clientWidth; //网页可见区域宽 
var bodyHeight =document.body.clientHeight; //网页可见区域高 
var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽) 
var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽) 
var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽 
var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高 
var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距 
var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距 
var windowTopHeight =window.screenTop; //网页正文部分上边距 
var windowLeftWidth =window.screenLeft; //网页正文部分左边距 
var screenHeight =window.screen.height; //屏幕分辨率的高 
var screenWidth =window.screen.width; //屏幕分辨率的宽 
var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度 
var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度 


分享到:
评论

相关推荐

    extjsExtjs学习笔记——多个图片XTemplate排版居中,自动缩放处理

    在本文中,我们将深入探讨如何使用ExtJS的XTemplate来实现多张图片的居中排版和自动缩放处理。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和模板功能,帮助开发者构建用户界面。XTemplate是ExtJS中的一个...

    ExtJS4中文教程2 开发笔记 chm

    JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ================================= 7款强大的Javascript网格插件 Javascript 汉字编码转换 ...

    ExtJS 使用Flash上传

    至于自动缩放,`UPLoad.swf`可能包含了图片尺寸调整的逻辑。在接收到图片数据后,Flash可以先对其进行缩放,然后再发送回JavaScript。这样可以减少上传的数据量,同时适应不同的显示需求。 自定义提交地址和按钮...

    Extjs之--图片浏览器

    标题中的“Extjs之--图片浏览器”指的是使用Ext JS框架构建的一个用于查看和浏览图片的应用程序。Ext JS是一个流行的JavaScript库,它提供了丰富的组件和工具,用于开发复杂的Web应用程序。这个图片浏览器可能是一个...

    extjs图标和图标样式css

    - 在移动设备上,EXTJS会自动调整图标大小以适应屏幕尺寸。不过,也可以通过CSS媒体查询来控制不同屏幕尺寸下的图标显示。 6. **优化技巧**: - 使用雪碧图(Sprite)技术可以减少HTTP请求,提高页面加载速度。多...

    ExtJs charts.swf源码

    4. 数据绑定:charts.swf可以实时绑定到数据源,当数据变化时自动更新图表,提供实时的可视化体验。 5. 高度可扩展性:源码开放,允许开发者深入修改和扩展图表功能,以适应特定项目需求。 三、修改与优化 1. 动态...

    Extjs中文教程

    - 动画效果包括淡入淡出、滑动、缩放等。 - **Ext.Fx类** - 提供了一组高级的动画效果,支持复杂的动画序列。 - 例如创建一个淡入效果:`new Ext.Fx.fadeIn('elId')`。 - **Ext.Element类中的动画函数** - ...

    解决extjs grid 不随窗口大小自适应的改变问题

    在使用ExtJS框架开发时,开发者常常会遇到一个问题,即在浏览器窗口大小改变后,ExtJS Grid组件无法自动调整大小以适应新的窗口尺寸。为了解决这个自适应问题,ExtJS提供了一个灵活的API来监听窗口大小的变化,并在...

    Designer-extjs

    - **自动布局(auto)**:自动调整组件大小和位置以适应容器尺寸。 - **绝对定位(absolute)**:精确控制组件的位置。 - **手风琴布局(accordion)**:显示一个或多个面板,仅允许展开其中一个面板。 - **锚点布局...

    ext-theme-material:ExtJS 5 的 Google Material 主题

    3. **布局与网格**:Material Design强调灵活的布局和响应式设计,ext-theme-material主题同样支持响应式布局,能够自动适应不同屏幕尺寸,确保在桌面和移动设备上的良好表现。 4. **图标与字体**:主题中集成了...

    FinancialCharting:股票图表。 应用程序使用 ExtJS、HighStock、ServiceStack(带有 swagger 和缓存)和 Quandl.com(数据馈送)

    HighStock提供了一系列高级图表功能,如滚动、缩放、时间轴等,使得用户能够清晰地查看历史数据和实时变动。在“FinancialCharting”项目中,HighStock负责将接收到的股票数据转化为直观易读的图表,用户可以通过...

    ext集成chart

    2. **交互性**:ExtJS图表支持各种交互功能,如点击图表元素触发事件、鼠标悬停显示详细信息、缩放和平移以查看数据细节等。 3. **3D效果**:虽然ExtJS自带的图表库不直接支持3D效果,但可以利用其他库(如Three.js...

    大图查看器

    2. **双击变大**:这是一种便捷的操作方式,用户只需双击图片,程序会自动将图片放大到适合屏幕的尺寸,方便快速查看。 3. **手势放大缩小**:除了双击操作,用户还可以通过平移和捏合手势来改变图片的显示比例。平...

    优化kindeditor,修改flash批量上传图片方式为H5上传,添加第三方视频代码功能,添加手机尺寸预览,粘

    优化后,KindEditor允许用户设置地图的宽度为百分比形式,这样地图会随着容器尺寸的变化而自动缩放,保持页面布局的灵活性。 通过以上优化,KindEditor不仅提升了用户体验,也增强了其在现代Web开发中的适用性。...

    easyui图标

    2. **图标字体**:EasyUI也可能使用图标字体技术,通过内联SVG或者字体文件来加载图标,这种方式可以实现矢量图标的可缩放性和跨浏览器兼容性。 3. **JavaScript插件**:在某些情况下,可能需要使用EasyUI的...

    mxgraph-eval-1_5_1_11(流程图表编辑)

    至于“编辑”功能,mxGraph提供了拖放、选择、移动、旋转、缩放等交互操作,使得用户可以在浏览器中直接编辑图形。此外,它还支持撤销/重做、复制/粘贴、自动布局等高级功能,提升用户体验。 总的来说,mxGraph是一...

    Ext Js权威指南(.zip.001

    9.4.10 自动布局:ext.layout.container.auto / 453 9.4.11 表格布局:ext.layout.container.table / 454 9.4.12 列布局:ext.layout.container.column / 455 9.4.13 自适应布局:ext.layout.container....

    AI web动物识别系统

    例如,在野生动物保护中,它可以用于自动监测和统计特定区域内的动物种群,帮助科学家进行生态研究;在宠物识别中,可以帮助主人快速识别丢失的宠物;在动物园或野生动物园中,可以提供互动体验,让游客了解所见动物...

    甘特图插件带例子

    本资源包中的“ext-gantt”可能是一个基于ExtJS或类似JavaScript库的甘特图插件,它可能包含以下组件和特性: 1. **API文档**:详细解释如何在项目中集成和使用该插件,包括配置选项、方法和事件。 2. **示例代码**...

Global site tag (gtag.js) - Google Analytics