2

パネルのタップ ハンドラーで、(itemTpl を使用する) リストを作成し、そのストアに関連するアイテムを入力して、それをコンテナーに設定します。このリストが表示されると、最初の項目が完全に表示され、その下に他のすべての項目が重なり合って表示されます。これは 90% の確率で発生するわけではありません。ブラウザーのサイズを変更したり、デバイスの向きを変更したりすると、オーバーラップが消え、すべてのアイテムが適切に見えます。

ここに私の店があります:

var listStore = Ext.create('Ext.data.Store', {
    fields: ['id','image','name','description']
});

ストアにデータを入力する方法は次のとおりです。

var json = Ext.decode(response.responseText);
var arr = json.categories;
for(var x = 0; x < arr.length; x++) {
    if(arr[x].id == self.parent.cid){
        var itemsArr = arr[x].items;
        var myitems = [];
        for(var y = 0; y < itemsArr.length; y++) {
            myitems.push({"id":itemsArr[y].id, "image":itemsArr[y].image, "name":itemsArr[y].name, "description":itemsArr[y].description});
        }
        listStore.add(myitems);
    }
}

リストの作成方法は次のとおりです。

var itemsList = {
    xtype: 'list',
    itemTpl : self.parent.tp,
    store : listStore,
    flex : 1,
    id : 'ilid',
    layout : 'fit',
    templateId : 'detailsTemplate_'+self.parent.cid,
    detailsView : 'myshop.view.'+self.parent.ctype+'Details',
    direction: 'vertical',
    listeners: {
      itemtap: function (list, index, element, record)
      {
            var popup = Ext.create(list.detailsView, {
                    rec : record.getData(),
                    tid : list.templateId
            });
            Ext.Viewport.add(popup);
            popup.show('pop');
      }
    }
};

テンプレートは次のとおりです。

<tpl for="."><div class="tp_1"><div class="productBox"><div class="productTitle">{name}</div><div class="productBody"><img class="productImage" src="{image}"/></div></div></div></tpl>

これがどのように見えるかです：

リスト項目の重複

助けてください！

編集！！！テンプレートは次のとおりです。

<tpl for=".">
    <div class="tp_5">
        <div class="productBox">
            <div class="productTitle">{name}</div>
            <div class="productBody"><img class="productImage" src="{image}" width="300"/></div>
        </div>
    </div>
</tpl>

関連する CSS は次のとおりです。

.productBox
    {
        border:1px solid #9a9a9a;
    }
.productTitle
    {
        border-bottom:1px solid #9a9a9a;
        padding:5px 10px 0px 10px;
        background-color:#ccc;
        font-weight:bold;
        font-size: 80%;
        height:30px;
    }
.productBody
    {
        padding:10px;
        background-color: white;
    }
.productImage
    {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
.tp_5 .productBody, .st_5 {
        background-color : white;
    }

編集

フレックスの使用、マージンの提供、リフレッシュなどのさまざまなことをテストしているときに、この重複はリストが初めてロードされたときにのみ発生することに気付きました。メインページに戻ってコンテナから削除すると

hccontainer.remove(Ext.getCmp('ilid'), true);

再度作成してコンテナーの onTap イベントに配置すると、正常にレンダリングされます。

また、オーバーラップは 2 番目以降のアイテムでのみ発生し、最初のアイテムは常に完全に表示されます。

4

3 に答える 3

1

これは Sencha の未解決の問題のようです:

http://www.sencha.com/forum/showthread.php?249938-List-Items-with-height-gt-47px-not-rendered-correctly .

私の場合にうまくいった回避策は、次のようにリストの遅延更新を行うことでした:

var l = Ext.getCmp('ilid');
Ext.defer(function(){ 
  l.refresh(); 
  console.log("Refreshed");
}, 100, l);

TOUCH-3781 がすぐに修正されることを期待しています。

于 2012-12-03T09:26:07.213 に答える
0

Sencha Touch 2.2.1 のテンプレートで 'div' を使用すると、オーバーラップが発生します。私の回避策は、「div」を html テーブルに変換することだったので、テンプレートは次のようになります。

<table><tr><td>{name}</td>
<tr><td><img class="productImage" src="{image}" width="300"></td></tr></table>
于 2013-06-07T12:54:59.287 に答える
0

画像を保持するテンプレート div に高さを指定することで、この問題に対するより明確な回避策を見つけました。

    .productBody
    {
        padding:10px;
        background-color: white;
        height : 240px;
    }

テンプレートのデフォルトの CSS の高さがなかったため、オーバーラップが発生していたようです。

于 2012-12-11T13:07:37.807 に答える