Empty Sencha Touch 2 List - sencha-touch-2

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