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：

<script type="text/javascript">
        Ext.onReady(function () {
            var store = Ext.create('Ext.data.Store', {
                fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObjectName", "cataeditstatusName",
                     "cataPublishName", "cataEndDate", "holyUpdateTime", "catapushtime"],
                pageSize: 20,  //页容量5条数据
                //是否在服务端排序 （true的话，在客户端就不能排序）
                remoteSort: false,
                remoteFilter: true,
                proxy: {
                    type: 'ajax',
                    url: '/Tools/106.ashx?method=getAllCatalog',
                    reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
                        type: 'json', //返回数据类型为json格式
                        root: 'rows',  //数据
                        totalProperty: 'total' //数据总条数
                    }
                },
                sorters: [{
                    //排序字段。
                    property: 'ordeId',
                    //排序类型，默认为 ASC 
                    direction: 'desc'
                }],
                autoLoad: true  //即时加载数据
            });

            var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            store: store,
            height: 400,
            width:800,
            selModel: { selType: 'checkboxmodel' },   //选择框
            columns: [                    
                          { text: '型录ID', dataIndex: 'cataId', align: 'left', maxWidth: 80 },
                          { text: '型录编号', dataIndex: 'cataNo',  maxWidth: 120 },
                          { text: '助记标题', dataIndex: 'cataTitle', align: 'left', minWidth: 80 },
                          { text: '应用对象', dataIndex: 'cataObjectName', maxWidth: 80, align: 'left' },                        
                          { text: '发布状态', dataIndex: 'cataPublishName', maxWidth: 80 },
                          { text: '活动截止日期', dataIndex: 'cataEndDate',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s' },
                          { text: '更新时间', dataIndex: 'holyUpdateTime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'},
                          { text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
                       ],
            bbar: [{
                xtype: 'pagingtoolbar',
                store: store,
                displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
                emptyMsg: "没有数据",
                beforePageText: "当前页",
                afterPageText: "共{0}页",
                displayInfo: true                 
            }],
             listeners: { 'itemclick': function (view, record, item, index, e) {
               Ext.MessageBox.alert("标题",record.data.cataId);
            }
            },
             tbar:[
             {text:'新增',iconCls:'a_add',handler:showAlert},"-",
             {text:'编辑',iconCls:'a_edit2',handler:showAlert},"-",
             {text:'停用/启用',iconCls:'a_lock'},"-",
             {text:'发布',iconCls:'a_upload',handler:showAlert},"-",
             {text:'组织型录',iconCls:'a_edit',handler:showAlert},"-",
             {text:'管理商品',iconCls:'a_edit',handler:showAlert},"-",
             "->",{ iconCls:"a_search",text:"搜索",handler:showAlert}], 
        });

function showAlert (){
      var selectedData=grid.getSelectionModel().getSelection()[0].data;

      Ext.MessageBox.alert("标题",selectedData.cataId);
 }

}); 

</script>

获取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()
	}
}