Question

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

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

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

以下是屏幕目前的样子：

enter image description here

Example.view.KittensListItem：

Ext.define('Example.view.KittensListItem', {
    extend: 'Ext.dataview.component.DataItem',
    xtype : 'contactslistitem',

    requires: [ 'Ext.Button', 'Ext.slider.Slider' ],

    config: {

        dataMap: {

            getName: { setHtml: 'name' },
            getSlider: { setValue: 'cuteness' },
            getEmail: { setHtml: 'email' },
            getTwitter: { setHtml: 'twitter' },
            getFacebook: { setHtml: 'facebook' }
        },

        name: { flex: 1 },

        slider: { flex: 1 },

        email: {
            text: 'Email',
            style: 'font-size: 12px;',
            flex: 1
        },
         facebook: {
            text: 'Facebook1',
            style: 'font-size: 12px;',
            flex: 1
        },
        twitter: {
            text: 'Twitter',
            style: 'font-size: 12px;',
            flex: 1
        },

        layout: {
            type: 'hbox',
            align: 'center'
        }
    },

    applyName: function(config) { return Ext.factory(config, Ext.Component, this.getName()); },

    updateName: function(newName, oldName) {
        if (newName) { this.add(newName); }

        if (oldName) { this.remove(oldName); }
    },


    applySlider: function(config) { return Ext.factory(config, Ext.slider.Slider, this.getSlider()); },

    updateSlider: function(newSlider, oldSlider) {
        if (newSlider) { this.add(newSlider); }

        if (oldSlider) { this.remove(oldSlider); }
    },

    applyEmail: function(config) { return Ext.factory(config, Ext.Button, this.getEmail()); },

    updateEmail: function(newEmailButton, oldEmailButton) {
        if (newEmailButton) { this.add(newEmailButton); }

        if (oldEmailButton) { this.remove(oldEmailButton); }
    },

    applyTwitter: function(config) {return Ext.factory(config, Ext.Button, this.getTwitter()); },

    updateTwitter: function(newTwitterButton, oldTwitterButton) {
        if (newTwitterButton) { this.add(newTwitterButton); }

        if (oldTwitterButton) { this.remove(oldTwitterButton); }
    },

    applyFacebook: function(config) { return Ext.factory(config, Ext.Button, this.getFacebook()); },

    updateFacebook: function(newFacebookButton, oldFacebookButton) {
        if (newFacebookButton) { this.add(newFacebookButton); }

        if (oldFacebookButton) { this.remove(oldFacebookButton); }
    }
});

型号：

Ext.define('Example.model.Kitten', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            "name",
            "email",
            "twitter",
            "facebook",
            { name: "cuteness", type: 'int' }
        ]
    }
});

商店：

Ext.define('Example.store.Kittens', {
    extend: 'Ext.data.Store',
    requires: ['Example.model.Kitten'],

    config: {
        model: 'Example.model.Kitten',

        data: [
            { name: 'one',  email: 'email@addr', twitter: '@twitter', facebook: 'Facebook...', cuteness: 70 },
            { name: 'two',  email: 'email@addr', twitter: '@twitter', facebook: 'Facebook...', cuteness: 90 },
            { name: 'three',  email: 'email@addr',twitter: '@twitter', facebook: 'Facebook...',cuteness: 40 }
        ]
    }
});

Answer 1

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

顺便说一下，一个更好的答案会让其他人得到支持并检查。

    updateEmail: function(newEmailButton, oldEmailButton) {
        if (newEmailButton) {
        newEmailButton.on('tap', this.onEmailButtonTap, this);
            this.add(newEmailButton);
        }

        if (oldEmailButton) {
            this.remove(oldEmailButton);
        }
    },

    onEmailButtonTap: function(button, event) {

    var record = this.getRecord();
        Ext.Msg.alert(record.get('email') +  ", " + record.get('facebook') );
  }

Answer 2

嗨，我是Sencha Touch的新手，也遇到了问题。我遇到了这篇文章，寻找从控制器访问dataview项目组件/值的方法。在我的情况下，我希望一起使用滑块和编辑框值，并在更新后自动更新任何值。

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

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

2 个答案: