Mudança de xtype do Sencha Architect

Question

Como posso alterar um xtype no Sencha Architect?

Exemplo:

de:

xtype: 'list'

para

xtype: 'RefreshableList'

Answer 1

Como isenção de responsabilidade, sou um dos engenheiros-chefe do produto Sencha Architect.

Arraste uma lista como um componente de nível superior.Todos os componentes de nível superior são suas próprias classes.Colocou o userAlias e userClassName configurações para valores como 'refreshablelist' e 'RefreshableList'.Dê uma olhada no código gerado para isso.

Arraste um Painel como um componente de nível superior, arraste o RefreshableList existente no inspetor para o novo Painel.Um prompt perguntará se você deseja mover, copiar ou vincular a lista, escolha "Link".Isso criará uma instância da sua subclasse RefreshableList.

Esta é atualmente a melhor maneira de realizar esta tarefa dentro do Architect.Caso você tenha criado seu componente RefreshableList fora do Architect e queira vinculá-lo no processo, será um pouco diferente.Você terá que criar um override e alterar o xtype que está instanciando ali.Estamos tentando resolver essa limitação no Sencha Architect 2.2.Você poderá especificar o que estamos chamando atualmente de createAlias.Este é o alias (xtype, ptype, type, etc) a ser criado.

Por exemplo, se você arrastar um Painel e colocar uma lista dentro dele, poderá selecionar a lista no inspetor e configurar o createAlias para 'RefreshableList'.Isso substituirá o xtype no código gerado de ‘list’ para ‘RefreshableList’.Ele vai NÃO altere o que é renderizado na tela dentro do Architect.Você teria que carregar sua classe RefreshableList por meio de um recurso JS e/ou do carregador dinâmico/requer funcionalidade.

Answer 2

Você deve criar sua própria classe estendendo a classe list e fornecendo a ela seu próprio alias de widget.Este tutorial tem tudo que você precisa: http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/

ATUALIZAR

Aqui está um código para uma lista personalizada muito básica

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