EXT数据展示（Ext.grid.Panel）

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

});

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