Question

我一直试图让列表显示一段时间。我尝试过各种各样的各种提示但没有成功。现在我遇到了一个新问题。我从一个例子中得到了确切的代码，我似乎也无法使它工作。首先，这是代码。

Station.js

Ext.define('Syl.model.Station', {
extend: 'Ext.data.Model',

config: {
    fields: [
        { name: 'id', type: 'string' },
        { name: 'stop', type: 'string' }
    ]
}
});

Stations.js

Ext.define('Syl.store.Stations', {
extend  : 'Ext.data.Store',
requires: ['Syl.model.Station'],
id: 'stations',
xtype: 'stations',
config  : {
    model : 'Syl.model.Station',
    autoLoad : true,
    data: [
        { "id": "129", "stop": "NY Station" },
        { "id": "13", "stop": "Newark Station" }
    ]
}
});

MyService.js

Ext.define('Syl.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
requires: [
'Syl.store.Stations',    
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],

config: {
    fullscreen: true,
    layout: 'vbox',
    items: [
    {
        docked: 'top',
        xtype: 'toolbar',
        title: 'My Service'
    },

    {
                    [OLDER CODE BEGIN]
        xtype: 'list',
        title: 'Stations',
        //store: 'Stations',
        store: stationStore, //UPDATED
        styleHtmlContent: true,
        itemTpl: '<div><strong>{stop}</strong> {id}</div>'
                    [OLDER CODE END]

                    [UPDATE X2 CODE BEGIN]
        xtype: 'container',
        layout: 'fit',
        flex: 10,
        items: [{
            xtype: 'list',
            title: 'Stations',
            width: '100%',
            height: '100%',
            store: stationStore,
            styleHtmlContent: true,
            itemTpl: '<div><strong>{stop}</strong> {id}</div>'
        }]
                    [UPDATE X2 CODE END]
    },

    ]
}
});

app.js（已编辑到基础知识）

var stationStore; //UPDATED

Ext.application({
    name: 'Syl',
    views: ['MyService'],
    store: ['Stations'],
    model: ['Station'],

    launch: function() {
    stationStore = Ext.create('Syl.store.Stations');//UPDATED
    var mainPanel = Ext.Viewport.add(Ext.create('Syl.view.MyService'));
    },
});

好的，现在当我在浏览器中运行它时，我收到此错误：“[WARN] [Ext.dataview.List #applicationStore]无法找到指定的商店”。该应用程序运行，但没有列表。我无法理解这段代码如何适用于那些举例但不是我的人。这可能是Sencha Touch版本的不同之处吗？我使用的是2.0.1.1。

除此之外，我一直遇到列表未显示的问题。我最初尝试过一个没有商店的精简列表。我试图在列表的配置中设置data属性。我没有收到此错误，但我也没有显示列表。这就是为什么我以为我会尝试别人的代码。我想如果我能够至少获得一个正常运行的列表，我可以操纵它来做我想做的事。

非常感谢任何帮助。感谢。

[增订] 好的，所以我做了一些狩猎，有人告诉我，我需要将我的商店实例加载到列表中，而不是商店定义。所以我更新了代码，你可以看到，错误就消失了。问题是我仍然没有得到一份清单。我没有任何错误，但我看不到列表。我没有正确加载数据吗？或者我没有正确地将列表放在视图中？

[更新X2] 好的，所以我了解到列表应该放在一个容器中，我应该给它一个宽度和一个高度。我不完全确定这是正确的，但我现在有一个列表，我可以上下拖动。问题是它还没有任何内容。有谁知道为什么？

Answer 1

好的，我现在显示了我的列表。我认为最好的办法是让其他人知道我做错了什么，以防他们遇到同样的问题。首先，我遇到的一些问题可以在我的问题更新中找到。其次，我终于弄明白为什么在阅读这个错误报告后我的列表没有显示：http://www.sencha.com/forum/showthread.php?186957-List-%E2%80%9C-WARN-Ext.dataview.List-applyStore-The-specified-Store-cannot-be-found。

与我正在做的事情以及此处描述的内容存在一些关键差异。主要问题似乎是我没有使用StoreManager注册商店。似乎向Store添加一个id就完成了这个事实。实际上，这已经完成了，所以我将列表中的引用更改为该id而不是我拥有该实体的变量。在这样做时，我假设列表是从商店经理获取商店然后。然后神奇地工作了。

以下是我的代码与我的问题中的代码的区别：

MyService.js

store: stationStore, [OLD]
store: 'stations',   [NEW]

app.js

stationStore = Ext.create('Syl.store.Stations'); [OLD]
Ext.create('Syl.store.Stations');                [NEW]

似乎由于storeManager负责商店，我不需要将实例保存在变量中，这对我来说比拥有全局变量更好。

所以我学到的关于列表的事情（这很痛苦）是。他们喜欢在容器中。似乎在Panel上只有一个似乎不起作用。我听说他们可以直接添加到选项卡面板，虽然我还没有测试过。这可能是我的第一个问题，然后我再加上商店问题。其次，列表喜欢从StoreManager获取商店。因此，使用id定义您的商店并创建它的实例。然后让列表使用其ID引用商店。

我希望这可能有助于其他新手不浪费尽可能多的工作时间。

Answer 2

'因为你在Store id：'stations'中定义了，你必须在list config中定义

store: 'stations'

小案第一个字符......

从商店定义中删除xtype：'stations'...

干杯，奥列格

Answer 3

在MyService.js中使用新代码并注释掉旧代码，只需更改即可商店：stationStore，至：商店：'station'，

应该真的这样做。

完整参考块

Ext.define('Syl.view.MyService', {
    extend: 'Ext.Panel',
    xtype: 'stationsformPage',
    requires: [
        'Syl.store.Stations',    
        'Ext.form.FieldSet',
        'Ext.field.Password',
        'Ext.SegmentedButton',
        'Ext.List'
    ],

    config: {
        fullscreen: true,
        layout: 'vbox',
        items: [
        {
            docked: 'top',
            xtype: 'toolbar',
            title: 'My Service'
        },

        {
            xtype: 'container',
            layout: 'fit',
            flex: 10,
            items: [{
                xtype: 'list',
                title: 'Stations',
                width: '100%',
                height: '100%',
                store: 'stations',
                styleHtmlContent: true,
                itemTpl: '<div><strong>{stop}</strong> {id}</div>'
            }]
        },

        ]
    }
});

Sencha Touch 2 - 无法显示//列表或加载商店？ [更新X2]

3 个答案: