Panels in Panels in Sencha Touch 2

1
votes

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?

1
htmlsencha-touchextjssencha-touch-2

1 Answers

1
votes

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