将按钮添加到数据视图行？

Question

我正在试用新的数据视图组件，并且正在使用这个 Sencha 示例：

http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/

在 KittensListItem 中，我删除了图像，现在我想添加三个 显示“电子邮件”、“Facebook”和“Twitter”的按钮，而不是 商店中的价值。当用户点击每个按钮时，我想 显示每个按钮各自的存储值。这如何实现？

现在的屏幕是这样的：

Example.view.KittensListItem：

Ext.define('Example.view.KittensListItem', { 扩展：'Ext.dataview.component.DataItem'， xtype：'contactslistitem'， 需要：['Ext.Button'，'Ext.slider.Slider']， 配置：{ 数据映射：{ getName: { setHtml: 'name' }, getSlider: { setValue: 'cuteness' }, getEmail: { setHtml: 'email' }, getTwitter: { setHtml: 'twitter' }, getFacebook: { setHtml: 'facebook' } }, 名称：{弹性：1}， 滑块：{弹性：1}， 电子邮件： { 文本：'电子邮件'， style: '字体大小：12px;', 弹性：1 }, Facebook： { 文字：'Facebook1'， style: '字体大小：12px;', 弹性：1 }, 推特： { 文字：“推特”， style: '字体大小：12px;', 弹性：1 }, 布局： { 类型：'hbox'， 居中对齐' } }, applyName: function(config) { return Ext.factory(config, Ext.Component, this.getName()); }, 更新名称：函数（新名称，旧名称）{ if (newName) { this.add(newName); } if (oldName) { this.remove(oldName); } }, applySlider: function(config) { return Ext.factory(config, Ext.slider.Slider, this.getSlider()); }, 更新滑块：功能（新滑块，旧滑块）{ if (newSlider) { this.add(newSlider); } if (oldSlider) { this.remove(oldSlider); } }, applyEmail: function(config) { return Ext.factory(config, Ext.Button, this.getEmail()); }, 更新电子邮件：函数（新电子邮件按钮，旧电子邮件按钮）{ if (newEmailButton) { this.add(newEmailButton); } if (oldEmailButton) { this.remove(oldEmailButton); } }, applyTwitter: function(config) {return Ext.factory(config, Ext.Button, this.getTwitter()); }, 更新推特：功能（新推特按钮，旧推特按钮）{ if (newTwitterButton) { this.add(newTwitterButton); } if (oldTwitterButton) { this.remove(oldTwitterButton); } }, applyFacebook: function(config) { return Ext.factory(config, Ext.Button, this.getFacebook()); }, 更新Facebook：函数（newFacebookButton，oldFacebookButton）{ if (newFacebookButton) { this.add(newFacebookButton); } if (oldFacebookButton) { this.remove(oldFacebookButton); } } });

型号：

Ext.define('Example.model.Kitten', { 扩展：'Ext.data.Model', 配置：{ 字段：[ “姓名”， “电子邮件”， “推特”， “Facebook”， {名称：“可爱”，类型：“int”} ] } });

商店：

Ext.define('Example.store.Kittens', { 扩展：'Ext.data.Store'， 需要：['Example.model.Kitten']， 配置：{ 模型：'Example.model.Kitten'， 数据： [ { 名称：'one'，电子邮件：'email@addr'，twitter：'@twitter'，facebook：'Facebook ...'，可爱度：70 }， { 名称：'两个'，电子邮件：'email@addr'，twitter：'@twitter'，facebook：'Facebook ...'，可爱度：90 }， {名称：'三'，电子邮件：'email@addr'，twitter：'@twitter'，facebook：'Facebook ...'，可爱度：40 } ] } });

Answer 1

在网上搜索后，我发现每个按钮的“点击”事件都有一个solution。诀窍是在 update* 函数中添加一个点击监听器。我仍然不确定如何在每个按钮上设置静态标签。

顺便说一句，更好的答案可以让其他人投票并检查。

更新电子邮件：函数（新电子邮件按钮，旧电子邮件按钮）{ 如果（新电子邮件按钮）{ newEmailButton.on('tap', this.onEmailButtonTap, this); this.add(newEmailButton); } 如果（旧电子邮件按钮）{ this.remove(oldEmailButton); } }, onEmailButtonTap：功能（按钮，事件）{ var 记录 = this.getRecord(); Ext.Msg.alert(record.get('email') + ", " + record.get('facebook') ); }

Answer 2

您好，我是 Sencha Touch 的新手，入门时也遇到了问题。我遇到了这篇文章，寻找从控制器访问数据视图项组件/值的方法。就我而言，我希望同时使用滑块和编辑框值，并在更新后自动更新任一值。

Dataview 有一个 itemtap 监听器，它可以方便地返回行索引和this post 中提到的记录。我仍然发现确定被点击的组件是一个问题，因此最终只是按事件对象名称过滤组件。

控制器：

  control: {

      'contactslistitem': {
          itemtouchend: 'tapItem',
       }
  }

  tapItem: function(dataview, index, target, record,  e, eOpts) {

       if('facebookbutton'==e.target.name)
           alert('Tapped facebook button on row '+index);
  }

facebook 按钮元素的 dataview 配置包括 name 属性：

    facebook: {
        name: 'facebookbutton'
        text: 'Facebook1',
        style: 'font-size: 12px;',
        flex: 1
    },

我仍然觉得 ST2 必须有更好的方法来一起处理数据视图行组件，而不必每次都查找索引/组件。