0

SenchaTouch2は初めてです。

3つのパネルが入ったコンテナを持つ基本的な例を作成したいと思います。しかし、最初のパネルだけが表示され、残りの2つは非表示になっているようです。どうしたの？これが私のコードです：

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

これはcard、Sencha Touch 2でレイアウトが設計されていることとまったく同じです。最初の子コンポーネントのみが表示され、他のコンポーネントは非表示になります。あなたの質問に：

  • すべてのパネルを表示するには：layoutconfigをに変更しhboxます。これらの3つの子パネルは水平に配置されます。また、縦にセットしたい場合は、vbox

  • それらの相対的な幅を設定するには、flexconfigを使用します。flex:13つのパネルすべてに追加すると、機能するはずです。

それが役に立てば幸い。

于 2012-04-10T12:53:34.863 に答える
1

これが実際の例です。私はあなたが互いの上に3つの垂直ボックスが欲しいと思います。vboxをhboxに変更すると、ストライプは上から下に実行されます。フルスクリーンオプションをコメントアウトしました。いつ必要になるのか正確にはわかりません。

app.js

Ext.application（{
    名前：「煎茶」、

    起動：function（）{
        var view = Ext.create（'Ext.Container'、{
//フルスクリーン：true、
            レイアウト： {
                タイプ：'vbox'
            }、
            アイテム：[
                {{
                    xtype：'パネル'、
                    html：'最初のもの'、
                    スタイル：'背景色：#fff'、
                    フレックス：1
                }、
                {{
                    xtype：'パネル'、
                    html：'2番目のもの'、
                    スタイル：'背景色：＃f00'、
                    フレックス：1
                }、
                {{
                    xtype：'パネル'、
                    html：'3番目のもの'、
                    スタイル：'背景色：＃0ff'、

                    フレックス：1
                }
            ]
        }）;
        Ext.Viewport.add（view）;
    }
}）;

index.html

<！doctype html>
<htmlmanifest = "" lang = "en-US">
<頭>
    <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 = "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>
</ html>
于 2012-04-10T21:23:59.783 に答える