Sencha Architect xtype change

Question

How can i change a xtype in Sencha Architect?

Example:

from:

xtype: 'list'

to

xtype: 'RefreshableList'

Answer 1

As a disclaimer, I am one of the lead engineers on the Sencha Architect product.

Drag out a List as a top level component. All top level components are their own classes. Set the userAlias and userClassName configurations to values like 'refreshablelist' and 'RefreshableList'. Take a look at the code generated for this.

Drag out a Panel as a top level component, drag the existing RefreshableList in the inspector into the new Panel. A prompt will ask you if you would like to Move, Copy or Link the list, choose "Link". This will create an instance of your subclass RefreshableList.

This is currently the best way of going about this task inside of Architect. In the case that you built your RefreshableList component outside of Architect and would like to link it in the process will be a little different. You will have to create an override and change the xtype you are instantiating there. We are attempting to address this limitation in Sencha Architect 2.2. You will be able to specify what we are currently calling a createAlias. This is what alias (xtype, ptype, type, etc) to create.

For example if you dragged out a Panel and then put a list inside of it, you could then select the list in the inspector and configure the createAlias to 'RefreshableList'. This will replace the xtype in the generated code from 'list' to 'RefreshableList'. It will NOT change what is rendered on the canvas inside of Architect. You would have to load your RefreshableList class via a JS Resource and/or the dynamic loader/requires functionality.

Answer 2

You have to create your own class by extending the list class and give it your own widget alias. This tutorial has all you need: http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/

UPDATE

Here is some code for a very basic custom list

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