2

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

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

我认为这是一个简单的任务，但煎茶触摸对我来说是一个挑战。

所以请帮助我并告诉我，我怎样才能得到像这张照片所示的视图。

我的煎茶触摸 2 目标

4

1 回答 1

1

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

首先创建数据项：

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。这仅仅是因为我们要在 item 组件中插入一个按钮。
  • 然后我们为这个 item 组件指定 xtype。
  • 在我们的配置块中，我们定义了 nameButton。这是我们添加到此组件的自定义配置，它将被类系统转换为按钮。我们默认将其设置为 true，但这也可以是配置块。这个配置会自动为我们的 nameButton 生成 getter 和 setter。
  • 接下来我们定义dataMap。dataMap 是记录数据和该视图之间的映射。getNameButton 是您要更新的实例的 getter；所以在这种情况下，我们要获取该组件的 nameButton 配置。然后在那个块中，我们给它那个实例的setter；在这种情况下是 setText 并给它我们正在传递的记录的字段。因此，一旦这个 item 组件获得了一条记录，它将获得 nameButton，然后使用记录的 name 值调用 setText。
  • 然后我们为我们的nameButton 定义apply 方法。apply 方法使用 Ext.factory 将传递的配置转换为 Ext.Button 的实例。然后返回该实例，这将导致调用 updateNameButton。updateNameButton 方法只是简单地删除旧的 nameButton 实例（如果存在），并添加新的 nameButton 实例（如果存在）。

现在创建数据视图：

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 的按钮。这是我从这个答案中找到的一个例子：水平滚动列表

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

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

于 2012-10-19T15:57:35.057 回答