コンテナは等しい幅

私は内部の3枚のパネルでコンテナを持っている基本的な例を、作成したい煎茶タッチ2.コンテナは等しい幅

に新たなんだと、すべての子どもたちのパネルが表示されません。しかし、最初のパネルのみが表示され、残りの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', 
    }, 
    ] 
});

それを行うことができる場合、私は同じ幅でそれらを設定することができますか？

ありがとうございました。

出典

2012-04-10 Nyan Cat

あなたが除去されなければならない4件の末尾のコメントがあります。これはJavaScriptでそれらを残すのは悪い癖です。私が必要とする正確に何 –

これはcardレイアウトは煎茶タッチ2にのみ、最初の子コンポーネントを実行するために設計された、まさにある他は隠されている間、表示されています。あなたの質問に：

は、すべてのパネルを表示するには：hboxにlayout設定を変更します。これらの3つの子パネルは水平に配置されます。さらに、垂直に設定する場合は、vbox
を設定してください。flex configを使用してください。あなたは3枚のパネルの全てにflex:1を追加する必要があり、それが動作するはずです。

希望します。

出典

2012-04-10 12:53:34

。前もって感謝します！ –

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

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>

出典

2012-04-10 21:23:59

答えて

関連する問題