Question

我正在尝试在硬盘上显示带有json的NestedList，但它没有显示。我究竟做错了什么？ Chrome中没有错误。（Chrome以Applications / Google \ Chrome.app / Contents / MacOS / Google \ Chrome - allow-file-access-from-files打开）。我在控制台中没有一个错误就得到一个空白屏幕。如果我在MyPanel.js中评论fullscreen: true,，我会清楚地看到没有任何数据的NestedList。

Servlet.json

{
    "stream":[{
            "post_id": "1",
            "post_type": "text",
            "post_thumb": "bla1"
        }]
}

MyPanel.js

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.dataview.NestedList',
    alias : 'widget.MyPanel',

    config: {
        store : 'Storere',
        title: 'NestedList Example',     
        detailCard: {
            html: 'You can see detail information here!'
        } 
    } 
});

Storere.js

Ext.define('MyApp.store.Storere', {
    extend: 'Ext.data.TreeStore',

    config: {
        model: 'MyApp.model.MyModel',
        defaultRootProperty : 'stream',
        proxy: {
            type: 'ajax',
            url: '.\/app\/Servlet.json',
            reader: {
                type:         'json',
                rootProperty: 'stream'
            }
        }
    }    

});

MyModel.js

Ext.define('MyApp.model.MyModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name:'post_id', type: 'string' },
            {name:'post_type', type: 'string' },
            {name:'post_thumb', type: 'string' }
        ]
    }
});

TheWorld.js

Ext.define('MyApp.controller.TheWorld', {
    extend : 'Ext.app.Controller',

    config: {
        profile: Ext.os.deviceType.toLowerCase(),
        control: {
            'MyPanel': {
                activate: 'onActivate',
                leafitemtap: 'onDetailDisplay'
            }
        }  

    },

    onActivate: function() {
        console.log('Main container is active');
    },

    onDetailDisplay: function(nestedList, list, index, target, record) {
        console.log('onDetailDisplay is active');
        var detailCard = nestedList.getDetailCard();
    },

    onItemTap: function(view, list, index, target, record, event) {
        console.log('Item was tapped on the Data View');
    },

    init: function() {
        console.log('Controller initialized');
    },
});

UPD： enter image description here after click first item

Answer 1

您需要将NestedList配置更改为以下内容。

config: {
    store : 'Storere',
    //displayField:'post_type',
    title: 'NestedList Example',
    listConfig          : {
        itemTpl: '{post_type}'
    },
    detailCard: {
        html: 'You can see detail information here!'
    }
}

displayField这个NestedList配置可以指定用于设置标题和项目文本的字段。默认情况下，它设置为文本，但您可以将其指定为模型字段之一。如果您覆盖getItemTextTpl或getTitleTextTpl，则会忽略此配置。

另外还有listConfig配置选项，您可以在其中提及itemTpl配置。由于json有多个带有图像和文本节点的字段，我假设你也想显示它。

所以你可以拥有listConfig之类的内容：

    listConfig: {
        itemTpl: '<div><img src="{post_thumb}">{post_type}</div>'
    },

未显示列表的原因可能是 -

商店未加载适当的数据。（确保在Chrome中检查网络标签，看看是否存在Servlet.json。
displayField和/或listConfig未提及。

Sencha Touch 2未显示嵌套列表

1 个答案: