如何在extjs的列级获取嵌套的json数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在extjs的列级获取嵌套的json数据相关的知识,希望对你有一定的参考价值。

我对extjs很新,我听说有一天,请任何人帮忙。

如何在extjs的列级别获取嵌套的json数据对于普通列,它获取的确切,但是当它在col6处的数组列的cums被触发时。

这就是我的模型的样子

json数据如:

[
       {
       "col1" : "abc",
       "col2" : "aasd",
       "col3" : "aasd",
       "col4" : "sad",
       "col5" : "sad",
       "col6" : [
                   {
                      "inncol1": "laksd",
                      "inncol2": "laksd"
                   },
                   {
                      "inncol1": "laksd",
                      "inncol2": "laksd"
                   }
                   ]
       },

        {
       "col1" : "abc",
       "col2" : "aasd",
       "col3" : "aasd",
       "col4" : "sad",
       "col5" : "sad",
       "col6" : [
                   {
                      "inncol1": "laksd",
                      "inncol2": "laksd"
                   },
                   {
                      "inncol1": "laksd",
                      "inncol2": "laksd"
                   }
                   ]
       }

    ]

期待输出:

====================================================================
**col1**    **col2**    **col3**    **col4**    **col5**                **col6  **
                                            ========================            
                                             **inncol1**    **inncol2** 
====================================================================
abc     jasd    asjd    aasd    asdjk        asdjk        asdas
                                             asdas         asdd
=====================================================================
asdas   sada    asdas   sdf     asdas       asdas           sdaas
                                            asds            daass
======================================================================  

型号是:

 Ext.define('MONTHWISEMODEL', 
                            {
                                extend  : 'Ext.data.Model',
                                fields  :
                                [
                                     {  name: 'col1'                }
                                    ,{  name: 'col2'                }
                                    ,{  name: 'col3'                }
                                    ,{  name: 'col4'                }
                                    ,{  name: 'col5'                }
                                    ,{  name: 'col6'                }
                                ]
                            }); 

商店是:

getStore : function()
            {
                var proxy = {
                         type        : 'ajax'
                        ,url         : myurl
                        ,reader      : 'jsonreader'

                return   Ext.create('Ext.data.GridStore',
                            {
                                 model      : 'MONTHWISEMODEL'
                                ,autoLoad   : false
                                ,autoDestroy: false
                                ,proxy      : proxy
                            });
            }   
    }

网格是:

getMonthlyReportGrid : function()
    {

        var me = this;
        var store = me.getStore();
        var reportsGrid =   Ext.create('Ext.custom.grid.Panel', 
        {
             store          : store
            ,id             : 'monthlyGridData'
            ,overflowX      : 'scroll' 
            ,overflowY      : 'scroll'
            ,forceFit       : false
            ,height         : 450
            ,cls            : 'pr-data-grid'
            ,columns        : 
                [
                     {  text : 'col1'                               ,dataIndex : 'col1'             }
                    ,{  text : 'col2'                               ,dataIndex : 'col2'             }
                    ,{  text : 'col3'                               ,dataIndex : 'col3'             }
                    ,{  text : 'col4'                               ,dataIndex : 'col4'                 }
                    ,{  text : 'col5'                               ,dataIndex : 'col5'             }
                    ,{  text : 'col6'                                , columns: [                                                   
                                                                                    ,{ text : 'inncol1'       ,dataIndex : 'inncol1'            }
                                                                                    ,{ text : 'inncol2'       ,dataIndex : 'inncol2'        }
                                                                                ] }
                ]

        });
        return reportsGrid;
    }
答案

您可以使用renderer类的Ext.grid.column.Column方法,它可以用作转换器,您可以返回所需的值。这是FIDDLE

以上是关于如何在extjs的列级获取嵌套的json数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在 extjs4 中使用 tpl 显示嵌套的 json

EXTJS 4 嵌套 json 数组数据到网格面板

extjs 嵌套 json

如何在视图中获取列级依赖项

如何在 Extjs 4 中使用嵌套的 JSON 填充表单

ExtJS 在网格中加载嵌套的 JSON 数据