Question

我有以下代码，我试图使用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'
                },
            }
        }
    }]
});

Answer 1

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

要执行此操作，您需要使用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>';
                        }
                    }

            }
            ]
        })

请look whole example in a Fiddle

ExtJS使用Ajax加载链接列表树

1 个答案: