一个ExtGrid的事例

一个ExtGrid的例子

Ext.onReady(function(){
	//测试数据
	var logData = [
		['2012-07-11/09:38:27','国网线路主防火墙','TCP','10.230.235.158','10.1.17.49','3855','8001','访问控制'],
		['2012-08-11/09:33:27','国网线路主防火墙','UDP','10.230.235.158','10.1.17.49','3855','8001','访问控制'],
		['2012-09-11/09:38:27','国网线路主防火墙','tcp','10.230.235.158','10.1.17.49','3855','8001','访问控制']		
	]
	
	var store = new Ext.data.ArrayStore({
		fields:[
			{name:'time'},
			{name:'name'},
			{name:'protocol'},
			{name:'srcIP'},
			{name:'dstIP'},
			{name:'srcPort'},
			{name:'dstPort'},
			{name:'level'}
		],
		sortInfo: {field: 'time', direction: 'DESC'}
	});
	
	store.loadData(logData);
	
	//面板
	var grid = new Ext.grid.GridPanel({
		viewConfig:{
			forceFit:true
		},
		store:store,
		autoHeight:true,
		renderTo:'showLog',
		stripeRows:true,
		columns:[
			{header:'日期', dataIndex:'time'},
			{header:'设备名称', dataIndex:'name'},
			{header:'协议', dataIndex:'protocol'},
			{header:'源IP', dataIndex:'srcIP'},
			{header:'目的IP', dataIndex:'dstIP'},
			{header:'源端口', dataIndex:'srcPort'},
			{header:'目的端口', dataIndex:'dstPort'},
			{header:'级别', dataIndex:'level'}
		]
	});
	var LogRecord = Ext.data.Record.create([ 
    		{name:'time'},
			{name:'name'},
			{name:'protocol'},
			{name:'srcIP'},
			{name:'dstIP'},
			{name:'srcPort'},
			{name:'dstPort'},
			{name:'level'} 
	]);
	
	var AddNewRecord = function(){
		var time = new Date().format('Y-m-d/H:i:s');
		var interval = parseInt(Math.random()*3000+1); //更改这个数字能够更改日志收集速度
		var newRecord = new LogRecord({
			time:time,
			name:'国网线路主防火墙',
			protocol:'TCP',
			srcIP:'10.230.235.158',
			dstIP:'10.1.17.49',
			srcPort:'3855',
			dstPort:'8001',
			level:'访问控制'
		});
		store.addSorted(newRecord);
		setTimeout(AddNewRecord,interval);
	}
	Ext.get('add').on('click',AddNewRecord);
	
})