We cut some corners to put the wireframes in code. Let's get them the rest of the way there, make the pages functional, and set up the backing storage. After we've done this, we'll deploy the app to our phone and call it a day.
Create three empty files in todo-app/app/view/:
List.jsNew.jsEdit.js
Now, break out the code for each tab in Main.js and put each into a separate file in the todo-app/app/view/ directory with a few modifications.
First, take the contents of the innermost items array for the List view and put it in List.js in the following code block:
Ext.define('TodoApp.view.List', {
extend: 'Ext.Panel',
alias: 'widget.todo-list',
config: {
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Things to do',
items: {
align: 'right',
text: 'Add'
}
},
{
...
}
]
}
});