0

SenchaTouch2を使用したコンポーネントのレイアウトに関して2つの質問があります。

  • コンテナ内のテキストをどのように正しく整列させることができますか？
  • 静的データと混合された動的データのさまざまなビットを、行の折り返しが必要なコンポーネントに連結するにはどうすればよいですか？

次のようにレンダリングしたいビューがあります。

希望するビューレイアウト

「Seen：」テキストは静的で右揃えであり、右側のテキストは3つの動的テキストと2つの静的テキストを連結した文字列です。

私はうまくいくものを持っていますが、それは正しく感じられません。

xtype:'container',
    layout:{
    type:'hbox'
},
items:[
    {
        xtype:'container',
        flex:1,
        layout:{
            type:'hbox'
        },
        items:[
            {
                xtype:'spacer',
                layout:'fill'
            },
            {
                xtype:'label',
                layout:'fit',
                html:'Seen:'
            }
        ]
    },
    {
        xtype:'label',
        name:'contentLabel',
        flex:5,
        html:'[BUILD A STRING AND SET THE HTML HERE]'
    }
]

右揃え

したがって、テキストを右揃えにするために、基本的に、左側にスペーサーコンポーネント、右側にラベルが付いたhboxコンテナーを使用しました。もっと簡単な方法が必要です。

連結

右側に配置したい文字列を作成することはできますが、モデルと1対1でマッピングできる複数のラベルが必要です。文字列を連結するためのコードを記述しなければならないのは、MVCのようには感じません。

右側をhboxに分割してみましたが、行の折り返しに問題がありました。各ラベルはそれ自体を個別にレンダリングする必要があるため、ラッピングがあった場合、それは独自のコンテナー内で発生します。

私が試みていることを行う簡単な方法はありますか？

4

1 に答える 1

1

右揃え：text-align CSSプロパティを使用して実行できます。以下の例ではstyle、簡単にするためにプロパティを使用していますが、プロパティを使用clsするとより柔軟になります。コンポーネントにCSSクラスが追加されるため、.sassファイルでスタイルを設定できます。

連結：join()標準のJavascript関数を使用できます。指定されたセパレータを使用して、配列のすべての要素を文字列に連結します。私の例では、dynamic1とdynamic2は変数です。

したがって、結果コードは次のようになります。

xtype: 'container',
layout: {
    type: 'hbox'
},
items: [
    {
        xtype: 'label',
        flex: 1,
        html: 'Seen:',
        style: 'text-align:right'
    },
    {
        xtype: 'container',
        flex: 5,
        html: ['static1', 'static2', dynamic1, 'static3', dynamic2].join('')
    }
]

編集

tplプロパティを使用して、プロパティをレンダリングするテンプレートを定義することもできdataます。container.setData（）を呼び出してプログラムで更新できます

xtype: 'container',
layout: {
    type: 'hbox'
},
items: [
    {
        xtype: 'label',
        flex: 1,
        html: 'Seen:',
        style: 'text-align:right'
    },
    {
        xtype: 'container',
        flex: 5,
        data: {
            name: 'Harry Potter',
            day: 'Saturday',
            date: 'October 21, 2011'
        },
        tpl: [
            '{name} on {day} {date}'
        ]
    }
]
于 2012-10-20T15:20:03.437 に答える