ExtJs 4 动态列的实现

最新推荐文章于 2022-08-30 10:59:57 发布

saiweny

最新推荐文章于 2022-08-30 10:59:57 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/saiweny/article/details/84122812

本文介绍如何使用ExtJS3和ExtJS4实现动态表格，通过动态加载列定义和数据，实现灵活的表格展示效果。文章提供了具体的代码示例，包括创建动态表格组件、配置数据源及渲染过程。

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

ExtJs 3 的grid动态列实现：http://253405050.iteye.com/blog/970367

ExtJs 4实现方式：

1.创建DynamicGrid.js

Ext.define('Ext.grid.DynamicGrid',{
	extend : 'Ext.grid.Panel',
	
	alias : 'widget.dynamicgrid',
	
	initComponent : function() {
		var me = this;

        var store = Ext.create('Ext.data.JsonStore', {
	        fields: [],
	        pageSize: 5,
	        proxy: {
		        type: 'ajax',
		        url : 'data.js',
		        reader: {
		            type: 'json',
		            root: 'recordList',
		            totalProperty : 'recordCount'
		        }
		    }
	    });
	    
	    var headerCtCfg = {
            items: [],
            border: me.border
        };
        
        me.columns = headerCtCfg.items;
	    
	    me.headerCt = Ext.create('Ext.grid.header.Container', headerCtCfg);

		this.bindStore(store);
		this.bbar.bindStore(this.store, true);
		
        this.callParent();
	},
	
	onRender: function(ct, position) {
		this.store.on('load', function(store, records) {
			var jsonData = store.proxy.reader.jsonData;
			
			if (typeof(jsonData.columns) === 'object') {
				var columns = [];
				
				if (this.rowNumberer) {
					columns.push(new Ext.grid.RowNumberer());
				}
				
				if (this.checkboxSelModel) {
					this.selModel = new Ext.selection.CheckboxModel();
				}
				
				Ext.each(jsonData.columns, function(column) {
					columns.push(column);
				});
				
				var store = Ext.create('Ext.data.Store', {
					fields : jsonData.fields,
					data : jsonData.recordList
				});
				
				this.reconfigure(store, columns);
				this.render();
			}
		}, this);
		
		this.store.load();
		
		Ext.grid.DynamicGrid.superclass.onRender.call(this, ct, position);
	}
});

2.创建grid

var dynamicGrid = Ext.create('Ext.grid.DynamicGrid', {
        title: '测试动态列',
        renderTo: 'dynamic-grid',
        storeUrl: 'data.json',
        width : 600,
        height: 300,
        store: store,
        rowNumberer: true,
        checkboxSelModel: false,
        bodyStyle: 'padding-top: 22px',	//不知道什么原因，列头会把第一行给覆盖，所以需要加上这个样式
        bbar : new Ext.PagingToolbar({
        	store: store,
            pageSize: 5,
            displayInfo: true,
            displayMsg: '显示第{0}到{1}条数据,共{2}条',
            emptyMsg: "没有数据",
            beforePageText: "第",
            afterPageText: '页 共{0}页'
        })  
    });

返回的数据格式：

{  
    'fields': [  
        {'name': 'id', 'type': 'int'},  
        {'name': 'name', 'type': 'string'},  
        {'name': 'sex', 'type': 'boolean'}
    ],
    'success': true,  
    'recordCount': 50,  
    'recordList': [  
        {'id': '1', 'name': 'AAA', sex: 1},  
        {'id': '2', 'name': 'BBB', sex: 1},  
        {'id': '3', 'name': 'CCC', sex: 0},  
        {'id': '4', 'name': 'DDD', sex: 1},  
        {'id': '5', 'name': 'EEE', sex: 1}
    ],  
    'columns': [  
        {'header': 'ID', 'dataIndex': 'id'},  
        {'header': 'User', 'dataIndex': 'name'},  
        {'header': 'SEX', 'dataIndex': 'sex'}
    ]  
}