`

extjs动态创建grid

阅读更多
/**
 * 将流程中grid的字段专成grid表单显示
 * author :zyj
 * @param {} v 值 format: key1:val1,key2:val2...;,key11:val11,key22:val22...;...
 * @param {} elId 需要渲染的结点ID
 */
function vToGrid(v,elId) {
	var cmItems = [new Ext.grid.RowNumberer()];  
	var record=v.split(";")
	var headerTmp= record[0].split(",");
	var fields=[];
	for(var i=0;i<headerTmp.length;i++){
		var htmp=headerTmp[i].split(":");
		if((htmp[0].indexOf('ID')==-1)&&(htmp[0].indexOf('主键')==-1)){
			cmConfig = {  
                header: headerTmp[i].split(":")[0],  
                tooltip:headerTmp[i].split(":")[0],
                dataIndex: 'indexTmp'+i,  
                sortable: true ,
                renderer:function(value){
				    return '<div align="center">'+value+'</div>';
				} 
            };  
            fields.push('indexTmp'+i)
            cmItems.push(cmConfig);  
		}
		 	
	}
	var cm = new Ext.grid.ColumnModel(cmItems);
	var sqldata = new Array();
	for (var t = 0; t < record.length; t++) {
		if(!(record[t]==null||record[t]==''||record[t].length==0)){
			var recordTmp= record[t].split(",");
			var oneData = new Array();
			for(var tt=0;tt<recordTmp.length;tt++){
				if(recordTmp[tt].indexOf(":")!=-1){
					var ttmp=recordTmp[tt].split(":");
					if((ttmp[0].indexOf("ID")==-1)
							&&(ttmp[0].indexOf("主键")==-1)){
						if(ttmp.length=2){
							oneData.push(ttmp[1]);
						}else{
							oneData.push(" ");
						}
					}
				}
			
			}
			sqldata.push(oneData);
		}
		
	}
	var store = new Ext.data.SimpleStore({
		fields:fields
	});

	store.loadData(sqldata);
	var gd = new Ext.grid.GridPanel({
		renderTo : elId,
		cm : cm,
		width : '98%',
		store : store,
		region:'center',
		trackMouseOver : true,
		disableSelection : false,
		loadMask : true,
		autoHeight : true,
		viewConfig : {
//			autoFill : true, //自动填充
			forceFit : true,
			scrollOffset: 0 //不加这个的话,会在grid的最右边有个空白,留作滚动条的位置
			//showPreview : false
		},
		stripeRows: true,//斑马线
        bodyStyle : 'width:100%;',   
		align : 'center'
	});
}
分享到:
评论

相关推荐

    ExtJs动态grid的生成

    我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...

    Extjs动态GRID

    EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...

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

    4. **定义EXTJS Grid面板**:创建一个EXTJS的Grid面板,包含上面配置的ColumnModel和Store。Grid面板还可以定义其他属性,如分页、排序和过滤功能。 5. **渲染Grid**:在页面加载完成后,使用EXTJS的`Ext.onReady`...

    ExtJS grid过滤操作

    本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对本地store进行筛选。 1. **Grid过滤基础** - **Filter Model**:ExtJS Grid中的过滤功能基于Filter Model。每个列都可以有自己的过滤器,用户可以根据需要...

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

    在这个"extjs动态表格实例"中,我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先,让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件,它用于展示结构化数据,并支持多种操作,如排序...

    Extjs Grid2Grid拖拽

    8. **源代码分析**:app.js文件很可能是实现这个功能的主脚本,它包含了创建Grid、设置DragDrop对象、监听事件和处理数据的代码。通过阅读和理解这个文件,你可以学习到如何在实际项目中实现Grid2Grid拖拽。 最后,...

    ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能

    在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...

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

    6. 动态生成:通过JavaScript代码动态创建ColumnModel和Store,从而实现表格的动态生成。 通过理解和掌握这些知识点,开发者可以构建出高度灵活、响应式的前端表格应用,同时充分利用后端数据源提供动态内容。

    ExtJS笔记---Grid实现后台分页

    它提供了丰富的组件库,包括数据网格(Grid)等,使得开发者能够创建交互性极强的数据展示和管理界面。这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一...

    ExtJs6.5Grid列表导出(包含样式)

    总结,ExtJs 6.5 Grid列表导出涉及到的主要知识点有:Grid组件的结构与操作,数据存储与获取,CSS规则的解析与应用,HTML表格的动态构建,以及文件的本地保存。通过熟练掌握这些知识点,开发者可以构建出高效且具有...

    extjs grid

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

    ExtJS5学习之Grid与Grid之间的数据拖拽

    它提供了一套完整的组件模型,包括数据网格(Grid)等,使得开发者能够创建功能强大的用户界面。本篇我们将聚焦于ExtJS 5中的一个特定特性:Grid与Grid之间数据的拖放操作。在"ExtJS5学习之Grid与Grid之间的数据拖拽...

    ExtJS_grid.rar_Grid javascript_extjs grid

    ExtJS Grid是一款强大的JavaScript组件,用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发,是Ext JS库的核心部分,广泛应用于企业级应用的前端开发,提供丰富的功能和高度的可定制性。这个"ExtJS_grid...

    Extjs4前台前台grid导出excel

    首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页等功能,并且可以自定义列样式和行为。在ExtJS4中,我们可能有以下场景:用户在Grid...

    Extjs Grid 中的 ToolTip效果

    在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。在实际应用中,为了提供更好的用户体验,我们经常需要在鼠标悬停在某个单元格或列头时显示额外的信息,这就是ToolTip的效果。EXTJS ...

    实现extjs4 的树、grid、form、query等大部分组件的功能

    EXTJS4的树组件支持动态加载、拖放操作、节点的增删改查等功能。通过配置store、model和节点渲染器,我们可以定制树的显示效果和交互行为。 接着,网格(Grid)组件是EXTJS的核心组件之一,用于展示大量数据并支持...

    extjs动态表头,绝对的好东西啊

    这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...

    ExtJS中的Grid Title部分利用XML定义随意变化

    // 创建Grid var grid = new Ext.grid.GridPanel({ store: dataStore, // 数据源 columns: gridColumns, // 其他Grid配置... }); ``` 通过这种方式,我们可以将Grid的定义和应用逻辑分离,使代码更易于维护。...

    extjs 实现动态表头

    动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...

    ExtJs 实现动态加载grid完整示例

    在讨论ExtJs实现动态加载grid的完整示例之前,我们需要了解ExtJs框架中一些基础组件的作用。ExtJs是一个基于JavaScript的框架,广泛用于构建丰富互联网应用(RIA)。ExtJs提供了大量预构建的组件,这些组件可以通过...

Global site tag (gtag.js) - Google Analytics