Question

我正在使用sencha touch 2并且没有在sencha论坛中获得帮助，所以我希望你们能帮助我。

我想创建一个包含自定义项的列表。在这个自定义项目中，我希望有一个水平滚动列表视图，按钮作为项目。我试着做它的component.DataItem，但它对我没用。我还尝试在列表中添加自定义xtype als项目，但这不起作用。

我认为这是一项简单的任务，但是sencha touch对我来说是一个挑战。

所以请帮助我并告诉我，我怎样才能得到如图所示的视图。

My goal with sencha touch 2

Answer 1

您将要使用Component DataView而不是标准列表。实质上，您需要首先定义一个Ext.dataview.component.DataItem，然后将其实现到DataView中。下面是DataView指南中引用的DataView中的按钮的简单示例：http://docs.sencha.com/touch/2-0/#!/guide/dataview

首先创建DataItem：

Ext.define('MyApp.view.DataItemButton', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'dataitembutton',    
    config: {
        nameButton: true,    
        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },    
    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },    
    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            this.add(newNameButton);
        }
    }
});

我们必须为每个项目扩展Ext.dataview.component.DataItem。这是一个抽象类，用于处理每个项目的记录处理。
在扩展之下，我们需要Ext.Button。这只是因为我们要在项目组件中插入一个按钮。
然后我们为此项目组件指定xtype。
在我们的配置块中，我们定义了nameButton。这是我们添加到此组件的自定义配置，它将由类系统转换为按钮。我们默认将它设置为true，但这也可能是一个配置块。此配置将自动为我们的nameButton生成getter和setter。
接下来我们定义dataMap。 dataMap是记录数据与此视图之间的映射。 getNameButton是要更新的实例的getter;所以在这种情况下我们想获得这个组件的nameButton配置。然后在那个块里面我们给它设置该实例的setter;在这种情况下是setText并给它我们传递的记录的字段。因此，一旦此项组件获得记录，它将获取nameButton，然后使用记录的名称值调用setText。
然后我们为nameButton定义apply方法。 apply方法使用Ext.factory转换传递给Ext.Button实例的配置。然后返回该实例，然后将调用updateNameButton。 updateNameButton方法只删除旧的nameButton实例（如果存在），并添加新的nameButton实例（如果存在）。

现在创建DataView：

Ext.create('Ext.DataView', {
    fullscreen: true,

    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'dataitembutton'
});

在您的情况下，您不想使用DataItem的按钮，而是要使用水平滚动列表。以下是我从这个答案中找到的一个例子：Horizontal scrolling list

var list = Ext.create('Ext.DataView',{
   store: store,
   itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
   inline: { wrap: false },
   scrollable: {
     direction: 'horizontal',
     directionLock: true
   }
});

请注意，您可能还必须使用第二个数据视图中的组件才能实现带图像的按钮

自定义xtypes作为ext.listview中的单元格

1 个答案: