时间戳

首页 > 解决方案 > ExtJS 使用 Ajax 加载链接列表树

extjs - ExtJS 使用 Ajax 加载链接列表树

问题描述

我有下面的代码，我正在尝试使用 Ajax 获取日期列表并将其显示在页面上作为指向其他地方的链接。因此，每个条目都是一个链接，当您单击该链接时，它会将您带到其他地方。虽然树列表没有加载任何项目......

数据

{
  "success": true,
  "data": [
    "2018-10-08T00:00:00",
    "2018-10-05T00:00:00",
    "2018-10-04T00:00:00",
    "2018-10-03T00:00:00",
  ]
}

代码

Ext.define('...', {
    extend: 'Ext.form.Panel',
    xtype: '...',

    requires: [
        '...'
    ],

    layout: 'border',

    items: [{
        xtype: 'container',
        store: {
            proxy: {
                type: 'ajax',
                url: '...',
                useDefaultXhrHeader: true,
                withCredentials: true,
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                },
            }
        }
    }]
});

标签： extjs

解决方案

您可以使用数据显示网格。它可以显示可点击的链接。

为此，您需要使用 ajax 存储和网格渲染器创建一个网格，如下所示：

 // Ajax store

Ext.create('Ext.data.Store', {
           storeId: 'mystore',
           autoLoad: true,
           proxy: {
               type   : 'ajax',
               url    : '/file.php',
               actionMethods: {
                   read: 'POST'
               },
               reader : {
                   type: 'json'
               },
               extraParams : {
                   key       : 'val'
               },
               fields  : [
                   {name: 'date',  type: 'string'}
               ]
           }
       })


 // Grid

Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            scrollable: true,
            store: {
                type: 'mystore'
            },
            columns: [
            {
                text: 'link column',
                dataIndex:'link',
                renderer: function(value) {
                        if(value) {
                            // here you can format your output
                            return '<a href="'+value+'">'+value+'</a>';
                        }
                    }

            }
            ]
        })

请在 Fiddle 中查看整个示例

推荐阅读