CODEWITHSUNDEEP
sencha-touchpanelextjssencha-touch-2
Nyan Cat
Nyan Cat

Reputation: 31

Container does not show all children panels with equal widths

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.

Upvotes: 0

Views: 1408

Answers (2)

user568866
user568866

Reputation:

Here's a working example. I think you want 3 vertical boxes on top of each other. If you change the vbox to hbox then the stripes will run top to bottom. I commented out the fullscreen option. I'm not exactly sure when it's needed.

app.js

Ext.application({
    name: 'Sencha',

    launch: function() {
        var view = Ext.create('Ext.Container', {
//            fullscreen: true,
            layout: {
                type: 'vbox'
            },
            items: [
                {
                    xtype: 'panel',
                    html: 'first one',
                    style: 'background-color: #fff',
                    flex: 1
                },
                {
                    xtype: 'panel',
                    html: 'second one',
                    style: 'background-color: #f00',
                    flex: 1
                },
                {
                    xtype: 'panel',
                    html: 'third one',
                    style: 'background-color: #0ff',

                    flex: 1
                }
            ]
        });
        Ext.Viewport.add(view);
    }
});

index.html

<!doctype html>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sencha</title>
    <link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
   <script type="text/javascript"
    src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

Upvotes: 1

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

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.

Upvotes: 1

Related Questions