[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()重新加载选项卡内容。
3.在左边功能导航面板中配置相应的展开和收缩事件的监听。及相应的处理方法。
这样,当左边功能导航面板收缩或展开时,当前的选项卡会重新加载。
4.至此,当左边导航面板收缩或展开时,就解决了gridpanel宽度不跟着自动变化问题。
相关推荐
EXTJS 3.0的API是其核心组成部分,提供了大量的可重用组件,如表格、面板、窗口、菜单、按钮等。API主要包括以下几个部分: 1. **组件(Components)**:EXTJS的核心在于其强大的组件系统,如GridPanel(数据网格)...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
9. **ViewPort** 用于渲染整个body,能根据浏览器窗口大小自适应调整。使用`border`布局时,组件的位置由`region`属性决定。 10. **Border布局实例** `border`布局允许将组件分配到north, south, west, east四个...
- **AccordionLayout**:允许子组件折叠展开,适用于显示多个可折叠内容的区域。 - **AnchorLayout**:基于组件的锚点属性定位,可以实现精确的相对位置布局。 - **CardLayout**:切换显示单个子组件,常用于...
在ExtJS中,TabPanel是一种常用的组件,它用于创建具有多个选项卡的用户界面,每个选项卡可以包含不同的内容。当需要将一个TabPanel嵌入到其他网页中时,这通常涉及到跨页面交互或者说是子页面的嵌入。在本文中,...
### ExtJS控件详解 #### 基本组件 **Ext.Button** - **描述**: 提供了一种标准的用户交互方式,通常用于触发特定事件或功能。 - **用途**: 创建按钮,可以设置图标、文本、工具提示等。 **Ext.SplitButton** - **...