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

最新推荐文章于 2025-05-31 11:34:28 发布

原创最新推荐文章于 2025-05-31 11:34:28 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

EXT 专栏收录该内容

3 篇文章

订阅专栏

本文展示了一个将EXT与Ajax请求分离的示例，通过定义数据模型和存储，实现了一个带有分页功能的数据表格，并使用Ajax加载数据填充表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网上看到好多关于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);
		}    
	});
}