0

我是 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',
    },
  ]
});

如果可以做到，我如何将它们设置为相等的宽度？

谢谢你的帮助。

4

2 回答 2

1

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

  • 要显示所有面板：将layout配置更改为hbox. 这 3 个子面板将水平排列。此外，如果您希望它们垂直设置，请使用vbox

  • 要设置它们的相对宽度，请使用flexconfig. 您应该添加flex:1到所有 3 个面板，它应该可以工作。

希望能帮助到你。

于 2012-04-10T12:53:34.863 回答
1

这是一个工作示例。我想你想要 3 个垂直的盒子放在一起。如果将 vbox 更改为 hbox，则条纹将从上到下运行。我注释掉了全屏选项。我不确定什么时候需要。

应用程序.js

分机应用程序（{
    名称：'煎茶'，

    启动：函数（）{
        var view = Ext.create('Ext.Container', {
// 全屏：真，
            布局： {
                类型：'vbox'
            },
            项目： [
                {
                    xtype：'面板'，
                    html: '第一个',
                    风格：'背景颜色：#fff'，
                    弹性：1
                },
                {
                    xtype：'面板'，
                    html: '第二个',
                    样式：'背景颜色：#f00'，
                    弹性：1
                },
                {
                    xtype：'面板'，
                    html: '第三个',
                    样式：'背景颜色：#0ff'，

                    弹性：1
                }
            ]
        });
        Ext.Viewport.add(view);
    }
});

索引.html

<!doctype html>
<html manifest="" lang="zh-CN">
<头部>
    <meta charset="UTF-8">
    <title>煎茶</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="文本/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>
<正文>
</正文>
</html>
于 2012-04-10T21:23:59.783 回答