sencha-touch-2 - Sencha Architect xtype 更改

Question

如何在 Sencha Architect 中更改 xtype？

例子：

从：

xtype: 'list'

至

xtype: 'RefreshableList'

Answer 1

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

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

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

这是目前在 Architect 中执行此任务的最佳方式。如果您在 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/

更新

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

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