ExtJs의 동적 열 구현

Ext.grid.DynamicGrid = Ext.extend(Ext.grid.GridPanel, {
	initComponent: function() {
		// store
		var ds = new Ext.data.Store({
			url: this.storeUrl,
			reader: new Ext.data.JsonReader()
		});
		
		// 
		var config = {
			viewConfig: {
				forceFit: true
			},
			enableColLock: false,
			loadMask: true,
			border: true,
			stripeRows: true,
			ds: ds,
			columns: []
		};
		
		// PagingToolbar store
		this.bbar.bindStore(ds, true);
		
		Ext.apply(this, config);
		Ext.apply(this.initialConfig, config);
		Ext.grid.DynamicGrid.superclass.initComponent.apply(this, arguments);
	},
	
	onRender: function(ct, position) {
		this.colModel.defaultSortable = true;
		Ext.grid.DynamicGrid.superclass.onRender.call(this, ct, position);

		this.el.mask('Loading...');
		this.store.on('load', function() {
			if (typeof(this.store.reader.jsonData.columns) === 'object') {
				var columns = [];
				
				if (this.rowNumberer) {
					columns.push(new Ext.grid.RowNumberer());
				}
				
				if (this.checkboxSelModel) {
					columns.push(new Ext.grid.CheckboxSelectionModel());
				}
				
				Ext.each(this.store.reader.jsonData.columns, 
					function(column) {
						columns.push(column);
					}
				);
					
				this.getColumnModel().setConfig(columns);
			}
				
			this.el.unmask();
		}, this);
		
		this.store.load();
	}
});

var dynamicGrid = new Ext.grid.DynamicGrid({
		title: ' ',
		renderTo: 'dynamic-grid',
		storeUrl: 'goods/dynamicGrid.do',
		width : 600,
		height: 200,
		rowNumberer: true,
		checkboxSelModel: true,
		sm: new Ext.grid.CheckboxSelectionModel(),
		bbar : new Ext.PagingToolbar({
			pageSize : 5,
			displayInfo : true,
			displayMsg : ' {0} {1} , {2} ',
			emptyMsg : " ",
			beforePageText : " ",
			afterPageText : '   {0} '
		})
	});

{
	'metaData': {
		'totalProperty': 'total',
		'root': 'records',
		'id': 'id',
		'fields': [
			{'name': 'id', 'type': 'int'},
			{'name': 'name', 'type': 'string'}
		]
	},
	'success': true,
	'total': 50,
	'records': [
		{'id': '1', 'name': 'AAA'},
		{'id': '2', 'name': 'BBB'}
	],
	'columns': [
		{'header': '#', 'dataIndex': 'id'},
		{'header': 'User', 'dataIndex': 'name'}
	]
}