Question

I’m new to Sencha Touch 2.

I want to create a basic example, which has a container with 3 panels inside. But it seems that only first panel shows, two remaining are hidden. What’s wrong? Here’s my code:

Ext.create('Ext.Container',{
  fullscreen: true,
  layout: 'card',
  items: [
    {
      xtype: 'panel',
      html: 'first one',
    },
    {
      xtype: 'panel',
      html: 'second one',
    },
    {
      xtype: 'panel',
      html: 'third one',
    },
  ]
});

If it can be done, how could I set them with equal widths?

Thanks for any help.

Answer 1

This is exactly what card layout is designed to do in Sencha Touch 2. Only the first child component is visible, while the others are hidden. To your question:

• To show all panels: change layout config to hbox. Those 3 child panels will be arranged horizontally. Additionally, if you want them to be vertically set, use vbox

• To set their relative width, use flex config. You should add flex:1 to all of your 3 panels and it should work.

Hope it helps.