`
忧里修斯
  • 浏览: 440480 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

封装表格显示数据GridPanel

阅读更多
/**
 * 封装GridPanel
 */
Ext.dream = {

	/**
	 * url:请求的地址 record:记录对象 tbar:顶部工具栏 columnModel:需要显示的列 pageSize:每页显示的记录数 
	 * var cfg = {};
	 * cfg['fields'] = fields; 
	 * cfg['url'] = 'server.jsp';
	 * cfg['recordName'] = "Menu"; 
	 * cfg['record'] = Menu; 
	 * cfg['tbar'] = topBar;
	 * cfg['columnModel'] = columnModel; 
	 * cfg['pageSize'] = 4; 
	 * cfg['sm'] = sm;配置列选择模式
	 */
	createGridPanel : function(cfg) {

		// 定义信息数据集对象
		var dataStore = new Ext.data.Store( {
			autoLoad : false,
			url : cfg.url,
			reader : new Ext.data.XmlReader( {
				totalRecords : "totalNum",
				record : cfg.recordName
			}, cfg.record)
		// XmlReader结束
		});// 数据集对象创建结束

		var pagingBar = new Ext.PagingToolbar( {
			store : dataStore,
			pageSize : cfg.pageSize,
			displayInfo : true,
			displayMsg : '第{0}条到第{1}条,一共{2}条',
			emptyMsg : "没有信息"
		});

		// 创建Grid表格组件
		var gridPanel = new Ext.grid.GridPanel( {

			border : false,
			width : Ext.get('box').getWidth(),
			frame : true,
			tbar : cfg.tbar,
			bbar : pagingBar,
			store : dataStore,
			stripeRows : true,
			viewConfig : {
				forceFit : true
			},
			sm : cfg.sm,// 列选择模式
			cm : cfg.columnModel
		});// 创建grid表格结束
		dataStore.load( {
			params : {
				start : 0,
				limit : cfg.pageSize
			}
		})
		return gridPanel;
	}
};
分享到:
评论

相关推荐

    如果表格内的数据是一个链接如:www.sina.com这样写法

    在ExtJS中,`GridPanel`是用于展示表格数据的重要组件,它提供了丰富的配置选项和数据操作方法。 #### 配置选项 - `colModel`: 定义列模型,包括列名、宽度、是否隐藏等。 - `store`: 数据存储,负责提供数据源。 -...

    Ext表格控件和树控件

    在Ext JS框架中,`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能,例如排序、缓存、拖动列、隐藏列、自动显示行号、列汇总以及单元格编辑等功能。`GridPanel` 类继承自 `Panel` 类,并且...

    GridToExcel.rar

    它提供了丰富的组件,如GridPanel,用于展示和操作表格数据。GridPanel不仅支持数据的动态加载和排序,还允许开发者将其数据导出到多种格式,包括Excel。 导出GridPanel数据至Excel通常涉及到以下几个步骤: 1. **...

    ExtJs4.0跨行合并(按照指定列合并)(Ext.net 2.0)

    总的来说,跨行合并是增强ExtJS 4.0 GridPanel用户体验的一个有效手段,通过自定义模板和计算逻辑,我们可以灵活地控制表格的显示效果,使数据呈现更加清晰、有条理。通过上述步骤和示例代码,你应该能够成功地在你...

    轻松搞定Extjs 带目录

    表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel的分页功能和扩展组件如摘要行、可展开行、分组视图等,让数据的展示更加直观和易于管理。 通过学习...

    轻松搞定Extjs

    - **分页**: 展示了如何实现表格数据的分页显示。 #### GridPanel扩展 GridPanel的功能可以通过多种方式进行扩展,以适应不同的业务需求。 - **学会自学吧,朋友**: 鼓励读者自主探索和学习GridPanel的相关知识。...

    ExtJs中文教程

    ### ExtJs中文教程知识点概览 #### 一、ExtJs简介 - **ExtJs**是一款基于JavaScript的开源前端框架,用于构建复杂的Web应用程序。 - 它提供了丰富的UI组件库、强大的数据... - 实现按特定字段对表格数据进行分组显示。

    基于C#开发的智能化图书管理系统

    2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。5、演示json数据封装。 6、演示前台和后台数据的...

    Extjs中文教程(初学者适合)

    - **表格、表格面板**: GridPanel是用于展示表格数据的高级组件。 - **列模型与数据**: 定义了表格中每列的属性和数据来源。 - **加强版的列模型**: 支持更复杂的列配置,如自定义渲染器等。 #### 二十、行模型与...

    C#智能化图书管理系统源码 Extjs图书管理系统源码数据库 SQL2008源码类型 WebForm

    2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。5、演示json数据封装。 6、演示前台和后台

    Extjs中文教程

    - **表格面板**:`GridPanel`是Extjs中用于展示大量数据的高级组件,支持排序、过滤等功能。 - **列模型与数据**:解释如何定义列模型以及如何将数据绑定到表格中。 #### 十九、行模型与Grid视图 - **行选择模型**...

    轻松搞定Extjs_原创

    - **表格、表格面板**:介绍GridPanel作为展示表格数据的主要工具。 - **列模型与数据**:说明如何定义列模型以及如何绑定数据到表格。 - **加强版的列模型**:探讨如何使用更复杂的列模型来增强表格的功能。 #### ...

    Extjs中文文档.pdf

    - **表格面板**:`GridPanel`是Extjs中一个功能强大的组件,用于显示大量数据。 - **列模型与数据**:了解如何配置列模型以及如何与后端数据进行交互。 - **行选择模型**:介绍不同类型的行选择模式及其配置选项。 ...

    Extjs根据条件设置表格某行背景色示例

    而Extjs在展示表格数据时,可以进行高度的定制化处理,例如根据特定条件来改变表格某一行的背景色。 要实现这样的效果,可以通过Extjs的渲染器(Renderer)功能来实现。渲染器实际上是一个函数,它根据传入的数据...

    Ext 3.0 中文API

    例如,FormPanel用于创建表单,GridPanel用于展示数据表格,Toolbar用于提供操作按钮等。 3. **数据绑定**:EXT 3.0支持双向数据绑定,允许UI组件与数据源(如Store)之间实时同步。数据可以通过Ajax请求从服务器...

    ExtJs3.1目前所有例子源代码

    - **GridPanel**:数据网格是显示大量表格数据的有效方式,支持排序、分页、行选择、编辑等功能。 - **Column Model**:定义网格列的展示和行为。 - **Editor Grid**:允许用户直接在网格中编辑数据。 4. **表单...

    EXTJS分页全面分析

    在EXTJS框架中,`GridPanel`组件是一种常用的数据展示工具,它能够以表格形式呈现数据集。而分页功能是`GridPanel`一个重要的特性,它能够帮助用户更有效地管理大量的数据记录,避免一次性加载过多数据导致的性能...

Global site tag (gtag.js) - Google Analytics