Sencha Architect xtype更改

Question

如何在Sencha Architect中更改xtype？

示例：

发自：

xtype: 'list'

至

xtype: 'RefreshableList'

Answer 1

作为免责声明，我是Sencha Architect产品的首席工程师之一。

拖出一个列表作为顶级组件。所有顶级组件都是它们自己的类。将userAlias和userClassName配置设置为类似于“刷新列表”和“刷新列表”的值。看一下为此生成的代码。

将面板拖出作为顶级组件，将检查器中的现有RefreshableList拖动到新面板中。系统会提示您是否要移动、复制或链接列表，然后选择“链接”。这将创建一个子类RefreshableList的实例。

这是目前在Architect中执行此任务的最佳方式。如果您在Architect之外构建了RefreshableList组件，并且希望在过程中链接它，则会有一些不同。您必须创建一个覆盖并更改您在那里实例化的xtype。我们正试图在Sencha Architect 2.2中解决这个限制。您将能够指定我们当前所称的createAlias。这是要创建的别名(xtype、ptype、type等)。

例如，如果您拖出一个面板，然后在其中放入一个列表，那么您可以在检查器中选择该列表，并将createAlias配置为“RefreshableList”。这将替换生成的代码中从'list‘到'RefreshableList’的xtype。它不会改变在Architect内部的画布上呈现的内容。您必须通过JS资源和/或动态加载器/requires功能加载RefreshableList类。

Answer 2

您必须通过扩展list类来创建您自己的类，并为它提供您自己的小部件别名。本教程提供了您需要的所有内容：http://www.sencha.com/learn/how-to-use-classes-in-sencha-touch-2/

更新

下面是一个非常基本的自定义列表的一些代码

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