sencha/extjs 动态创建grid表格

//创建普通表格 id,父容器,标题,json数据字符串,列名(逗号分隔),json数据key即store的fields属性(逗号分隔)

 

function createCommonTable(id, container, fieldLabel, value, columns,dataIndexs) {
    	if(typeof(container)!="object")
		{
			container=Ext.getCmp(container); //根据id取组件
		}
    
    var rarr = columns.split(',');
    var darr=dataIndexs.split(',');
       
    var columnsArr = new Array();
    var fieldsArr = new Array();

    for (var i = 0; i < rarr.length; i++) {
        columnsArr.push({tooltip:rarr[i] ,text: rarr[i], dataIndex: darr[i], editor: { xtype: 'textfield', allowBlank: true} });
    }
    for (var i = 0; i < darr.length; i++) {
        fieldsArr.push(darr[i]);
    }
  
    
    var fd = Ext.create('Ext.grid.Panel', {
        xtype: 'gridpanel',
        autoScroll:true,
        id: id,       
        columns: columnsArr , 
		forceFit:true
    });
    if(fieldLabel)
        {
            fd. title=fieldLabel;//标题
        }
    else
        {
            fd.header=false;
        }
	
	
	if (value) {
        value = eval(value);
    }

    var jsonData = { 'items': value };

    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore-' + id,
        fields: fieldsArr,
        /*data:jsonData,*/
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    //console.log(jsonData);
    
    var store = Ext.data.StoreManager.lookup('simpsonsStore-' + id);
    fd.reconfigure(store);
    store.loadRawData(jsonData);	
	
	container.items.add(container.items.getCount(), fd);
	container.doLayout();
	return fd;
}

 

使用:

var grid=createCommonTable('mygrid',Ext.getCmp("gridContainer"), null, [{"姓名":"aabb","年龄":21}], "姓名,年龄");

版权声明：本文为博主原创文章，未经博主允许不得转载。