Cambiamento XType Architect Sencha

Question

Come posso cambiare un XType in Sencha Architect?

Esempio:

Da:

xtype: 'list'

a

xtype: 'RefreshableList'

Answer 1

Come disclaimer, sono uno dei principali ingegneri sul prodotto Architetto Sencha.

Trascina una lista come componente di livello superiore. Tutti i componenti di livello superiore sono le loro classi. Impostare le configurazioni userAlias e userClassName per valori come "ristorablelist" e 'restorelist'. Dai un'occhiata al codice generato per questo.

Trascina un pannello Come componente di livello superiore, trascinare il segnaleria esistente nell'ispettore nel nuovo pannello. Un prompt ti chiederà se vuoi spostare, copiare o collegare l'elenco, selezionare "Link". Ciò creerà un'istanza della tua sottoclasse RomableLelist.

Questo è attualmente il modo migliore per andare su questo compito all'interno dell'architetto. Nel caso in cui hai costruito il componente di ristorablelist al di fuori dell'architetto e vorresti collegarlo nel processo sarà un po 'diverso. Dovrai creare un override e cambiare xtipo che stai istanziando lì. Stiamo tentando di affrontare questa limitazione nell'architetto Sencha 2.2. Sarai in grado di specificare ciò che stiamo attualmente chiamando un createAlias. Questo è ciò che alias (xtipe, ptype, tipo, ecc.) Per creare.

Ad esempio se hai trascinato un pannello e quindi inserire un elenco al suo interno, è possibile selezionare l'elenco nell'ispettore e configurare il createAlias in "RefreshAbleList". Ciò sostituirà l'XTYPE nel codice generato da "Elenco" a 'ristorablelist'. Sarà non cambia ciò che viene reso sulla tela all'interno dell'architetto. Dovresti caricare la tua classe di ristorablelist tramite una risorsa JS e / o il caricatore dinamico / richiede funzionalità.

Answer 2

Devi creare la tua classe estendendo la classe di elenco e dargli il tuo alias di widget.Questo tutorial ha tutto ciò di cui hai bisogno: http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/

AGGIORNAMENTO

Ecco alcuni codice per una lista personalizzata molto semplice

//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();
    }
});

.