Extjs前台渲染表中数据

最新推荐文章于 2021-01-12 03:17:06 发布

weixin_42151636

最新推荐文章于 2021-01-12 03:17:06 发布

阅读量1.1k

点赞数

分类专栏： Extjs 文章标签： Extjs 渲染

本文链接：https://blog.csdn.net/weixin_42151636/article/details/80230374

版权

Extjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在数据库中，一般有关状态的数据存储的都是类似“0”或“1”的数字，而不是存储“生效”、“失效”之类的汉字。那么，从数据库里查出来的数据在前台显示给客户“0”这种数字显然是不合适的。那么，要如何做呢？

在Extjs中，可以通过过滤器和渲染器的配合使用来实现渲染。

通常，数据库中会有一张Code表，专门存储这种代码与字段的对应关系。

首先，创建一个查出Code表数据的Store，以及一个用来存储代码的容器Store（这里以状态的代码为例）。

var codeStore = Ext.create('Ext.data.Store', {
           storeId : 'codeStore',
           autoLoad : true,//true为自动加载
           loading : true,//自动加载时必须为true
           pageSize : 20,
           fields : [ 'CODE_ID_', 'PARENT_CODE_ID_', 'CATEGORY_', 'CODE_', 'NAME_', 'EXT_ATTR_1_', 'EXT_ATTR_2_', 'EXT_ATTR_3_', 'EXT_ATTR_4_', 'EXT_ATTR_5_', 'EXT_ATTR_6_', 'ORDER_' ],
           proxy : {
               url : 'selectCode.do',
               type : 'ajax',
               async : true,//false=同步
               actionMethods : {
                   read : 'POST'
               },
               extraParams : {},
               reader : {
                   type : 'json',
                   root : 'codeList',
                   totalProperty : 'total'
               }
           },
           listeners : {
               load : function(store, records, successful, eOpts) {
                   _init();//自动加载时必须调用
               }
           }
       });

       var STATUS_CodeStore = Ext.create('Ext.data.Store', {
           storeId : 'STATUS_CodeStore',
           autoLoad : false,
           fields : [ 'CODE_ID_', 'PARENT_CODE_ID_', 'CATEGORY_', 'CODE_', 'NAME_', 'EXT_ATTR_1_', 'EXT_ATTR_2_', 'EXT_ATTR_3_', 'EXT_ATTR_4_', 'EXT_ATTR_5_', 'EXT_ATTR_6_', 'ORDER_' ]

});

然后，在初始化的_init()方法中，通过filter，用正则表达式来过滤Code表中名为“STATUS”的Code代码。

var codeStore = Ext.data.StoreManager.lookup('codeStore');//组装子代码数据
       var STATUS_CodeStore = Ext.data.StoreManager.lookup('STATUS_CodeStore');
       codeStore.filter('CATEGORY_', new RegExp('^STATUS$'));
       STATUS_CodeStore.add(codeStore.getRange());
       STATUS_CodeStore.insert(0, {});

codeStore.clearFilter();

在显示数据的gridpanel中用renderer渲染器，将“CODE_”（代码）转换为“NAME_”，就可以实现数据的渲染了。

           {
               text : '<spring:message code="ASSET.STATUS_" />',
               dataIndex : 'STATUS_',
               style : 'text-align: center;',
               width : 80,
               renderer : function(value, metaData, record, rowIndex, colIndex, store, view) {
                   return (value != null && value != '') ? STATUS_CodeStore.findRecord('CODE_', new RegExp('^' + value + '$')).get('NAME_') : value;
               }
           }