`

Extjs Grid表格的自动宽度及高度的实现(适应不同显示器的方法)

阅读更多

 

有三种方法解决此问题:

 第一种是:
     设置grid自适应宽度,首先要清楚grid放在什么容器中,设置该容器的layout:fit就行了。比如页面上如果只放置一个grid,一般改成用 Viewport,再在Viewport中包含grid就能解决问题了。
{
region:'center',
layout:'fit',
items:grid
} 
 
第二种是:
     div:   
Js代码 
  1. <div id="divID" style="width:100%"></div>    
  2.     
  3.   var width = Ext.get("divID").getWidth();     
  4.       alert(width);// 此时宽度为div的数字宽度。如1265       
  5.     // 赋值到grid上相当于    
  6.     new Ext.grid.GridPanel({    
  7.        width: 1265....    
  8.    });  


第三种是:
   在GridPanel里加上 bodyStyle:'width:100%', 
例子:Js代码
Js代码 
  1. <pre class="js" name="code">    var grid = new Ext.grid.GridPanel({    
  2.             //autoWidth:true,    
  3.             border:false,    
  4.             width: Ext.get('center_context_desktop').getWidth(),     
  5.             ds: new Ext.data.Store({    
  6.                 reader: new Ext.data.ArrayReader({}, [    
  7.                    {name: 'company'},    
  8.                   {name: 'price', type: 'float'},    
  9.                    {name: 'change', type: 'float'},    
  10.                   {name: 'pctChange', type: 'float'},    
  11.                   {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}    
  12.                ]),    
  13.                data: Ext.grid.dummyData    
  14.            }),    
  15.            cm: new Ext.grid.ColumnModel([    
  16.                new Ext.grid.RowNumberer(),    
  17.                {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},    
  18.                {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},    
  19.                {header: "Change", width: 70, sortable: true, dataIndex: 'change'},    
  20.                {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},    
  21.                {header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}    
  22.            ]),    
  23.        
  24.            viewConfig: {    
  25.                forceFit:true    
  26.            },    
  27.            autoExpandColumn:'company'    
  28.        });    
  29.    //autoWidth:true,    
  30.    这一行一定要隐藏,在ie7和ff下试了,是没有问题的.    
  31.    同时还有bodyStyle:'width:100%',这个也试成功了 </pre>  
  32.    
分享到:
评论

相关推荐

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    extjs表格Grid比较全面的功能

    Grid支持不同设备和屏幕尺寸,可以自动调整布局和列宽,适应移动设备和桌面环境。 通过深入理解这些功能,并结合源码分析和相关工具,开发者可以创建出高度交互、功能丰富的数据展示和操作界面,满足各种业务需求...

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    EXTJS4 表格GRID示例

    EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    EXTJS grid导出EXCEL文件

    在EXTJS中,Grid组件是一个强大的数据展示工具,它允许用户以表格形式查看和操作大量数据。在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 ...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    ExtJs Filter 表格过滤

    在实现"ExtJs Filter 表格过滤"的Demo中,开发者通常会创建一个数据网格,配置每个列的过滤器,然后通过用户界面或代码触发过滤操作。通过分析和学习这个Demo,你可以理解如何集成过滤功能到自己的应用程序中,从而...

    ExtJS Grid功能实现

    ExtJS 表格的功能实现,包括单元格编辑,数据的获取。

    extjs 动态表格完整版

    首先,动态表格的核心组件是`Ext.grid.Panel`,它是ExtJS中的表格视图。这个组件提供了多种功能,包括排序、筛选、分页、编辑等。通过设置不同的配置项,我们可以调整表格的外观和行为,例如列宽、行高、表头样式、...

    ExtJS Filter 实现表格过滤

    ExtJS 是一个强大的JavaScript库,专门用于构建...以上就是关于ExtJS Grid Filter实现表格过滤的基本介绍和应用场景。在实际开发中,根据项目需求,灵活运用各种过滤策略,可以极大地提升数据管理的便捷性和用户体验。

    ExtJs表格grid中文排序函数方法

    ExtJs中文排序函数方法详解 在ExtJs框架中,实现中文排序功能是一件非常重要的事情。今天,我们将详细介绍如何使用ExtJs实现中文排序,特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。...

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    通过这个实例,开发者可以掌握ExtJS和Struts2的结合使用,实现动态数据驱动的表格,这对于开发数据密集型的Web应用非常有帮助。同时,封装Grid组件也是提升开发效率的一个重要实践。记得在实际应用中,根据需求进行...

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...

    extjs grid数据导出excel文件

    在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...

    Extjs动态GRID

    在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....

    ExtJs表格点击超链接获取行的值

    - `autoWidth`: 自动调整宽度以适应内容。 - `autoShow`: 是否自动显示组件。 - `enableHdMenu`: 是否启用表头菜单。 - `selModel`: 选择模型,如单选或多选。 - `renderer`: 自定义单元格渲染器。 - `colModel/cm`:...

    Extjs表格合并代码

    在本文中,我们将深入探讨如何在ExtJS框架中实现表格单元格的合并,以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具...

Global site tag (gtag.js) - Google Analytics