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

深碍√TFBOYSˉ_ 2022-08-10 05:54 26阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 Extjs之GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行选择、编辑等。在之前的[Extjs MVC开发模式详解][E

Bertha 。/ 2022年08月10日 05:55/ 0 赞/ 429 阅读

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

ExtJS6中表格排序也与ExtJS3中有所区别，下面分别给出这两个版本的实现方法 ExtJS3： // 复选框模型 var selm = new Ex

深碍√TFBOYSˉ_/ 2022年08月10日 05:54/ 0 赞/ 27 阅读

相关 Extjs Grid 中文排序

Ext.data.Store.prototype.createComparator = function(sorters){ return func

叁歲伎倆/ 2022年08月01日 00:28/ 0 赞/ 197 阅读

相关 extjs之-gridpanel操作

var cm = new Ext.grid.ColumnModel(\[new Ext.grid.RowNumberer(), sm, \{

曾经终败给现在/ 2022年07月15日 07:53/ 0 赞/ 246 阅读

相关 ExtJS GridPanel动态加载列

要实现动态更改GridPanel的列就必须先了解固定列是怎么弄出来的。GridPanel的列可以通过new Ext.grid.ColumnModel(columns)来创建，而

╰半夏微凉°/ 2022年03月27日 08:46/ 0 赞/ 468 阅读

相关 extjs store显示

tempOptRecord.data.prizeUnitSiteCodeCount = me.calcGoodPrizeSiteNumber(me.store);

我就是我/ 2021年09月29日 04:42/ 0 赞/ 339 阅读

相关 ExtJs gridPanel添加数据

向gridPanel添加数据数据模型： Ext.define("xx.xxModel",{ extend:"Ext.data.Model", field:[ {n

忘是亡心i/ 2021年09月14日 12:04/ 0 赞/ 448 阅读

相关 ExtJs gridPanel 显示查询无数据

需求当Ext.grid.Panel中没有查询到数据时，gridPanel中默认没有提示（不是弹出框的那种），在ExtJs中gridPanel封装了viewConfig属

本是古典何须时尚/ 2021年09月14日 11:52/ 0 赞/ 459 阅读

相关 ExtJs之gridPanel实例

需求完整的extjs自定义实例（没有异步加载数据） -------------------- 效果图 ![这里写图片描述][SouthEast] -----

男娘i/ 2021年09月14日 10:16/ 0 赞/ 421 阅读

相关 ExtJs之gridPanel

需求 Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行展示、选择、编辑等 -------------

比眉伴天荒/ 2021年09月14日 10:16/ 0 赞/ 533 阅读