Remove default Main view and set up toolbar with a title.

The title is aligned on the left as desired. The alignment
trick is from: http://jsfiddle.net/xv67e/ and
http://stackoverflow.com/questions/14380090/how-do-i-left-align-title-text-in-title-bar-using-sencha-touch
Reimplement title and add some buttons to the toolbar.

It seems that when buttons are added, the previous trick no
longer works. So I invented my own "docked" trick.

The buttons are now in default style and icon. Custom
icon for removing completed item function is required
in the future. It's also better to design custom style
and 'more' button icon.
Merge branch 'master' of https://github.com/SpaceFlyer/DueList into title_bar
Update button style.
Temporary change remove completed items icon to trash
Add a very simple list.

Do not forget to set layout of the parent component (Ext.Container
in this case). For example, here if we don't set it to 'fit',
the list won't appear.
Make our first custom component: HeaderBar

The HeaderBar is just the titlebar or toolbar
we implemented before. Here we just make it as
a custom component in a different view class
to make our code cleaner.

One thing to be noticed: require your class before
you use the xtype. Here, we have to require
`DueList.view.HeaderBar` before using `xtype: 'headerbar'`.