Sencha触摸2列表与按钮

Question

需要使用

等项目在sencha touch 2中创建列表

---

label1的 LABEL2

button1 button2 button3

label1的 LABEL2

button1 button2 button3

单击按钮时，poppup应指向它。 我知道我需要使用Dataview来创建列表。但我不知道使用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'
        });
    }
}); 

This fiddle should give you an idea.从sencha博客阅读此link。它解释了代码。