Создание dataview внутри tabpanel с помощью ExtJS 4

Question

Я пытаюсь отобразить представление данных внутри tapanel.

http://jsfiddle.net/fU9De/93/

Ext.define('App.ImageView', { 
    extend:'Ext.panel.Panel', 
    alias:'widget.imageview', 
    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: new Ext.XTemplate( 
      '<tpl for=".">', 
       '<div class="x-item x-title">{name}</div>', 
       '<tpl for="children">', 
        '<div class="x-item x-item-child">{name}</div>', 
       '</tpl>', 
      '</tpl>' 
     ), 
     multiSelect: true, 
     height: 310, 
     trackOver: true, 
     overItemCls: 'x-item-over', 
     itemSelector: '.x-item', 
     emptyText: 'No images to display', 

     onItemSelect: function(record) { 
      var node = this._selectedNode; //this.getNode(record); 

      if (node) { 
       Ext.fly(node).addCls(this.selectedItemCls); 
      } 
     }, 

     onItemDeselect: function(record) { 
      var node = this._deselectedNode; //this.getNode(record); 

      if (node) { 
       Ext.fly(node).removeCls(this.selectedItemCls); 
      } 
     }, 

     processItemEvent: function(record, item, index, e) { 
      console.log(e.type); 
      if (e.type == "mousedown" && e.button == 0) { 
       this._deselectedNode = this._selectedNode; 
       this._selectedNode = item; 
      } 
     }, 

     updateIndexes : function(startIndex, endIndex) { 
      var ns = this.all.elements, 
       records = this.store.getRange(), 
       i, j; 

      startIndex = startIndex || 0; 
      endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1)); 
      for(i = startIndex, j = startIndex - 1; i <= endIndex; i++){ 
       if (!Ext.fly(ns[i]).is('.x-item-child')) { 
        j++; 
       } 

       ns[i].viewIndex = i; 

       ns[i].viewRecordId = records[j].internalId; 
       if (!ns[i].boundView) { 
        ns[i].boundView = this.id; 
       } 
      } 
     } 
    }) 
});  

`Ext.create ('Ext.tab.Panel', { ширина: 400, высота: 400, renderTo: document.body, предметы: [{ название : 'Foo', xtype: 'ImageView' }, { названия: 'Bar', tabConfig: { названия: 'Пользовательский заголовок', подсказки: 'кнопка подсказка' } }] });

ImageModel = Ext.define('ImageModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name'}, 
     {name: 'children'} 
    ] 
}); 


var store = Ext.create('Ext.data.Store', { 
    model: 'ImageModel', 
    data: [ 
     { 
      id: 1, 
      name: 'Parent #1', 
      children: [ { id: 11, name: 'Child 1.1' }, { id: 12, name: 'Child 1.2' }] 
     }, 
     { 
      id: 2, 
      name: 'Parent #2', 
      children: [ { id: 21, name: 'Child 2.1' }, { id: 22, name: 'Child 2.2' }] 
     } 
    ] 
});` 

Проблема в том, что dataview не отображается. Есть идеи?

Answer 1

Посмотрите на то, что вы делаете. Вы назначаете хранилище панели во время определения класса, а затем назначаете ее позже. Вы по существу делаете это:

var x; 
var y = x + 1; 
x = 3; 
// Why isn't y 4?