`

[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)

阅读更多

[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)

http://www.cnblogs.com/huligong1234/archive/2013/01/07/2849183.html

 

一.问题:

ExtJS4使用border布局,左边为accordion布局的功能导航菜单,发现当导航菜单面板收缩展开时,右边选项卡面板(TabPanel)中的grid等面板宽度并没有自动变化。

二.解决方案:

1.在新增选项卡中配置一个自定义属性sidebarChange,默认值为false,用于保存左边导航菜单是否发生展开收缩动作。

2.在新增的选项卡中添加activate监听事件,当选项卡被激活且sidebarChange属性值为true时,则通过tab.loader.load()重新加载选项卡内容。

image_thumb5_thumb

3.在左边功能导航面板中配置相应的展开和收缩事件的监听。及相应的处理方法。

这样,当左边功能导航面板收缩或展开时,当前的选项卡会重新加载。

image_thumb8_thumb

image_thumb11_thumb

4.至此,当左边导航面板收缩或展开时,就解决了gridpanel宽度不跟着自动变化问题。

分享到:
评论

相关推荐

    extjs4.x tabpanel 动态加载panel和html例子

    在EXTJS 4.x框架中,`tabpanel`是用于创建多标签界面的组件,它可以方便地组织和切换多个视图。动态加载panel和HTML到tabpanel是提高应用性能和用户体验的有效方式,因为它允许按需加载内容,减少初始页面加载时间。...

    extjs动态添加tabpanel标签页支持pannel嵌入

    extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    EXTJS4 菜单栏

    5. **动态更新**:在运行时,你可以通过调用`add`、`remove`、`insert`等方法来动态修改菜单栏的内容。这使得菜单栏可以根据用户权限或应用状态进行实时更新。 6. **事件处理**:EXTJS4的菜单项支持多种事件,如`...

    ExtJS TabPanel 标签操作

    ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格数据展示(Grid Data Display),以及如何在实际应用中进行操作。 动态菜单在Web应用中...

    extjs4.2.1 tabPanel刷新及关闭标签

    在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式进行切换展示。在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,...

    Extjs动态加载菜单

    动态加载菜单是ExtJS中的一个关键特性,它允许在用户交互过程中动态地创建、修改和加载菜单项,提供了更灵活的用户界面设计。在“Extjs动态加载菜单”这个主题中,我们将深入探讨这一功能的实现方式以及相关技术。 ...

    extJs3升级extjs4方案

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

    extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式

    标题中的“ExtJS Desktop相关 动态生成开始菜单 多级菜单的快捷方式”涉及到的是一个使用ExtJS框架实现的桌面应用模拟系统,它能够创建类似Windows操作系统的开始菜单,并支持多级菜单结构来快速访问应用程序或功能...

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

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

    extjs4 导航菜单实例

    这篇博客文章“extjs4 导航菜单实例”将深入探讨如何在ExtJS 4中创建和使用导航菜单,这对于构建具有层次结构和动态功能的用户界面至关重要。 在ExtJS中,导航菜单通常通过`Ext.menu.Menu`类来实现,这是一个可弹出...

    ExtJS tabPanel实例

    在ExtJS中,`tabPanel` 是一个非常重要的组件,它允许你在一个容器内创建多个标签页,每个标签页可以承载不同的内容,提供了类似桌面应用的用户体验。在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `...

    extjs4.0 实现了主页面框架 动态菜单 例子 表单 ajax

    extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记...

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端框架以及JDBC数据访问层。 1. **EXTJS动态树**: EXTJS的动态树(TreePanel)组件允许开发者...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...

    ExtJs菜单导航功能,不在用左边功能树

    "ExtJs菜单导航功能,不在用左边功能树"这一主题,旨在探讨如何在不使用左侧树形结构的情况下,利用ExtJs实现高效且现代感的菜单导航。 ExtJs是一款强大的JavaScript库,专门用于构建富客户端应用。它提供了丰富的...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    ### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中,为了提高用户体验并使数据呈现更加直观易懂,开发者常常需要根据数据的不同状态来调整UI元素的样式。例如,在使用...

    extjs4中文文档

    EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档...同时,文档还可能涵盖了EXTJS4的升级、调试、性能优化等相关内容,帮助开发者解决实际开发过程中遇到的问题。

Global site tag (gtag.js) - Google Analytics