首先,API上很明确讲了:
Ext.grid.GridPanel 写道
Notes:
1.Although this class inherits many configuration options from base classes, some of them (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will have no effect.
---autowidth和autoheight是没用的
2.A grid requires a width in which to scroll its columns, and a height in which to scroll its rows. These dimensions can either be set explicitly through the height and width configuration options or implicitly set by using the grid as a child item of a Container which will have a layout manager provide the sizing of its child items (for example the Container of the Grid may specify layout:'fit').
我现在的做法:
1.在3.0RC2
中,如果一行有多个GRID,则使用Ext.layout.HBoxLayout,如下图和代码
相关代码:
var p = new Ext.Panel({
title:'::业务成功率(近4个统计周期)::',
region:'center',
//新的布局方式
layout:{
type:'hbox',
align : 'stretch',
pack : 'start'
},
defaults:{
//子元素平均分配宽度
flex:1
},
split:true,
frame:true,
//前面定义的一个Grid数组
items:this.businessGridArr,
tbar:toolbar
});
PS:如果几个Grid需要不同的宽度,则分布给他们设置flex,看源码即知,会把全部的flex总和后求百分比.
2.ExtJS3.0及以前版本
1)利用其他布局管理器,如把grid放到一个fit布局的panel中
2)设置一个高度,然后自己去维护它
如监听grid所在的panel的afterlayout事件,然后获取grid的ownct的高度,从而设置,但是要计算到工具条等占用的宽度。如下代码:
//控制缩放的时候修改grid的高度
this.on('afterlayout',function(view,layout){
var height = this.gridPanel.getSize().height - 30;
for(var i=0;i<this.gridArr.length;i++){
this.gridArr[i].grid.setHeight(height); //.doLayout()
}
},this);
PS:至于在border布局里面,有north,south,center三个panel, 中间的放置一个grid,
高度不会自适应,是因为border是先计算north和south,然后剩下的空间给center.
依稀记得在extjs论坛有人说过,这种情况下center里面的grid不能自适应宽度,是一个很难修复的bug.
涉及到浏览器问题。
- 大小: 137.5 KB
分享到:
相关推荐
ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...
### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...
2. **行编辑**:为了实现增删改查的功能,我们可以集成ExtJS的行编辑插件(`Ext.grid.plugin.RowEditing`)。这允许用户直接在Grid的行内进行编辑,通过点击单元格激活编辑模式,完成后点击保存按钮提交更改。 3. *...
总结起来,解决EXTJS Grid中文排序问题主要涉及到自定义排序函数和利用localeCompare方法。通过这种方式,我们可以确保EXTJS Grid在处理中文数据时能正确排序,提供更好的用户体验。在实际开发中,可能还需要考虑...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJS基础教程..................
var grid = Ext.create('Ext.grid.Panel', { // ... selType: 'rowmodel', store: myStore, columns: [/* ... */], listeners: { select: function seleccionarRow(model, records, eOpts) { if (records....
在使用ExtJS框架开发时,开发者常常会遇到一个问题,即在浏览器窗口大小改变后,ExtJS Grid组件无法自动调整...通过上述方法,可以有效解决ExtJS Grid组件在窗口大小变化时无法自适应的问题,提升Web应用的用户体验。
ExtJS实用简明教程.rar..............
ExtJS入门教程(超级详细).pdf
- 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...
1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...
在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...
【标题】:“EXTJS 学习资料大全” 【描述】:这部分内容...而对于这些DLL和manifest文件,如果遇到程序运行错误,可能需要检查系统是否缺少这些组件,或者尝试安装相应的VC++ Redistributable Package来解决问题。
Extjs4.0学习指南(中文).rar
在ExtJs中,"Filter"功能是用来处理数据网格(Grid)中的数据过滤,它允许用户根据特定条件快速筛选和查找所需信息。表格过滤是提高用户体验和数据管理效率的重要工具,尤其在处理大量数据时。 在"ExtJs Filter ...
至于"extjs"标签,这表明整个话题是关于EXTJS框架的,EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用程序。它提供了丰富的组件库,包括表格、窗口、面板、菜单等,而`Ext.ux.form.LovCombo`就是EXTJS生态...
- `Ext.grid.Panel`:这是Grid组件的基础类,它包含了一个可配置的列模型(column model)、数据源(store)以及视图配置。 - `store`:存储Grid的数据,可以是内存中的数组,也可以是远程数据源,如JSON或XML。 ...
var cmFatList = new Ext.grid.ColumnModel([ sm, // CheckboxSelectionModel { header: "ID", dataIndex: 'uid' }, { header: "Username", dataIndex: 'userName' }, { header: "Email", dataIndex: '...
ExtJS Grid是一款强大的JavaScript组件,用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发,是Ext JS库的核心部分,广泛应用于企业级应用的前端开发,提供丰富的功能和高度的可定制性。这个"ExtJS_grid...