有三种方法解决此问题:
第一种是:
设置grid自适应宽度,首先要清楚grid放在什么容器中,设置该容器的layout:fit就行了。比如页面上如果只放置一个grid,一般改成用 Viewport,再在Viewport中包含grid就能解决问题了。
{
region:'center',
layout:'fit',
items:grid
}
- <div id="divID" style="width:100%"></div>
-
- var width = Ext.get("divID").getWidth();
- alert(width);// 此时宽度为div的数字宽度。如1265
- // 赋值到grid上相当于
- new Ext.grid.GridPanel({
- width: 1265....
- });
第三种是:
在GridPanel里加上 bodyStyle:'width:100%',
例子:Js代码
- <pre class="js" name="code"> var grid = new Ext.grid.GridPanel({
- //autoWidth:true,
- border:false,
- width: Ext.get('center_context_desktop').getWidth(),
- ds: new Ext.data.Store({
- reader: new Ext.data.ArrayReader({}, [
- {name: 'company'},
- {name: 'price', type: 'float'},
- {name: 'change', type: 'float'},
- {name: 'pctChange', type: 'float'},
- {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ]),
- data: Ext.grid.dummyData
- }),
- cm: new Ext.grid.ColumnModel([
- new Ext.grid.RowNumberer(),
- {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},
- {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
- {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
- {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},
- {header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
- ]),
-
- viewConfig: {
- forceFit:true
- },
- autoExpandColumn:'company'
- });
- //autoWidth:true,
- 这一行一定要隐藏,在ie7和ff下试了,是没有问题的.
- 同时还有bodyStyle:'width:100%',这个也试成功了 </pre>
-
分享到:
相关推荐
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。 通过深入理解这些功能,并结合源码分析和相关工具,开发者可以创建出高度交互、功能丰富的数据展示和操作界面,满足各种业务需求...
ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...
在EXTJS中,Grid组件是一个强大的数据展示工具,它允许用户以表格形式查看和操作大量数据。在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 ...
ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...
在实现"ExtJs Filter 表格过滤"的Demo中,开发者通常会创建一个数据网格,配置每个列的过滤器,然后通过用户界面或代码触发过滤操作。通过分析和学习这个Demo,你可以理解如何集成过滤功能到自己的应用程序中,从而...
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
首先,动态表格的核心组件是`Ext.grid.Panel`,它是ExtJS中的表格视图。这个组件提供了多种功能,包括排序、筛选、分页、编辑等。通过设置不同的配置项,我们可以调整表格的外观和行为,例如列宽、行高、表头样式、...
ExtJS 是一个强大的JavaScript库,专门用于构建...以上就是关于ExtJS Grid Filter实现表格过滤的基本介绍和应用场景。在实际开发中,根据项目需求,灵活运用各种过滤策略,可以极大地提升数据管理的便捷性和用户体验。
ExtJs中文排序函数方法详解 在ExtJs框架中,实现中文排序功能是一件非常重要的事情。今天,我们将详细介绍如何使用ExtJs实现中文排序,特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。...
通过这个实例,开发者可以掌握ExtJS和Struts2的结合使用,实现动态数据驱动的表格,这对于开发数据密集型的Web应用非常有帮助。同时,封装Grid组件也是提升开发效率的一个重要实践。记得在实际应用中,根据需求进行...
本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...
EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...
在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...
在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....
- `autoWidth`: 自动调整宽度以适应内容。 - `autoShow`: 是否自动显示组件。 - `enableHdMenu`: 是否启用表头菜单。 - `selModel`: 选择模型,如单选或多选。 - `renderer`: 自定义单元格渲染器。 - `colModel/cm`:...
在本文中,我们将深入探讨如何在ExtJS框架中实现表格单元格的合并,以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具...