`

ExtJS GridPanel根据窗口大小自动变化插件

EXTCSSJavaScriptHTML 
阅读更多

 

Ext.ns("Ext.grid.plugins");

Ext.grid.plugins.AutoResize = Ext.extend(Ext.util.Observable,{
	init:function(grid){
		grid.applyToMarkup = function(el){
			grid.render(el);
		}
		var containerId = Ext.get(grid.renderTo || grid.applyTo).id;
		if(Ext.isIE){
			Ext.get(containerId).on("resize",function(){
				grid.setWidth.defer(100,grid,[Ext.get(containerId).getWidth()]);
			});
		}else{
			window.onresize = function(){
				grid.setWidth(Ext.get(containerId).getWidth());
			}
		}
	}
});

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>autoresize</title>
	<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/xtheme-gray.css" />
 	<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all-debug.js"></script>
	<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/src/locale/ext-lang-zh_CN.js"></script>

	<link rel="stylesheet" type="text/css" href="ext-patch.css" />
    <script type="text/javascript" src="AutoResize.js"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			var data = new Array();
			for(var i=1;i<=100;i++){
				data.push({id:i,name:"name"+i,sex:i%2 == 0?"man":"woman",age:i});
			}
			var grid = new Ext.grid.GridPanel({
				height:600,
				plugins:new Ext.grid.plugins.AutoResize(),
				frame:true,
				title:"Grid",
				//renderTo:"gridPanel",
				applyTo:"gridPanel",
				viewConfig:{
					forceFit:true
				},
				columns:[
					{dataIndex:"id",header:"id",sortable:true},
					{dataIndex:"name",header:"name",sortable:true},
					{dataIndex:"sex",header:"sex",sortable:true},
					{dataIndex:"age",header:"age",sortable:true}
				],
				store:new Ext.data.JsonStore({
					autoLoad:true,
					data:data,
					fields:["id","name","sex","age"]
				})
			});
		});    
    </script>
</head>
<body style="margin:0px;padding:0px;">
	<div id="gridPanel" style="width: 100%;"></div>
</body>
</html>
分享到：
| Hibernate多属性设值解决方案
评论
2 楼 gepangtsai 2011-12-06  
再判断下：
if (grid) {
				grid.setWidth(adjWidth - 20);
				grid.setHeight(adjHeight - 90);
			}
1 楼 gepangtsai 2011-12-06   
Ext.ns("Ext.grid.plugins");
Ext.grid.plugins.AutoResize = Ext.extend(Ext.util.Observable, {
	init : function(grid) {
		var id = grid.getId();
		grid.applyToMarkup = function(el) {
			grid.render(el);
		};
		// || Ext.get(grid.renderTo || grid.applyTo).id;
		var containerId = 'center';
		obj = Ext.getCmp(containerId);
		PMS.ctrl.autosize = obj;
		
		var width = obj.getWidth();
		var height = obj.getHeight();
		grid.setWidth(width - 20);
		grid.setHeight(height - 90);

		obj.on("resize", function(panel, adjWidth, adjHeight, rawWidth,
				rawHeight) {
			//通过ID获取对象本身，如果是对象传递当对象关闭后就会出现著名的：this.dom is undefined
			var grid = Ext.getCmp(id);
			grid.setWidth(adjWidth - 20);
			grid.setHeight(adjHeight - 90);
		});
	}
});
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS介绍以及GridPanel

    此外，社区也提供了大量的插件和扩展，进一步增强了ExtJS的功能和适用性。 总之，ExtJS是一个功能强大的JavaScript框架，特别适合于构建复杂的、具有桌面应用级别的Web应用。GridPanel作为其代表性组件，能够灵活地...

    extjs2.0.2及eclipse插件spket

    例如，可以通过ExtJS的GridPanel展示数据，使用FormPanel处理用户输入，结合Store和Proxy进行数据的加载和保存。此外，还可以利用布局管理器实现灵活的界面布局，以及利用ExtJS的事件系统实现组件间的通信。 总的来...

    ext.net 动态创建gridpanel

    GridPanel 是 ExtJS（Ext.NET 的基础）中的一个重要组件，用于展示数据表格。在这个场景中，我们将深入探讨如何使用Ext.NET代码动态创建GridPanel，并在各种窗口中灵活展示。 1. **动态创建GridPanel**： 在Ext...

    extjs3.0框架

    3. **布局管理**：ExtJS的布局管理器能够自动调整组件的大小和位置，适应不同的屏幕尺寸和容器变化。常见的布局类型有Fit布局、Border布局、Table布局、Form布局等，满足不同场景下的布局需求。 4. **表单组件**：...

    ExtJS--Windows.rar_extjs_extjs CSharp_extjs windows

    6. **拖放功能**：通过ExtJS的`DragDrop`插件，可以实现Web应用内的拖放操作，如同Windows文件管理器中的文件拖放。 7. **数据绑定**：ExtJS的数据模型和Store组件可以与C#后端的数据接口无缝对接，实现数据的实时...

    [上传下载]ExtJS 2.2 开源网络硬盘系统_dogdisk.zip

    - 动态布局：支持多种布局模式，如fit、border、form等，能够根据窗口大小自动调整组件的尺寸和位置。 - 主题定制：提供多种预设主题，并支持自定义CSS样式，以满足不同设计需求。 - 跨浏览器兼容：ExtJS 2.2兼容...

    Extjs的学习资料

    在开发ExtJS应用时，可能会使用到如Eclipse、NetBeans等IDE的特定插件，这些工具能提供代码提示、自动完成和调试功能，提高开发效率。 5. **ExtJS中的jQuery**： 虽然ExtJS有自己的DOM操作和事件处理机制，但与...

    extjs.rar

    EXTJS 的核心理念是组件化，它包含了一系列预定义的UI组件，如表格、面板、窗口、菜单等，这些组件可以自由组合，构建出各种复杂的用户界面。EXTJS 还提供了数据绑定机制，使得数据与视图之间的交互变得简单高效。 ...

    ExtJs+Aspose.Cells+Asp.net导入Excel实例

    在前端，ExtJs GridPanel可以配置分页插件，根据用户设定的每页记录数动态加载数据。后端则需要提供支持分页的接口，根据当前页码和每页记录数从数据库中查询相应的学生成绩数据。 综上所述，本示例展示了如何利用...

    ExtJS使用笔记

    GridPanel支持基础的数据显示，还可以通过各种插件扩展功能，如排序、过滤等。EditorGridPanel增加了单元格的编辑功能，可以实现对数据的CRUD（创建、读取、更新、删除）操作。Ext.grid.EditorGridPanel还支持手工...

    ExtJS基础教程.pdf

    2. **面板类**：如面板(Panel)、标签面板(TabPanel)、提示框(Tip)、窗口(Window)、字段集(FieldSet)、表单面板(FormPanel)、网格面板(GridPanel)和树形面板(TreePanel)，构成应用的基本界面结构。 3. **窗口**：...

    轻松搞定ExtJS

    - **表格、表格面板**：解释了GridPanel组件的基本概念及其在Extjs中的重要地位。 - **列模型与数据**：介绍了如何配置GridPanel的列模型以及如何加载数据。 #### 第二十章：行模型与Grid视图 - **行选择模型**：...

    Extjs中文教程

    - GridPanel是Extjs中用于显示表格数据的组件。 - 支持分页、排序、过滤等多种功能。 - **列模型与数据** - 列模型定义了表格的列结构，包括列名、宽度、对齐方式等。 - 数据通常通过Store加载到表格中。 - **...

    extjs3.0 API

    - **布局管理**：通过布局管理器，如`BorderLayout`、`FormLayout`和`TableLayout`，组件可以根据需要自动调整大小和位置。 - **数据绑定**：ExtJS 3.0支持数据绑定，允许组件与数据源之间进行实时同步，简化了...

    [上传下载]ExtJS 2.2 开源网络硬盘系统_dogdisk.rar

    1. **ExtJS框架**：ExtJS是一个强大的前端开发框架，它提供了丰富的组件库，如表格、树形结构、表单、窗口等，以及一套完整的MVC（模型-视图-控制器）架构，帮助开发者快速构建具有桌面级用户体验的Web应用。...

    商业源码-编程源码-ResviewCRM的ExtJS页面程序.zip

    ExtJS是一个流行的JavaScript库，用于构建富客户端的桌面级Web应用，它提供了丰富的组件库，包括表格、窗口、面板等，使得开发者能够构建出具有高度交互性和美观界面的应用。 在ResviewCRM的源码中，我们可以看到...

    用钱买的ext电子书.rar

    例如，如何使用EXTJS的布局管理器（Layout Manager）来控制组件的大小和位置，或者如何利用事件监听（Event Handling）来响应用户的交互。 至于EXTJS的PDF电子书，通常会涵盖从基础到高级的EXTJS开发主题，包括但不...

    ext2.0 详解和API

    4. **强大的布局管理**：EXT2.0提供了多种布局方式，如Fit布局、Border布局、Form布局等，可以根据需要灵活调整组件的排列和大小。 5. **可扩展性**：EXT2.0具有良好的可扩展性，允许开发者自定义组件和插件，满足...

    RDF 使用帮助

    - **createDocument(strData, isUrl)**：根据提供的字符串或 URL 创建 XML 文档。 - **GETNODE(OBJXML, NODEPATH, INDEX)**：从 XML 对象中获取节点。 - **GETNODEVALUE(OBJXML, NODEPATH, INDEX)**：从 XML 对象中...

Magicbox
Global site tag (gtag.js) - Google Analytics