0

Sencha タッチ リスト ビューのセルは次のように表示されます。

ここに画像の説明を入力

しかし、次の画像に示すように、テキストを横に表示したいです。これどうやってするの。私のコードは次のようになります:

<div><img src="{IMAGE_URL}" height="55" width="55"/></div>
{MAIN} <br/>
{SUBMAIN}

リスト ビュー セルに次のものが必要です。

1.) 背景色に白を追加したい。

2.) クリックしてアラートを表示できるボタンを追加したいと考えています。

ここに画像の説明を入力

4

2 に答える 2

2

私のコードを試してみてください。これを使用して構築できます

    var list = { xtype: 'list',
        id: 'list_product',
        emptyText: '<div class="list-empty-text">No hay coincidencias</div>',
        data: [
            {IMAGE_URL: "t1", MAIN: "Test1", SUBMAIN : "test sub1", COST : "30" }, 
            {IMAGE_URL: "t2", MAIN: "Test2", SUBMAIN : "test sub2", COST : "40" }],
        itemTpl: new Ext.XTemplate(
        '<tpl for=".">',
        '<div class = "details">',
            '<div class="maindetails">',
               '<img src="{IMAGE_URL}" align="top" class="textmiddle"/>',   
                '<div class="maincontent">',
                    '<p>{MAIN}</p>',
                    '<p>{SUBMAIN} <span class="x-button btn">${COST}</span></p>',
                '</div>',
            '</div>',
        '</div>',           
        '</tpl>'
        ),
        listeners: [
            {
            element: 'element',
            delegate: 'span.x-button.btn',
            event: 'tap',
            fn: function() {
                alert('handle button');
            }
        } 
        ]
    };

CSS

次のcssが機能することに注意してください..しかし、これよりもうまく記述して同じ出力を得ることができ、私はまだcssを学んでいます

.details img {
    width: 50px;
    height: 50px;
}

.maindetails .maincontent{
    margin-top : -50px;
    margin-left : 70px;
}

.btn {
    width : 45px;
    float : right;
}
于 2013-07-11T18:38:03.680 に答える
0

css ファイルで、画像をインラインとして設定します。そして、その後、テキストに対して同じことを行います。

img {
  display:inline;
}

これで、画像の横にテキストを表示する問題が解決されるはずです。次に、見栄えを良くするために画像に余白を与えることができます。

使用できます

<input type="button" name="button" value="Press this for alert">

ボタン作成用。

于 2013-07-11T16:45:21.810 に答える