2

完整代码的 Git Ropo

我已经定义：

/应用程序/模型/待办事项：

Ext.define('Test.model.Todo', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'title', type: 'string' },
            { name: 'priority', type: 'integer', defaultValue: 0 },
            { name: 'done', type: 'boolean' }
        ]
    }
});

/app/store/TodoStore

Ext.define('Test.store.TodoStore', {
    extend: 'Ext.data.Store',
    requires: [ 'Test.model.Todo' ],
    config: {
        model: 'Test.model.Todo',
        data: [
            { title: 'Todo Item 1', priority: 0, done: false },
            { title: 'Todo Item 2', priority: 0, done: false },
            { title: 'Todo Item 3', priority: 0, done: false },
            { title: 'Todo Item 4', priority: 0, done: false },
            { title: 'Todo Item 5', priority: 0, done: false },
            { title: 'Todo Item 6', priority: 0, done: false }
        ]
    }
});

现在，如果我只是store: 'TodoStore'在列表中使用，我会得到

[WARN][Ext.dataview.List#applyStore] 找不到指定的Store

所以我也添加了 app.js

Ext.application({
    name: 'Test',
    ...
    stores: [ 'TodoStore' ],

警告消失了，但我仍然有一个空白列表。我错过了什么吗？

下面是旧帖

Ext.define("SimpleTodo.view.Main", {
    extend: 'Ext.Panel',
    requires: [ 'Ext.TitleBar', 'Ext.dataview.List' ],
    config: {
        styleHtmlContent: true,
        items: [
            ...
            {
                xtype: 'list',
                itemTpl: '{name}',
                store: {
                    fields: ['name'],
                    data: [
                        { name: 'Todo 1' },
                        { name: 'Todo 2' },
                        { name: 'Todo 3' },
                        { name: 'Todo 4' },
                        { name: 'Todo 5' },
                        { name: 'Todo 6' }
                    ]
                }

            }
        ]
    }
});

得到：

在 instanceof 检查中期望一个函数，但得到了#<Object>

4

3 回答 3

1

这是因为 Sencha Touch 不了解您定义商店的方式。

你应该做这样的事情，包括 3 个步骤：

定义模型

Ext.define('SimpleTodo.model.listitem',{
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'name', type: 'string'},
        ],
    }
})

定义商店：

Ext.define('SimpleTodo.store.listitems', {
    extend: 'Ext.data.Store',

    config: {
        model: 'SimpleTodo.model.listitem',
        data: [
             { name: 'Todo 1' },
                        { name: 'Todo 2' },
                        { name: 'Todo 3' },
                        { name: 'Todo 4' },
                        { name: 'Todo 5' },
                        { name: 'Todo 6' }
        ],
    }
});

最后，在您的列表中：

store: 'listitems'

希望这可以帮助。

于 2012-05-13T13:25:25.787 回答
1

事实证明，您不能在面板中定义列表（但是，此视图可以是选项卡面板的一部分）。所以：

Ext.define("SimpleTodo.view.Main", {
    extend: 'Ext.dataview.List',
    config: {
        title: 'Simple Todo',
        itemTpl: '{name}',
        store: 'myStore'
    }
}

更新：这是一个带有标题栏的容器中的列表示例。注意layout: 'vbox'容器flex: 1上的 和列表上的 。这些都是正确显示列表所必需的。

Ext.define("SimpleTodo.view.Main", {
    extend: 'Ext.Container',
    config: {
        layout: 'vbox',

        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Simple ToDo'
            },
            {
                xtype: 'listcmp',
                flex: 1
            }
        ]
    }
}

使用包含您的列表定义的单独视图。例如：

Ext.define('SimpleTodo.view.ListCmp', {
    extend: 'Ext.List',
    xtype: 'listcmp',

    config: {
        store: 'SimpleToDo',
        itemTpl: '{title}'
    }
}
于 2012-05-18T21:27:57.013 回答
0

尝试提供商店的完整类路径：

store: 'SimpleTodo.store.listitems',

我想框架仅通过类/文件名不知道您指的是什么类。

如果仍然不工作，我会怀疑列表没有显示什么，所以尝试配置列表 itemTpl 配置：

itemTpl: '{name}',
于 2014-04-15T15:23:50.823 回答