`
xiaochengfu1
  • 浏览: 35519 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

grid动态生成列

 
阅读更多
xxx= Ext.extend(Ext.grid.GridPanel, {
	id : 'xxx',
	stripeRows : true,
	region : 'center',
	exportJsonStr: null,
	loadMask : {
		msg : 'Please Wait...'
	},
	sm : new Ext.grid.RowSelectionModel(),
	autoScroll : true,
	initComponent : function() {
		this.store = new Ext.data.Store({
			proxy : new Ext.data.HttpProxy({
				url : 'xxxx?11111=11111'
			}),
			reader : new Ext.data.JsonReader({
				totalProperty : 'totalProperty',
				root : 'msg'
				}, []
			),
			listeners : {
				'beforeload' : function(msgDetailStore) {
					Ext.apply(msgDetailStore.baseParams, {
						msg : Ext.getCmp('xxxDetailWindow').msg
					});
				},
				load : function(store, records, options) {
					// 空数据提示
					if (Ext.isEmpty(records)) {
						Ext.QuickMsg.show('提示', '没有查询到相关数据',
										'250px', 2, Ext.getBody(), [10, 200],
										't-t', true, true);
					} else {
						/**
						 * 判定单元格,设置单元格告警样式
						 */
						var gridPanel = Ext.getCmp('xxx');
						AddCellCls(gridPanel, records);
					}
				},
				metachange : function(store, meta) {
					/**
					 * 根据meta动态生成列
					 */
					var fields = meta.fields;
					var config = [];
					for (var i = 0; i < fields.length; i++) {
						var field = fields[i];
						var name = field.name;

						// 判断某些列需要添加隐藏属性, hidden:true
						if (name == 'xx' || name == 'xx') {
							config.push({
								header : name,
								hidden: true,
								dataIndex : name,
								align : 'center',
								width : 80
							});
						}else{

config.push({
								header : name,
								dataIndex : name,
								align : 'center',
								width : 120
							});
						}

						// 刷新列
						var gridPanel = Ext.getCmp('xxx');
						gridPanel.getColumnModel().setConfig(config);
					}
				}
			}
		});
		// 根据meta动态生成列,参见store的metachange函数
		this.cm = new Ext.grid.ColumnModel({
			defaults : {
				sortable : true
			},
			columns : []
		});
				
		this.bbar = new Ext.PagingToolbar({
			pageSize : 1000,
			store : this.store,
			firstText : '第一页',
			nextText : '下一页',
			prevText : '上一页',
			refreshText : '刷新',
			lastText : '最后一页',
			displayInfo : true,
			displayMsg : '显示第 {0} - {1}条记录 共{2}条记录',
			emptyMsg : '没有数据', // 下面为分页插件代码
//					plugins : new Ext.ux.ProgressBarPager(),
			listeners : {
				beforechange : function(toolBar, params) {
					// 数据加载遮罩
					var myMask = new Ext.LoadMask(
						Ext.get('xxx'),
						{
							msg : "Please wait...",
							store : this.store
						}
					);
myMask.show();
				}
			}
		});
		xxx.superclass.initComponent.call(this);
	}
});

Ext.reg('xxx', xxx);
分享到:
评论

相关推荐

    grid动态生成列参考!

    在IT领域,特别是Web开发中,动态生成列是构建灵活且响应式用户界面的关键技术之一。本文将深入探讨如何在ExtJS框架下实现GridPanel的动态列生成,这对于那些需要根据用户操作或数据源变化实时调整列布局的应用场景...

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    ExtJs动态grid的生成

    - 你可以使用`columns`属性来动态生成列。例如,你可以根据服务器返回的数据结构动态创建column模型。这样,当数据字段改变时,Grid的列也会相应地更新。 3. **动态加载数据** - 使用Ext.data.Store与Ext.data....

    wpf的grid自动生成列-删除列(外层grid的一行里生成一个grid)

    在一个外层grid列里生成一个grid布局的内容。比如,某班某人的各科成绩。外层是某人的信息,在这个一行里,有他的语数外三科(一个几行几列的grid)的成绩。 不是为了利益大众,是为了自己,也当做自己曾经写的一个...

    动态设置显示kendoui grid控件某一列的格式

    本篇文章将深入探讨如何动态地设置Kendo UI Grid中某一列的显示格式,特别是涉及到日期选择器(DatePicker)的自定义过滤功能。 首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤...

    动态生成Grid View

    本知识点主要探讨如何动态生成`GridView`以及将其内容导出为PDF,这对于数据报告、打印或者在线分享具有重要意义。 动态生成`GridView`意味着在运行时根据需要创建和填充表格。这种做法的优点在于可以根据用户输入...

    ng-grid实现动态列表.rar

    本资源"ng-grid实现动态列表.rar"包含ng-Grid动态列的实现,以及所需的库文件和示例效果。 动态列表是Web应用中常见的需求,特别是在数据管理界面,用户可能希望根据不同的场景显示不同的列。ng-Grid允许我们在运行...

    extjs动态生成表格,前台+后台

    在这里,它会创建一个新的Store对象,用于存储从服务器获取的数据,以及新的ColumnModel对象,包含所有动态生成的列。最后,利用这些信息实例化一个新的GridPanel,并将其附加到之前定义的`grid_div`元素上。 后端...

    WPF动态生成列(C#)Demo

    在本文中,我们将深入探讨如何在...总之,动态生成列是WPF中提高用户体验和灵活性的重要技巧,尤其适用于数据模型不确定或变化频繁的情况。通过学习和实践这个Demo,你将能够更好地掌握WPF中DataGrid的动态列生成技术。

    Ext 根据数据库返回json动态生成grid列表实例

    在某些情况下,你可能希望根据数据库返回的数据动态生成列。这可以通过在接收到JSON响应后动态修改`columns`数组实现。例如,你可以遍历JSON数据的字段并添加对应的列。 ```javascript store.load({ callback: ...

    ASP.NET结合EXTJS动态生成Grid列表的例子程序源码

    这个例子程序源码主要展示了如何将两者结合,动态生成Grid列表。 在ASP.NET中,开发者通常使用C#或VB.NET作为后端编程语言,通过ASP.NET MVC或Web Forms模式来处理HTTP请求并返回HTML响应。EXTJS则负责在客户端渲染...

    FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc

    例如,`gridColumns1`和`gridColumns2`分别对应不同的列配置,可以根据实际情况决定哪个数组用于生成`DataGrid`的列。 此外,对于特定类型的数据(如日期),我们可能希望以特定的格式展示,而不是使用默认的日期...

    ext动态列

    EXT动态列是一种在EXT JS框架下实现表格列动态生成的技术,它允许我们在运行时根据需求创建或修改表格列。EXT JS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,其组件化的设计使得创建复杂的用户界面变...

    EXT 通用动态Grid封装js

    对ext Grid进行了封装,动态加载数据源,动态生成列

    dev Grid动态拼合并表头

    `dev Grid动态拼合并表头`是一种技术,它允许开发者在运行时根据需要动态地创建和组合表格的列标题,以适应各种复杂的数据结构。这种功能在大数据可视化、企业级应用或者数据分析工具中尤其常见,因为它能够帮助用户...

    js树形多列框控件动态生成类似qq类列表框

    总之,创建一个js树形多列框控件动态生成类似qq类列表框,需要结合JavaScript的数据处理能力、DOM操作、CSS布局与样式设计以及可能的图像处理技术。通过巧妙的编程和设计,可以实现一个既美观又实用的前端组件,提供...

    grid_lua动态列表_

    "grid_lua动态列表_"这个标题暗示了我们正在讨论如何使用Lua来创建一个可以动态加载和显示数据的网格列表。这种列表通常用于数据密集型的应用,比如表格或者报表的呈现。 描述中提到,lua动态列是从txt文件中读取...

    ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox

    在使用ExtJS4开发一个grid的时候,经常会遇到需要对grid的列进行动态的显示和隐藏操作,以适应不同的显示需求。ExtJS4中的gridpanel组件提供了一些内置的方法来控制列的可见性,但有时候需要一个更直观的方式来实现...

    动态生成表格

    7. 工具:除了原生JavaScript外,还可以利用专门的表格库如Handsontable, Tabulator, ag-Grid等,它们提供了丰富的功能和自定义选项,简化了动态表格的开发工作。 总之,动态生成表格是一个综合性的任务,涉及到...

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

    6. **动态列生成**:根据后台返回的列信息动态创建和配置Grid的列,这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**:考虑使用分页(Paging)和延迟加载(Lazy Loading)来优化大数据量的加载,提高用户...

Global site tag (gtag.js) - Google Analytics