Extjs6 gridPanel排序与获取Store的排序信息

ExtJS6中表格排序也与ExtJS3中有所区别,下面分别给出这两个版本的实现方法

ExtJS3:

// 复选框模型
var selm = new Ext.grid.CheckboxSelectionModel();

// 定义列模型
var colm = new Ext.grid.ColumnModel([
	selm, // 复选框模型
	{
		header : 'id',// 这一列是隐藏的,主要用于标记这条记录
		dateIndex : 'id',
		hidden : true
	}, {
		header : '标题',
		dataIndex : 'title',
		width : 40
	}, {
		header : '新闻内容',
		dataIndex : 'content',
		hidden : true
	}, {
		header : '新闻类型',
		dataIndex : 'infoType',
		width : 40
	}, {
		header : '发布时间',
		dataIndex : 'publicTime',
		width : 40,
		type : 'date',
		renderer : Ext.util.Format.dateRenderer('Y年m月d日')
	}, {
		header : '是否有图片新闻',
		dataIndex : 'haveImg',
		width : 20
	}, {
		header : '详细',
		dataIndex : 'detail',
		width : 20,
		renderer : manageInfo.rendererDetail // 指定渲染器
	}, {
		header : '修改',
		dataIndex : 'update',
		width : 20,
		renderer : manageInfo.rendererUpdate // 指定渲染器
	}, {
		header : '删除',
		dataIndex : 'delete',
		width : 20,
		renderer : manageInfo.rendererDelete // 指定渲染器
	}, {
		header : 'typeId',
		dataIndex : 'typeId',
		hidden : true
	}]);

// 读取数据
var store = new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({
		url : '../../../jsp/infoAction.do?method=loadInfo'
	}),
	reader : new Ext.data.JsonReader({
		totalProperty : 'totalProperty',// 总记录数
		root : 'root'// 后台返回来的内容
	}, [{
		name : 'id'
	}, {
		name : 'title'
	}, {
		name : 'content'
	}, {
		name : 'infoType'
	}, {
		name : 'publicTime',
		type : 'date',
		dateFormat : 'Y-m-d'
	}, {
		name : 'haveImg'
	}, {
		name : 'typeId'
	}]),
	sortInfo : {
		field : 'publicTime',
		direction : "DESC"
	}
});

var grid = new Ext.grid.GridPanel({
	id : 'grid',
	store : store,
	colModel : colm,
	selModel : selm,
	viewConfig : {
		forceFit : true
	},
	bbar : new Ext.PagingToolbar({
		pageSize : 15,
		store : store,
		displayInfo : true,
		displayMsg : '显示第{0}条到第{1}条,总共{2}条',
		emptyMsg : '没有内容'
	})
});

ExtJS6:




获取Store中的排序信息两个版本方法也不一样。

ExtJS3:

store.sortInfo.field

ExtJS6:

var sorters = store.getSorters(); // 获取排序方式
            
var a = null;
var property = "";
var direction = "";

//遍历:方法一
//sorters.each(function(sorter) {
//	alert(sorter.getProperty() + ' ' + sorter.getDirection());
//});
            
for(var i = 0; i < sorters.length; i++) {
	a = sorters.getAt(i); // 读到排序方式 like  {property: "field", direction: "ASC"}
	if(a != null) {
		property += a.getProperty();
		if(i != sorters.length - 1) {
			property += ",";
		}
		direction = a.getDirection()
	}
}


你可能感兴趣的:(ExtJS)