`
ruvuoai
  • 浏览: 95689 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extjs tablepanel 高度自适应问题

    博客分类:
  • web
阅读更多

项目中为了给客户好点的功能切换体验,想到了用extjs的tabpanel

在页面中用了tabpanel后,高度新打开的tab页的iframe 的高度总是出现无法填满页面的情况

于是被迫给tabpanel指定了高度,为了达到自适应的效果用了

document.body.clientWidth

document.body.clientHeight 

 

代码如下:

 

		Ext.onReady(function() {
			Ext.BLANK_IMAGE_URL = 'script/extjs/resources/images/default/s.gif';
			Ext.QuickTips.init();	
			
			scrollerMenu = new Ext.ux.TabScrollerMenu({
				maxText  : 15,
				pageSize : 5
			});
			
			panel = new Ext.TabPanel({
				applyTo:document.body,
		        enableTabScroll:true,
		        activeTab:0,
		        resizeTabs:true,
		        layoutOnTabChange:true,
		        height:document.body.clientHeight,
		        plugins:['tabclosemenu',scrollerMenu],
		        defaults: {autoScroll:true},
		        items:[{
		            id: 'testPanel',
		            iconCls: 'new-tab',
		            title: '首页',
		            html:'<iframe id="frmmain" name="frmmain" scrolling="auto" frameborder="0" width="100%" height="100%" src="yz/toHandleElectronDocumentList.action"></iframe>',
		            closable:false,
		            autoScroll: true
		        }
		        ]
	    	});
		});
分享到:
评论

相关推荐

    extjs 入门实例之布局

    NULL 博文链接:https://1151461406.iteye.com/blog/2361439

    Extjs Label的 fieldLabel和html属性值对齐的方法

    在ExtJS框架中,开发人员经常使用`Label`组件来展示表单字段的标签或静态文本。`Label`组件提供了一种方式来清晰地呈现UI元素,包括与表单字段进行对齐。本文将深入探讨如何处理`Label`组件中的`fieldLabel`和`html`...

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

    Extjs grid 中文排序问题修正

    在EXTJS开发中,我们经常会遇到使用Grid组件展示数据的情况,特别是当数据包含中文字符时,可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好,但对于中文字符,由于编码和比较规则的不同,可能...

    100行代码解决ExtJs4.1合并单元格问题

    100行代码解决ExtJs4.1合并单元格问题

    ExtJS内存泄漏问题详解

    关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

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

    为了解决这个自适应问题,ExtJS提供了一个灵活的API来监听窗口大小的变化,并在变化发生时进行相应的调整。 ### 1. 问题概述 在ExtJS Grid组件中,如果希望它能够响应浏览器窗口大小的变化并自动调整其大小,就...

    ExtJS 7.6 SDK trial

    2. **响应式布局**:ExtJS 7.6继续强化其响应式设计能力,允许开发者为不同的屏幕尺寸和设备创建自适应的应用。这包括新的布局管理器和组件调整,使得在桌面、平板和手机上都能提供一致的界面。 3. **Modern ...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    Extjs自动最大化panel

    2. **尺寸配置**:`autoWidth`和`autoHeight`属性分别可以让Panel宽度和高度自适应,当这些属性设置为`true`时,Panel会根据其父容器的尺寸自动调整大小。 3. **事件监听**:可能需要监听窗口或容器的resize事件,...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    ExtJs4.2 下拉框树

    3. **自动调整高度**:解决高度不能自动调整的问题,开发者可能引入了自适应高度的逻辑,可能是通过计算节点数量、每行的高度以及视口高度,然后动态设置下拉框的高度。 4. **自定义样式和交互**:为了使下拉树更加...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    这些组件具有高度可配置性和可复用性,可以快速构建复杂的用户界面。 2. **数据绑定**:ExtJS支持双向数据绑定,使得视图和模型之间的数据同步变得简单。数据源可以是JSON、XML或其他数据格式,与服务器端的数据...

    extjs6.2 SDK下载

    5. **布局管理**:EXTJS拥有强大的布局系统,6.2版本可能会进一步完善,提供更多的布局选项和更好的自适应布局,以适应不同屏幕尺寸。 6. **数据绑定**:EXTJS的数据绑定机制允许组件与数据源实时同步,6.2可能会...

    ExtJs6 Desktop

    1. 修改提示宽度不能自适应问题 2. 增加桌面图标自适应换行 3. 增加桌面图标拖动 4. 解决桌面图标拖动后闪屏问题 5. 桌面背景默认拉伸 6. 增加中文支持文件 7. 任务栏背景色 8. 开始菜单多级菜单 9. 登录窗口

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    EXTJS

    2. **响应式设计**:EXTJS 支持多种屏幕尺寸和设备,可以自适应地调整布局,为移动设备提供良好的用户体验。 3. **强大的数据管理**:EXTJS 提供了Model、Store 和 Proxy 机制,用于处理数据的加载、存储和同步。 4....

    extjs 3.4 开发前准备

    EXTJS的强大在于其丰富的组件库和高度可定制化,学习EXTJS不仅需要理解其API,还需要实践和调试以提升对框架的理解。随着对EXTJS的深入学习,开发者可以构建复杂、功能完善的Web应用程序。后续章节将分享更多关于...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和...通过深入理解EXTJS的组件模型、布局管理、数据绑定和远程通信,开发者可以创建出具有高度交互性和响应性的用户界面。

Global site tag (gtag.js) - Google Analytics