使用ExtJS在Tabpanel內創建數據視圖4

我試圖渲染一個數據視圖在一個tapanel內。使用ExtJS在Tabpanel內創建數據視圖4

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的，項目：[{ 標題： '富'，的xtype： 'imageview的' }，{ 標題： '酒吧'， tabConfig：{ 標題： '自定義名稱'，工具提示： 'A按鈕提示' } }] }）;

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沒有呈現。有什麼想法？

來源

2013-06-04 catalinux

刪除面板子類中的renderTo。 –

是否做到了。一樣。 http://jsfiddle.net/fU9De/94/ – catalinux

看看你正在做的事情。您可以在類定義期間將商店分配到面板，然後再進行分配。你基本上是這樣做的：

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

來源

2013-06-04 10:59:31

使用ExtJS在Tabpanel內創建數據視圖4

回答

相關問題