1

私はExt.view.View、ajax プロキシの後に受信した画像のリストを表示するための 1 つのデータ ビューを作成するクラスに取り組んでいます。Sencha Doc for DataView によると、itemSelectorプロパティは必須です。だから私はそれを使用していますitemSelector: 'div.thumb-wrap'が、それぞれのクラスは、以下のように外側のループではなく、ネストされたループの内側にあります:
JSコード: 

Ext.define("DSApp.Desktop.view.ImageView",{
extend: 'Ext.view.View',
alias : 'widget.imageviewer',
initComponent: function()
{
    Ext.apply(this,{
        itemId : 'image-data-view',
        autoScroll : true,
        width : 600,
        store : getDataStore(),
        tpl : ['<div id="carouselDiv">',
                '<tpl for=".">',               // 1st loop
                '<span>{total}</span>',
                '<a href="#" onclick="clickNext({#})">Prev</a>',
                '<tpl for="images">',          // 2nd loop
                    '<div class="thumb-wrap">', // itemSelector of my choice
                        '<div class="thumb"><img src="{src}" title="{caption}"></div>',
                        '<span class="x-editable">{caption:htmlEncode}</span>',
                    '</div>',
                '</tpl>',
                '<div class="x-clear"></div>',
                '<a href="#" onclick="clickNext({#})">Next</a>',
                '</tpl>',
                '</div>'],
        multiSelect : true,
        trackOver : true,
        overItemCls : 'x-item-over',
        itemSelector : 'div.thumb-wrap',  // its not working
        emptyText : 'No images to display',
        listeners : {
            afterrender : function(current, eOpts) {
                current.getStore().load();
            },
            containerclick : function(current, e ,opts)
            {
                console.log(current.ownerCt);
            }
        }           
    });
    this.callParent(arguments);
  }
});
function clickNext(index)
{
    Ext.Msg.alert("Alert","Just a dummy Alert");
}

JSON: 

{
    data: {
      total: 120,
      start: 0,
      end: 20,
      images: [{...},{...},{...}]
    }
}

店： 

Ext.define('ImageModel', {
    extend : 'Ext.data.Model',      
    proxy : {
        type : 'ajax',
        url: '/images',
        noCache : true,
        reader : {
            type : 'json',
            totalProperty: 'total',
            rootProperty : 'data'
        }
    }
});

スタックトレース： 

Uncaught TypeError: Cannot read property 'internalId' of undefined ext-all.js:22
Ext.cmd.derive.updateIndexes ext-all.js:22
Ext.cmd.derive.refresh ext-all.js:22
Ext.cmd.derive.refresh ext-all.js:22
Ext.cmd.derive.refreshView ext-all.js:22
Ext.cmd.derive.onDataRefresh ext-all.js:22
Ext.cmd.derive.doFire ext-all.js:22
Ext.cmd.derive.fire ext-all.js:22
Ext.cmd.derive.doDispatchEvent ext-all.js:22
Ext.cmd.derive.dispatchEvent ext-all.js:22
Ext.cmd.derive.doFireEvent ext-all.js:22
a.doFireEvent ext-all.js:22
Ext.cmd.derive.fireEvent ext-all.js:22
Ext.cmd.derive.loadRecords ext-all.js:22
Ext.cmd.derive.onProxyLoad ext-all.js:22
Ext.cmd.derive.triggerCallbacks ext-all.js:22
Ext.cmd.derive.setCompleted ext-all.js:22
Ext.cmd.derive.setSuccessful ext-all.js:22
Ext.cmd.derive.process ext-all.js:22
Ext.cmd.derive.processResponse ext-all.js:22
(anonymous function) ext-all.js:22
Ext.apply.callback ext-all.js:22
Ext.cmd.derive.onComplete ext-all.js:22
Ext.cmd.derive.onStateChange ext-all.js:22
(anonymous function) ext-all.js:22

私が試しているときはいつでもitemSelector: 'div.blabla'、コンソールで問題なく先に進みます..実際、blablaのようなクラスがないため機能しません..そのため、私にとって混乱するようなものです..何か考えはありますか？

4

2 に答える 2

1

IMOあなたはそれをやり過ぎました。サーバーから画像配列を 1 つだけ返すため、2 つのループは必要ありません。それで、そのポイントは何ですか？

実際に変更する必要があるのはtotal、テンプレート用に提供されたデータに追加することだけです。2 つのループを作成するよりも簡単です。たとえば、collectDataメソッドでそれを行うことができます：

collectData: function(records, startIndex){
    var data = this.callParent(arguments);
    data.total = this.getStore().getTotalCount()
    return data;
}

次に、テンプレートは次のようになります。

tpl : [
    '<div id="carouselDiv">',
       '<span>{total}</span>',
       '<a href="#" onclick="clickNext({#})">Prev</a>',
       '<tpl for=".">',               // 1st loop
           '<div class="thumb-wrap">', // itemSelector of my choice
               '<div class="thumb"><img src="{src}" title="{caption}"></div>',
               '<span class="x-editable">{caption:htmlEncode}</span>',
           '</div>',
       '</tpl>',
       '<div class="x-clear"></div>',
       '<a href="#" onclick="clickNext({#})">Next</a>',
    '</div>'
]

また、修正rootPropertyして に変更する必要がありますimages。

作業サンプル (css なし): http://jsfiddle.net/Xf7N8/6/

于 2014-07-21T12:51:12.743 に答える
1

itemSelector のポイントは、DOM ノードをストア内のレコードにマップすることです。つまり、itemSelector 内でラップするものは、単一のレコードをカプセル化する必要があります。

itemSelector: '.person',
tpl: [
    'some markup',
    '<tpl for=".">,
        '<div class="person">{name}</div>',
    '</tpl>'
],

personその人物に関するすべてがdiv内にある必要があります。

于 2014-07-21T12:16:35.993 に答える