Question

如何在Sencha Architect中更改xtype？

实施例：

从：

xtype: 'list'

到

xtype: 'RefreshableList'

Answer 1

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

将List拖出为顶级组件。所有顶级组件都是他们自己的类。将userAlias和userClassName配置设置为'refreshablelist'和'RefreshableList'等值。看看为此生成的代码。

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

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

例如，如果您拖出一个Panel然后在其中放入一个列表，则可以在检查器中选择列表并将createAlias配置为“RefreshableList”。这将把生成的代码中的xtype从'list'替换为'RefreshableList'。它将 NOT 更改在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();
    }
});

Sencha Architect xtype改变

2 个答案: