4

我正在尝试新的 dataview 组件，并且正在使用这个 Sencha 示例：

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

在 KittensListItem 中，我删除了图像，现在我想添加三个按钮：“Email”、“Facebook”和“Twitter”，而不是 Store 中的值。当用户单击每个按钮时，我想显示每个按钮各自的 Store 值。如何实现？

这是目前屏幕的样子：

在此处输入图像描述

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 }
        ]
    }
});
4

2 回答 2

2

在互联网上搜索后，我找到了每个按钮的“点击”事件的解决方案。诀窍是在 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') );
  }
于 2012-04-26T14:30:43.943 回答
1

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

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

控制器： 

  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 必须有更好的方法来一起处理数据视图行组件，而不必每次都查找索引/组件。

于 2012-05-17T09:19:15.263 回答