title: Panels in Panels in Sencha Touch 2
body: <p>I am new to Sencha Touch 2 and I want to have something like: </p>
  
  <ul>
  <li>A list (eg for todos, just for trying out ST2) where I can tap to edit or set it as done etc. </li>
  </ul>
  
  <p>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: </p>
  
  <pre><code>//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);
  </code></pre>
  
  <p>I figured I might be able to use the <code>config</code> property for configure my Panel: </p>
  
  <pre><code>Ext.define("SimpleTodo.view.Main", {
      extend: 'Ext.Panel',
      config: {
          items: [
              {
                  xtype: 'panel',
                  config: {
                      html: 'Panel 1 ...'
                  }
              },
              {
                  xtype: 'panel',
                  config: {
                      html: 'Panel 2 ...'
                  }
              }
          ]
      }
  });
  </code></pre>
  
  <p>Fails: A blank screen. If I add <code>html</code> property into <code>config</code> I get HTML shown but what I am I doing wrong with the <code>items</code>?</p>
  
  <p>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? </p>