sencha-touch-2 - Sencha touch 2 列表带按钮

Question

需要在 sencha touch 2 中创建一个列表，其中包含以下项目

---

标签1 标签2

按钮1 按钮2 按钮3

标签1 标签2

按钮1 按钮2 按钮3

单击按钮时，弹出窗口应指向它。我知道我需要使用 Dataview 来创建列表。但我不知道使用数据视图创建这样的布局。任何帮助将不胜感激。

Answer 1

这是创建布局所需的代码。

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    launch: function () {
        Ext.define('MyListItem', {
            extend: 'Ext.dataview.component.DataItem',
            requires: ['Ext.Button'],
            xtype: 'mylistitem',
            config: {
                labelPanel:{
                    itemId:'labelpanel',
                    layout:'hbox',
                    defaults:{
                        //flex:1,
                        xtype:'label'
                    }
                },
                fnameLabel: true,
                lnameLabel: {
                    style:'margin-left:5px'    
                },                
                horizontalPanel: {
                    layout: 'hbox',
                    defaults:{
                        xtype:'button',
                        flex:1
                    },
                    items: [{
                        text: 'First Name',
                        btnId:1
                    }, {
                        text: 'Last Name',
                        btnId:2
                    }, {
                        text: 'Age',
                        btnId:3
                    }]
                },
                dataMap: {
                    getFnameLabel: {
                        setHtml: 'fname'
                    },
                    getLnameLabel: {
                        setHtml: 'lname'
                    }
                },
                layout: 'vbox'
            },
            applyFnameLabel: function (config) {
                return Ext.factory(config, Ext.Label, this.getFnameLabel());
            },
            updateFnameLabel: function (newFnameLabel, oldFnameLabel) {
                if (oldFnameLabel) {
                     this.down('panel[itemId="labelpanel"]').remove(oldFnameLabel);
                }
                if (newFnameLabel) {
                    this.down('panel[itemId="labelpanel"]').add(newFnameLabel);
                }
            },
            applyLnameLabel: function (config) {
                return Ext.factory(config, Ext.Label, this.getLnameLabel());
            },
            updateLnameLabel: function (newLnameLabel, oldLnameLabel) {
                if (oldLnameLabel) {
                    this.down('panel[itemId="labelpanel"]').remove(oldLnameLabel);
                }
                if (newLnameLabel) {
                    this.down('panel[itemId="labelpanel"]').add(newLnameLabel);
                }
            },
            applyLabelPanel: function (config) {
                return Ext.factory(config, Ext.Panel, this.getLabelPanel());
            },
            updateLabelPanel: function (newLabelPanel, oldLabelPanel) {
                if (oldLabelPanel) {
                    this.remove(oldLabelPanel);
                }
                if (newLabelPanel) {
                    this.add(newLabelPanel);
                }
            },   
            applyHorizontalPanel: function (config) {
                return Ext.factory(config, Ext.Panel, this.getHorizontalPanel());
            },
            updateHorizontalPanel: function (newHorizontalPanel, oldHorizontalPanel) {
                if (oldHorizontalPanel) {
                    this.remove(oldHorizontalPanel);
                }
                if (newHorizontalPanel) {
                    //console.info(newHorizontalPanel.down('button[btnId=1]'));
                    newHorizontalPanel.down('button[btnId=1]').on('tap', this.onButtonTap, this);
                    newHorizontalPanel.down('button[btnId=2]').on('tap', this.onButtonTap, this);
                    newHorizontalPanel.down('button[btnId=3]').on('tap', this.onButtonTap, this);
                    this.add(newHorizontalPanel);
                }
            },
            onButtonTap: function (button, e) {
                var record = this.getRecord();
                var id = button.config.btnId;
                switch(id){
                    case 1: var value = record.get('fname');break;
                    case 2: var value = record.get('lname');break;
                    case 3: var value = record.get('age').toString();break;
                }
                Ext.Msg.alert(value,"The value is: " +value);
            }
        });

        Ext.create('Ext.DataView', {
            fullscreen: true,
            store: {
                fields: ['fname','lname','age'],
                data: [{
                    fname: 'Jamie',
                    lname: 'Avins',
                    age: 100
                }, {
                    fname: 'Rob',
                    lname: 'Dougan',
                    age: 21
                }, {
                    fname: 'Tommy',
                    lname: 'Maintz',
                    age: 24
                }, {
                    fname: 'Jacky',
                    lname: 'Nguyen',
                    age: 24
                }, {
                    fname: 'Ed',
                    lname: 'Spencer',
                    age: 26
                }]
            },
            useComponents: true,
            defaultType: 'mylistitem'
        });
    }
}); 

这个小提琴应该给你一个想法。从 sencha 博客中阅读此链接。它解释了代码。