在 Sencha 2 的数据视图中显示按钮

Question

我正在尝试创建一个视图，它基本上有一个列表，其中每一行都有文本和 2 个右对齐的按钮。按钮的文本将始终相同 - 只有行的文本需要从商店中获取。

我看到这个 question but couldn't get the proposed solution 起作用了。我店里肯定有记录，但是dataview不显示

我的代码的简化版本：

我的主要看法：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    ...
    config: {
        layout: {
            type: 'vbox',
            pack: 'center',
            align: 'middle'
        },
        items: [
           ...
           {xtype: 'mylist'}
           ...
        ]
        ...
    }
    ...
});

数据视图：

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.DataView',
    alias: 'widget.mylist',
    requires: ...,
    config: {
         useComponents: true,
         store: 'my-store',
         defaultType: 'listitem'
     }
});

数据项：

Ext.define('MyApp.view.ListItem', {
    extend: 'Ext.dataview.component.DataItem',
    alias: 'widget.listitem',
    config: {
        layout: ...
        items: [{
            xtype: 'component',
            itemId: 'description',
            html: '',
            flex: 2
        },
        {
            xtype: 'button',
            text: 'a button',
            itemId: ...,
            flex: ...
         },
         {
             ... another button
         }]
     },
     updateRecord: function(record) {
         ...
         this.down('#description').setHtml(record.get('description'));
         // record.get('description') does give me an undefined value
     }
});

假设我的商店和模型设置正确，问题可能是什么？

或者，也许我应该只使用标准列表，但将宽度设置为 <100%，并且只需在每一行的右侧添加 2 个按钮。虽然我宁愿采用当前的工作方式...

编辑：
最终使用了 dataMap 方法。我的 DataItem 现在看起来像：

config: {
    layout: {
        type: 'hbox',
        align: 'center'
    },
    dataMap: {
        getDescription: {
            setHtml: 'description'
        }
    },
    description: {
        flex: 1
    }
},
applyDescription: function(config) {
    return Ext.factory(config, Ext.Component, this.getDescription());
},
updateDescription...

基本喜欢this.

我现在看到标签了，但我不知道如何在其中添加按钮。因为我不想 link 它到商店，所以我不想把它放在 dataMap。我试着把它放在 items 中，但没有用。

编辑 2：
好吧，让按钮显示比我想象的要容易。这只是我对标签所做的重复，但没有将其包含在 dataMap 中 - yesButton: {...}, applyYesButton: f(){...}, updateYesButton: f(){...}...

我要解决的最后一个问题是，如何唯一标识它们。我想要按钮上的侦听器，但不知何故将记录传递给处理程序。

Answer 1

我在数据视图中获取按钮而不将其链接到商店的解决方案。实际上，这有点不足为奇，类似于 blog post.

查看 - ListItem.js

...
config: {
    layout: {
       type: 'hbox',
       align: 'center'
    },
    dataMap: {
        getDescription: {
            setHtml: 'description'
        }
    },
    description: {
        cls: ...,
        flex: 4
    },
    myButton: {
        cls: ...,
        text: 'Button!',
        flex: 1
    }
},
applyDescription, updateDescription (same as in the question),
applyMyButton: function(config) {
    return Ext.factory(config, Ext.Button, this.getMyButton());
},
updateMyButton: function(newButton, oldButton) {
    ... same logic as the other update method
}

在我的数据视图中：

...
config: {
    itemId: ...,
    store: ...,
    useComponents: true,
    defaultType: 'listitem',
    width: '100%',
    flex: 1,
    listeners: {
        itemtap: function(dataview, index, element, evt) {
            var store = dataview.getStore();
            var record = store.getAt(index);
            ...
        }
    }
}
...

在 Sencha 2 的数据视图中显示按钮

Displaying buttons in a Dataview in Sencha 2

sencha-touch

sencha-touch-2

senchatouch-2.4