`
忧里修斯
  • 浏览: 436446 次
  • 性别: 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`是Extjs中用于展示大量数据的高级组件,支持排序、过滤等功能。 - **列模型与数据**:解释如何定义列模型以及如何将数据绑定到表格中。 #### 十九、行模型与Grid视图 - **行选择模型**...

    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`一个重要的特性,它能够帮助用户更有效地管理大量的数据记录,避免一次性加载过多数据导致的性能...

    ExtJS 实用教程

    5. **GridPanel**:ExtJS的GridPanel是展示大量结构化数据的理想选择。它支持分页、排序、过滤和编辑等功能,可以轻松地创建功能完备的数据表格。 6. **Form组件**:ExtJS提供了多种表单控件,如文本框、下拉框、复...

Global site tag (gtag.js) - Google Analytics