Sencha Architect xtype change

Question

如何在Sencha Architect中更改xtype？

例子：

來自：

xtype: 'list'

到

xtype: 'RefreshableList'

Answer 1

作爲一個聲明一些代碼，我對煎茶Architect產品鉛工程師之一。

拖出列表作爲頂級組件。所有頂級組件都是它們自己的類。將userAlias和userClassName配置設置爲'refreshablelist'和'RefreshableList'等值。看看爲此生成的代碼。

拖出一個面板作爲頂層成分，拖動現有RefreshableList在檢查到新的面板。提示會詢問您是否想要移動，複製或鏈接列表，選擇「鏈接」。這將創建您的子類RefreshableList的一個實例。

這是目前在架構師內部完成此任務的最佳方式。如果您在Architect之外構建了RefreshableList組件，並且想在此過程中將其鏈接起來，則會有所不同。你將不得不創建一個覆蓋，並改變你在那裏實例化的xtype。我們正試圖在Sencha Architect 2.2中解決這個限制。您將能夠指定我們目前所稱的createAlias。這是要創建的別名（xtype，ptype，type等）。

例如，如果您拖出一個面板，然後在其中放入一個列表，您可以選擇檢查器中的列表並將createAlias配置爲'RefreshableList'。這會將生成的代碼中的xtype從'list'替換爲'RefreshableList'。它將不是更改在Architect中畫布上呈現的內容。您將不得不通過JS資源和/或動態加載器/需求功能加載RefreshableList類。

Answer 2

你必須通過擴展列表類來創建你自己的類，並給它自己的小工具別名。本教程有所有你需要：http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/

UPDATE

這裏是一個非常基本的自定義列表

//this follows the MVC structure, if you wanted you could also do something like ux.RefreshableList 
Ext.define('myAppName.view.RefreshableList', { 
    extend: 'Ext.dataview.List', 
    xtype: 'RefreshableList', 
    config: { 
     fullscreen: true, 
     itemTpl: '{title}', 
     data: [ 
      { title: 'Item 1' }, 
      { title: 'Item 2' }, 
      { title: 'Item 3' }, 
      { title: 'Item 4' } 
     ] 
    }, 
    initialize: function() { 
     this.callParent(); 
    } 
});