0

カルーセルには高さが設定されていませんが、アクティブなアイテムのコンテンツのサイズに応じて必要なスペースを取ります。コード例:

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.Container',

    config: {
        items: [
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'abc'
                    }
                ]
            },
            {
                xtype: 'carousel',
                items: [
                    {
                        xtype: 'container',
                        items: [
                            {
                                xtype: 'label',
                                html: 'just need space for one line'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        items: [
                            {
                                xtype: 'label',
                                html: 'need<br/>space<br/>for<br/>more<br/>lines'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'label',
                        html: 'def'
                    }
                ]
            }
        ]
    }

});

私にとっては、高さが指定されていない場合、何も折りたたまれません (スペースをまったく使用しません)。Sencha Touch 2 を使用。

4

2 に答える 2

0

コンテナにレイアウトを設定する必要があります。ここでレイアウトの概要を見つけることができます

基本的に、これを config に追加します:

layout:'vbox',

VBox レイアウトは、コンテナ内で項目を水平に配置します。

次に、カルーセルに次を追加します。

flex:1

できるだけ多くのスペースを取るように指示します。

例はこちら

お役に立てれば

于 2012-07-17T23:05:46.400 に答える
0

@TragedyStruck さん、まず、Web アプリを表示する画面を理解しました。わかりました、コードのバージョンを作成しました。コンポーネントExt.Viewport.getSize().heightは、要素に必要なスペースを取ります。フルスクリーン要素が必要な場合、これはフルスクリーンではない要素に対して機能するため、プログラムでfunction. 

Ext.define('myapp.view.MyContainer', {
   extend: 'Ext.Container',
   xtype: 'mycontainer1',

   config: {
      scrollable: true,
      items: [
        {
            xtype: 'container',
            items: [
                {
                    xtype: 'label',
                    html: 'abc'
                }
            ]
        },
        {
            xtype: 'carousel',
            style: 'background-color: red',
            height: Ext.Viewport.getSize().height,
            renderTo: document.body,
            items: [
                {
                    xtype: 'container',
                    items: [
                        {
                            xtype: 'label',
                            html: 'just need space for one line'
                        }
                    ]
                },
                {
                    xtype: 'container',
                    items: [
                        {
                            xtype: 'label',
                            html: 'need<br/>space<br/>for<br/>more<br/>lines'
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'container',
            items: [
                {
                    xtype: 'label',
                    html: 'def'
                }
            ]
        },
        {
            xtype: 'container',
            items: [
                {
                    xtype: 'label',
                    html: 'ghi'
                }
            ]
        }

     ]
  }
});

これが役立つことを願っています。:)

ここに画像の説明を入力

于 2012-07-17T19:23:17.113 に答える