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);
		}    
	});
}