Empty Sencha Touch 2 List

Question

The Git Ropo for full code

I have defined:

/app/model/Todo:

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 }
        ]
    }
});

Now, if I just use store: 'TodoStore' in a list, I get

[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found

So I added too app.js

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

The warning goes away, but I still have a blank list. Am I missing something?

---

Old Post below

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' }
                    ]
                }

            }
        ]
    }
});

Getting:

Expecting a function in instanceof check, but got #<Object>

Answer 1

It's because Sencha Touch does not understand the way you've defined your store.

You should do something like this, which consists of 3 steps:

Defining model

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

Defining store:

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' }
        ],
    }
});

finally, in your list:

store: 'listitems'

Hope this helps.

Answer 2

As it turns out, you can't define a list within a panel (however, this view could be part of a tabpanel). So:

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

UPDATE: Here's an example of a list in a container with a titlebar. Note the layout: 'vbox' on the container and the flex: 1 on the list. Those are both necessary for the list to display properly.

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

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

With a separate view containing your list definition. E.g:

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

    config: {
        store: 'SimpleToDo',
        itemTpl: '{title}'
    }
}

Answer 3

try supplying full class path of the store:

store: 'SimpleTodo.store.listitems',

I suppose the framework does not know what class you are referring by just the class/file name.

if still not working i will suspect the list does not what to display, so try configuring the list itemTpl config:

itemTpl: '{name}',