如何定義將組件添加到DataItem的順序

我已閱讀tutorial關於爲Store中的每個元素創建具有自定義組件的DataView。它說關於在DataItem中將記錄映射到組件的字段，但是我的問題是如何定義將組件添加到DataItem的順序。如何定義將組件添加到DataItem的順序

例如，我有這樣的DataItem：

Ext.define('demo.view.CottageItem', { 
    extend: 'Ext.dataview.component.DataItem', 
    requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'], 
    xtype: 'listitem', 

    config: { 
     layout: { 
      type: 'hbox', 
      align: 'center', 
      pack: 'start', 
     }, 
     title: { 
      flex: 1 
     }, 
     photo: { 
      width: '140px', 
      height: '140px' 
     }, 

     dataMap: { 
      getTitle: { 
       setHtml: 'title' 
      }, 
      getPhoto: { 
       setSrc: 'photo' 
      } 
     }, 
     styleHtmlContent: true 
    }, 

    applyTitle: function(config) { 
     return Ext.factory(config, Ext.Label, this.getTitle()); 
    }, 

    updateTitle: function(newTitle, oldTitle) { 
     if (oldTitle) { 
      this.remove(oldTitle); 
     } 

     if (newTitle) { 
      this.add(newTitle); 
     } 
    }, 

    applyPhoto: function(config) { 
     return Ext.factory(config, Ext.Img, this.getPhoto()); 
    }, 

    updatePhoto: function(newImage, oldImage) { 
     if (oldImage) { 
      this.remove(oldImage); 
     } 

     if (newImage) { 
      this.add(newImage); 
     } 
    }, 
});

它具有佈局類型hbox，所以想要加入第一和然後標題照片。所以那個標題就在照片的右邊。我怎樣才能做到這一點？

另一個問題是，有沒有辦法在此DataItem裏面添加另一個容器，其中可以插入我的標籤和圖像？

UPDATE： 現在我的佈局是這樣的：

|標籤（標題）| |圖片（組圖）|

我希望它看起來像這樣：

|圖片（照片）| |標籤（標題）|

來源

2012-09-04 marwinXXII

我終於明白該如何解決我的問題，這裏是我的代碼：

Ext.define('demo.view.CottageItem', { 
    extend: 'Ext.dataview.component.DataItem', 
    requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'], 
    xtype: 'listitem', 

    config: { 
     layout: { 
      type: 'hbox', 
      align: 'center', 
      pack: 'start', 
     }, 
     title: { 
      style: { 
       'font-weight': 'bold' 
      } 
     }, 
     photo: { 
      width: '140px', 
      height: '140px' 
     }, 
     desc: {}, 

     dataMap: { 
      getTitle: { 
       setHtml: 'title' 
      }, 
      getPhoto: { 
       setSrc: 'photo' 
      }, 
      getDesc: { 
       setHtml: 'desc' 
      }, 
     }, 
     styleHtmlContent: true, 
     items: [ 
      { 
       xtype: 'panel', 
       itemId: 'photoContainer', 
      }, 
      { 
       xtype: 'panel', 
       layout: { 
        type: 'vbox' 
       }, 
       itemId: 'textContainer', 
       flex: 1, 
      } 
     ], 
    }, 

    applyTitle: function(config) { 
     return Ext.factory(config, Ext.Label, this.getTitle()); 
    }, 

    updateTitle: function(newTitle, oldTitle) { 
     if (oldTitle) { 
      this.getComponent('textContainer').remove(oldTitle); 
     } 

     if (newTitle) { 
      this.getComponent('textContainer').add(newTitle); 
     } 
    }, 

    applyPhoto: function(config) { 
     return Ext.factory(config, Ext.Img, this.getPhoto()); 
    }, 

    updatePhoto: function(newImage, oldImage) { 
     if (oldImage) { 
      this.getComponent('photoContainer').remove(oldImage); 
     } 

     if (newImage) { 
      this.getComponent('photoContainer').add(newImage); 
     } 
    }, 

    applyDesc: function(config) { 
     return Ext.factory(config, Ext.Label, this.getDesc()); 
    }, 

    updateDesc: function(newDesc, oldDesc) { 
     if (oldDesc) { 
      this.getComponent('textContainer').remove(oldDesc); 
     } 

     if (newDesc) { 
      this.getComponent('textContainer').add(newDesc); 
     } 
    }, 
});

我在DataItem中定義了兩個面板（佔位符），而不是向組件添加根目錄。我使用getComponent方法訪問它們並將我的組件添加到所需的位置。這裏唯一的問題是，添加到textContainer的項目順序未定義，但在我的情況下，我得到了所需的順序。

來源

2012-09-05 19:19:59 marwinXXII

很好的使用update *方法。謝謝！ – btk

更改後端存儲的排序順序？我不確定基於組件的DataView，但是基於元素的匹配來存儲排序。

要正確設置（或改變）排序，你必須閱讀Store的config sorters財產或sort功能

乾杯，奧列格

來源

2012-09-04 23:02:41 olegtaranenko

不，不是存儲中項目的順序，而是視圖組件添加到DataItem的順序。我更新了我的問題 – marwinXXII

是的，那正是我想要的。如果您在商店中更改排序=>您將在UI上更改佈局。你可以在運行時創建數據視圖。你檢查過了嗎？對於基於元素的數據視圖，它的工作原理是100％ – olegtaranenko

我說的是單個DataItem而不是整個DataView中組件的順序。只是爲了確保我試圖改變存儲內的記錄順序，並且單個DataItem的佈局沒有改變。 – marwinXXII

如何定義將組件添加到DataItem的順序

回答

相關問題