使用viewport布局,左侧(west)是一棵树,右侧(center)是用户数据区,
在左侧树收缩时,右侧的gridpel跟随窗口变化而变化。
代码如下:
var tree_type_grid = new Ext.grid.GridPanel({ id : 'tree_type_grid', store : treeTypeStore, layout:'fit', //renderTo:'tree_type_choose', renderTo:Ext.getBody(), colModel : colmodel, selModel : new Ext.grid.RowSelectionModel(), stripeRows : true, //height : 490, //height : '100%', width:'100%', autoScroll:false, sm:rsmodel, tbar : topBar, bbar : pagingBar });
效果如下:
添加如下代码:
Ext.EventManager.onWindowResize(function(){ tree_type_grid.getView().refresh(); });
效果如下:
本方法对ExtJS3.0.0有效,其它未验证。
相关推荐
在事件处理函数中,通过`grid1.getView().refresh()`来刷新Grid的视图,使其随窗口的大小变化而自动调整。 ### 4. 注意事项 - 在使用`Ext.EventManager.onWindowResize`方法时,确保为每一个Grid组件绑定窗口大小...
// 当窗口关闭时,检查数据是否变化 myWindow.on('beforeclose', function(window, eOpts) { var currentData = formPanel.getForm().getFieldValues(); if (!Ext.Object.equals(initialData, currentData)) { ...
- **响应式设计**:对于需要随窗口大小变化而动态调整的组件,Fit布局可以轻松实现这一需求。 #### 4. 示例代码分析 下面是一个简单的示例代码,展示了如何使用Fit布局来展示股票数据: ```javascript var myData ...
- `ProportionalColumns` 和 `ProportionalRows`:这些属性允许你设置列宽和行高的比例,使得网格单元大小能随窗口大小变化而自适应。 - `Spacing`:设置子组件之间的间距。 - `ColumnCount` 和 `RowCount`:在...
EXT的布局系统还支持动态调整,这意味着当窗口大小改变或组件状态变化时,布局会自动调整以适应新的空间。例如,可以利用`monitorWindowResize`属性来控制是否响应窗口大小的变化。 总之,EXT的布局系统为开发者...
2. **布局管理**:EXTJS提供了多种布局模式,如Fit布局、FormLayout、TableLayout等,用于调整组件在容器中的位置和大小,以适应不同屏幕尺寸和窗口大小的变化。 3. **数据绑定**:EXTJS支持双向数据绑定,这意味着...
Viewport组件是Ext应用程序的根容器,用于填充整个浏览器窗口,管理布局和响应窗口大小变化。 ##### 5. **Window(窗口)** Window组件可以创建一个浮动的对话框或模态窗口,用于显示额外的信息或收集用户输入。 ...
布局管理器可以根据容器大小的变化自动调整子组件的位置和大小,确保界面在不同屏幕尺寸下都能正常显示。 4. **用户界面组件**:Ext 2.0包含一系列预定义的UI组件,如表格、树、菜单、工具栏、图表等。这些组件高度...
2. **布局管理器**:Ext提供多种布局模式,如Fit布局、Border布局、Form布局等,用于自动调整组件大小和位置,适应不同的屏幕尺寸和窗口大小。 3. **数据绑定**:Ext的数据绑定机制允许视图组件与数据源直接关联,...
它包含了一系列预定义的UI组件,如表格、面板、窗口、菜单、按钮等,这些组件可以像积木一样组合使用,构建复杂的Web界面。每个组件都有自己的属性、方法和事件,方便定制和扩展。 **2. 数据绑定** ExtJS 2.0引入了...
在每个TabSheet上,可以使用各种布局管理器(如GridPanel,Anchors或Align属性)来确保组件在窗体大小变化时正确对齐和缩放。 6. **交互逻辑**: Delphi XE3提供了丰富的事件处理机制,比如OnChange事件,当用户...
它内置的布局管理器能够根据浏览器窗口大小自动调整组件的排列方式。 ### 5. 动态加载 EXTJS支持按需加载,可以只加载当前需要的组件和数据,减少页面初始化时的资源消耗,提升应用性能。此外,它的动态加载功能还...
在ExtJS 2.2中,组件可以嵌套在其他组件中,并通过各种布局模式(如fit、border、form、table等)进行排列和调整大小。这使得构建响应式和动态的用户界面变得简单。 3. **数据绑定**: 数据绑定是ExtJS的核心特性...
3. **布局管理**:EXT提供了多种布局方式,如Fit布局、Border布局、Form布局等,用于自动调整组件在容器中的位置和大小,以适应不同屏幕尺寸和用户需求。 4. **事件系统**:EXT拥有丰富的事件模型,组件间通过事件...
讲解了如何在Window组件中添加最小化功能,以及如何处理窗口状态变化。 ### 第十四部分:Panel的子类——FormPanel #### 一、无处不在的表单 强调了FormPanel组件在Web应用程序中的广泛应用,用于数据输入、编辑和...
3. **布局管理**:EXT 2.0提供了多种布局模式,如fit布局、border布局、form布局等,可以根据需要调整组件的尺寸和位置,适应不同大小的屏幕和窗口。 4. **树形视图**:EXT 2.0的TreePanel组件可以方便地展示层次...
EXT的StateProvider可以用来保存窗口大小、位置、面板折叠状态等信息,这样当用户下次访问时,可以恢复到之前的状态,提供良好的用户体验。 3. **core** 核心模块包含EXT 2.0的基础类和工具函数,是整个框架的基础...
总之,ExtJS 3.4.0是一个强大且灵活的前端开发工具,能够帮助开发者构建出专业级的Web应用,而这个压缩包正是掌握这一技术的起点,包含了所有必要的资源和示例,无论是初学者还是经验丰富的开发者,都能从中受益。
- **Viewport**: 视口组件,代表着浏览器的可视区域,能够随着浏览器窗口的大小变化而自动调整其内部组件的布局。 - **MenuPanel**: 菜单面板,用于展示一系列可点击的菜单项,通常用于导航。 - **Tree**: 树形结构...
EXTJS是一个基于JavaScript的开源富客户端框架,专为构建交互式Web应用程序而设计。EXTJS 3.0是EXTJS的一个重要版本,提供了丰富的组件库和强大的数据绑定机制,使得开发者能够创建功能丰富的桌面级应用。EXTJS 3.0...