extjs动态创建grid

最新推荐文章于 2016-06-23 17:16:00 发布

IT382566697

最新推荐文章于 2016-06-23 17:16:00 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

分类专栏： EXTJS 文章标签： extjs 动态grid

本文链接：https://blog.youkuaiyun.com/IT382566697/article/details/84510764

EXTJS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何将流程中的grid字段转换为grid表单进行显示，包括参数设置、数据处理、配置列模型和网格面板渲染等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 将流程中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'
	});
}