Panels in Panels in Sencha Touch 2 - html

Question

I am new to Sencha Touch 2 and I want to have something like:
A list (eg for todos, just for trying out ST2) where I can tap to edit or set it as done etc.
I am not sure I am doing it right, but I am thinking I have a panel containing a list on the left and details view on the right. Looking at the docs for Conatiner:
//this is the Panel we'll be adding below
var aboutPanel = Ext.create('Ext.Panel', {
html: 'About this app'
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'hbox',
defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//now we add the first panel inside the second
mainPanel.add(aboutPanel);
I figured I might be able to use the config property for configure my Panel:
Ext.define("SimpleTodo.view.Main", {
extend: 'Ext.Panel',
config: {
items: [
{
xtype: 'panel',
config: {
html: 'Panel 1 ...'
}
},
{
xtype: 'panel',
config: {
html: 'Panel 2 ...'
}
}
]
}
});
Fails: A blank screen. If I add html property into config I get HTML shown but what I am I doing wrong with the items?
You might have also noticed, I am having a list of left and details on right. This is good for tablets, but how can I make it for phones? Do I need to use Profiles and separate views for them?

Answer 1

but what I am I doing wrong with the items?
You don't have a config property for panel component. So, remove the config property for each individual panel and directly use html property to set html inside each panel
Like this,
{
xtype: 'panel',
html: 'Panel 1 ...'
},
{
xtype: 'panel',
html: 'Panel 2 ...'
}