Question

我是Sencha Touch 2的新手。

我想创建一个基本示例，其中包含一个包含3个面板的容器。但似乎只有第一个面板显示，其余两个是隐藏的。怎么了？这是我的代码：

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

如果可以，我怎么能用相等的宽度设置它们？

感谢您的帮助。

Answer 1

这正是Sencha Touch 2中设计的card布局。只有第一个子组件可见，而其他组件则隐藏。对于你的问题：

要显示所有面板：将layout配置更改为hbox。这3个儿童小组将水平排列。此外，如果您希望垂直设置它们，请使用vbox
要设置相对宽度，请使用flex config。您应该将flex:1添加到所有3个面板中，它应该可以正常工作。

希望它有所帮助。

Answer 2

这是一个有效的例子。我想你想要3个垂直盒子在彼此的顶部。如果您将vbox更改为hbox，则条带将从上到下运行。我注释掉了全屏选项。我不确定什么时候需要。

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>

容器未显示具有相等宽度的所有子面板

2 个答案: