EXT数据展示(Ext.grid.Panel)

在网上看到好多关于EXT的例子,但大多数都是用的EXT代理ajax请求的方式,我这里写的是把EXT与ajax拆开的。下面为EXT代码:
var dataSource = '';
var myStore = '';
Ext.require([
	'Ext.grid.*',
	'Ext.data.*'
]);
Ext.onReady(function() {
	Ext.QuickTips.init();// 标准初始化

	// 建立一个store要使用的 model
	Ext.define('flow_analyse', {
		extend : 'Ext.data.Model',
		fields : [ {
			name : 'count_flow',
			type : 'int'
		}, {
			name : 'first_flow',
			type : 'int'
		}, {
			name : 'last_flow',
			type : 'int'
		}]
	});

	myStore = Ext.create('Ext.data.Store', {
		model : 'flow_analyse',
		reader: {
            type: 'json',
            root: dataSource
        },
		autoLoad : false
	});
	
	var grid = Ext.create('Ext.grid.Panel', {
		renderTo : 'information_date',// 渲染到一个div上
		frame : true,// 面板渲染
		forceFit : true,// 自动填充panel空白处
		autoHeight:true,
		columns : [// 列模式
		{ text:'序号', xtype: 'rownumberer', width:50, align : 'center'},
		{
			text : "总流量",
			dataIndex : 'count_flow',
			width : 100,
			align : 'center'
		}, {
			text : "上行流量",
			dataIndex : 'first_flow',
			width : 100,
			align : 'center'
		}, {
			text : "下行流量",
			dataIndex : 'last_flow',
			width : 200,
			align : 'center'
		}],
		store : myStore,
		dockedItems : [ {// 分页
			xtype : 'pagingtoolbar',
			store : myStore,
			dock : 'bottom',// 定位
			displayInfo : true
		} ]
	});
	
	/**
	 * 以下是非EXT代码,Ext.onReady(function(){})与$(function(){})具有同样的功能
	 */
	onclickMenu();
	//初始化条件区的时间
	$('#startDate').datetimebox({
		showSeconds:true
	});
	$('#endDate').datetimebox({
		showSeconds:true
	})
	
});


以下为ajax代码:

function onclickMenu(){
	
	var datas = { };
	$.ajax({        
		type:'post',        
		url:path+'/multipleAnalyseController/selectFlowAnalyse.do',     
		dataType:'json',  
		async: false,
		data: datas,
		success:function(result){
			myStore.removeAll();
			dataSource = result.multipleAnalyseList;
			myStore.add(dataSource);
		}    
	});
}


你可能感兴趣的:(ext)