研究了一整天终于搞定了 我没有使用网上的那些div之类的 我的思想很简单就是在gridpanel所在的容器显示之前获得容器内部的高度 通过这个高度来做一个参考设定其气元素gridpanel的高度,部分代码如下
Crim.monitorwarnning.enterpriseUniteView.QiYeFenHongDetailsWindow.superclass.constructor.call(this, Ext.applyIf(config, {
title: '企业分红信息',
iconCls: 'icon-moreinfo',
resizable: false,
width: 650,
height: 420,
autoScroll: true,
/// plain: true,
layout: "border",
closeAction: 'close',
modal: true,
defaults: {
baseCls: 'x-plain'
},
items: [{
region:"north",
//layout: "form",
margins: "5 5 5 5",
border: true,
iconCls: 'panel-search-icon',
items: [new Crim.monitorwarnning.enterpriseUniteView.QiYeFenHongFormPanel({
id:"中国软件分红"
})]
},{
region:'center',
layout: "border",
border: true,
iconCls: 'panel-search-icon',
items: [{
region:"west",
border:true,
layout:"border",
margins: "0 5 5 5",
width:"50%",
//autoHeight:true,
iconCls: 'panel-search-icon',
id:"westPanel",
items: [{
region:"center",
border:true,
//layout:"fit",
//margins: "0 5 5 5",
//width:"50%",
autoHeight:true,
iconCls: 'panel-search-icon',
//id:"westPanel",
//这个是gridpanel 我自己封装的ext类
items:new Crim.monitorwarnning.enterpriseUniteView.FenHongGridPanel({
id:"1212"
})
}]
},{
region:"center",
margins: "0 5 5 0",
border: true,
layout:"fit",
iconCls: 'panel-search-icon',
items: pieCharPanel
}]
}]
}));
this.on('close', function(win){
win.hide();
return false;
}, this);
//这是实现的核心
this.on("beforeshow",function(){
alert(Ext.getCmp("westPanel").getSize().height);
Ext.getCmp("1212").setHeight(Ext.getCmp("westPanel").getSize().height-100);
});
}
不明白的可以留言
分享到:
相关推荐
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
在探讨“Ext Grid表格的自动宽度及高度的实现”这一主题时,我们深入解析如何在Ext JS框架下,利用其强大的Grid组件自适应容器尺寸,实现表格宽度与高度的自动调整。这一技术对于构建响应式、用户友好的界面至关重要...
5. `autoHeight`和`autoWidth`分别使表单的高度和宽度自适应内容。 6. `monitorValid : true`: 启用客户端表单验证。 7. `collapsible : true`和`titleCollapse : true`允许表单面板折叠。 8. `reader`定义了一个...
如果GridPanel是自适应高度的(`g.autoHeight`),则调整内部头部(`innerHd`)的宽度与视口宽度相同。 3. **固定列宽和自动扩展**: 对于非自适应高度的情况,调整GridPanel本身以及滚动条的大小。然后,如果启用...
例如,EXT的GridPanel允许开发者创建数据驱动的表格,支持排序、分页和行编辑等功能。TreePanel则用于展示层次结构的数据,支持动态加载和拖放操作。 EXT 3.0的布局管理器也是一个关键特性,它能自动管理组件的尺寸...
- `autoHeight: true` 设置表格高度自适应。 - `store: store` 绑定数据源。 - `viewConfig.forceFit: true` 设置列宽自动调整以填充整个容器宽度。 - `bbar` 配置了底部工具栏,包含了分页控制、操作按钮等功能。 ...
4. **布局管理**:使用Ext.NET的布局模式(如Fit布局、Border布局等)组织页面元素,创建响应式和自适应的界面。 5. **Ajax通信**:利用Ext.NET的Ajax功能,实现无刷新的数据更新和页面交互。 6. **主题应用**:...
8. **GridPanel(表格面板)**:GridPanel是用于展示二维数据的组件,可以进行排序、筛选、分页操作。它支持行选择、单元格编辑,可以与服务器端进行数据交互,实现数据的增删改查。 9. **ViewPort(视口)**:在...
5. **GridPanel**:EXT的表格组件功能强大,可以实现多列排序、行编辑、分页、行选择等多种特性,常用于数据展示和操作。 6. **TreePanel**:EXT的树形视图组件可用于组织和展示层次结构的数据,支持节点的展开、...
这种灵活性使得ExtJS Grid成为一个强大且可扩展的数据展示工具,可以根据不同的数据结构自适应地调整显示方式。通过实践这个实例,开发者可以更好地掌握ExtJS在数据驱动的应用场景下的使用技巧。
- 在进行Grid的配置时,应确保相关的尺寸设置不会阻止Grid的自适应行为,如使用`autoWidth:true`和`autoHeight:true`选项来允许Grid根据内容自适应宽度和高度。 - 有时候,直接刷新Grid视图可能会导致一些性能问题,...
这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...
- **布局管理**:EXT JS的布局管理器允许组件自适应容器大小,如`fit`布局、`border`布局等,方便构建复杂的用户界面。 - **数据绑定**:EXT JS支持数据模型和视图的双向绑定,简化了数据操作和界面更新。 - **...
EXTJS的核心特性在于其丰富的组件库、灵活的数据绑定机制以及高度可定制的界面。 ### 1. 组件体系 EXTJS提供了大量的UI组件,如表格(Grid)、面板(Panel)、窗口(Window)、按钮(Button)、表单(Form)等,...
**Ext.grid.GridPanel** - **描述**: 表格组件,用于显示和编辑数据。 - **用途**: 数据列表、报表等需要展示大量数据的场景。 **Ext.grid.EditorGridPanel** - **描述**: 可编辑的表格组件,允许用户直接在表格中...
最后,确保`GridPanel`的视图配置`viewConfig`适合整个容器,例如通过设置`forceFit: true`来使列自适应宽度。 总结起来,`Ext.data.PagingMemoryProxy`是一个高效的方法,用于在前端一次性加载所有数据并进行分页...
19. **Ext.grid.EditorGridPanel** 是可编辑的GridPanel,通过在`ColumnModel`中为列添加编辑器(如`TextField`)实现数据的编辑,对于日期数据可能需要使用特定的编辑器如`DateField`。 EXTJS的灵活性和强大功能使...
1. **Ext.NET控件**:Ext.NET提供了各种各样的控件,如GridPanel(数据网格)、FormPanel(表单)、ComboBox(下拉框)、TreeView(树视图)等。这些控件能够帮助开发者快速构建用户交互丰富的界面,提升用户体验。 ...
6. **Ext.layout**: 布局管理器,如`FitLayout`(自适应布局)、`BorderLayout`(边界布局)和`ColumnLayout`(列布局),它们决定了组件如何填充容器的空间。 7. **Ext.util.Event**: EXTJS的事件系统,允许组件...