ExtJS的數據視圖定製和事件

我有關於從可用的ExtJS的數據視圖樣本這裏幾個問題：ExtJS的數據視圖定製和事件

http://dev.sencha.com/deploy/ext-4.0.0/examples/view/data-view.html

這裏是我有問題：

我有一個擴展面板的自定義組件，並做了一些佈局和事情，以適應我的應用程序。我想使用數據視圖在垂直列表視圖中呈現很多此組件的實例，就像本示例一樣。我正在與MVC合作，並有一個模型和商店。
該示例在視圖中偵聽selectionchange事件。由於我遵循ExtJS MVC模式，因此我希望在控制器中擁有此事件的監聽器。但是，我無法做到這一點。我已經試過這樣的事情（假設動作：「picturesListView」爲Ext.view.View中的例子）：
```
this.control({ 
    'picturesListView': { 
     selectionchange: function() { console.log('selectionchange'); } 
    } 
}); 
```

然而，這是行不通的。

發佈上請求的類代碼：

Ext.create('Ext.Panel', { 
    id: 'images-view', 
    frame: true, 
    collapsible: true, 
    width: 535, 
    renderTo: 'dataview-example', 
    title: 'Simple DataView (0 items selected)', 
    items: Ext.create('Ext.view.View', { 
     store: store, 
     tpl: [ 
      '<tpl for=".">', 
       '<div class="thumb-wrap" id="{name}">', 
       '<div class="thumb"><img src="{url}" title="{name}"></div>', 
       '<span class="x-editable">{shortName}</span></div>', 
      '</tpl>', 
      '<div class="x-clear"></div>' 
     ], 
     multiSelect: true, 
     height: 310, 
     trackOver: true, 
     overItemCls: 'x-item-over', 
     itemSelector: 'div.thumb-wrap', 
     emptyText: 'No images to display', 
     alias: 'view.picturesListView', 
     plugins: [ 
      Ext.create('Ext.ux.DataView.DragSelector', {}), 
      Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'}) 
     ], 
     prepareData: function(data) { 
      Ext.apply(data, { 
       shortName: Ext.util.Format.ellipsis(data.name, 15), 
       sizeString: Ext.util.Format.fileSize(data.size), 
       dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a") 
      }); 
      return data; 
     }, 
     } 
    }) 
});

來源

2013-07-03 GlGuru

您可以發佈您的'picturesListView'類是如何定義的代碼，以及它被實例化？ – kevhender

使用代碼編輯。它與代碼中的代碼相同，只是在視圖中添加了'alias：'view.picturesListView''。 – GlGuru

當你定義一個'class'時，你應該設置一個別名。 –

您濫用alias財產。定義類時應使用此屬性，而不是在定義實例時使用。請查看此處的文檔：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Class-cfg-alias

你在找什麼是itemId。如果您設置組件實例的itemId，則可以在您的選擇器中使用#在您的選擇器中引用該參數：

例如，

Ext.create('Ext.view.View', { 
    //...other stuff here... 
    itemId: 'picturesListView', 
    //...other stuff here 
})

然後：

this.control({ 
    '#picturesListView': { 
     selectionchange: function() { console.log('selectionchange'); } 
    } 
});

另一種選擇是由它的xtype得到您的控制器的參考。請注意，這將控制說的xtype的任何成分，但是：

this.control({ 
    'dataview': { 
     selectionchange: function() { console.log('selectionchange'); } 
    } 
});

來源

2013-07-03 13:04:58 kevhender

+1幫助和教育答案 –

優秀。這工作，謝謝。 – GlGuru

ExtJS的數據視圖定製和事件

回答

相關問題