Question

I’m new to sencha touch.I wrote code for number keypad,but the buttons are displayed vertically.my code is

Ext.define("exercise.view.Numberplate",{
    extend: "Ext.SegmentedButton",
    requires:['Ext.Button'],
    xtype:'Numberplate',
    allowMultiple: true,
    config: {
        pack:'center',
        centered:true,
        height:30,
        width:100,
        xtype:'button',
        items: [
            {
                xtype:'segmentedbutton',
                allowDepress:true,
                scroll:true,
                //layout:'vbox',
                items:[
                    {
                      text:'1',
                        width:100
                    },
                    {
                        text   : '2',
                        width:100
                    },
                    {
                        text: '3',
                        width:100
                    }
                ]
            },
            {
                xtype:'segmentedbutton',
                //centered:true,
                pack:'center',
                items:[
                    /*  {
                     centered:true,
                     html: [
                     '<br><br><br><br>'
                     ].join("")

                     },*/
                    {
                        text:'4',
                        width:100
                    },
                    {
                        text:'5',
                        width:100
                    },
                    {
                        text:'6',
                        width:100
                    }
                ]
            }
        ]

    },
    constructor: function() {
        this.on({
            scope: this,
            delegate: 'button',

            tap: 'tapHandler'
        });

        this.callParent(arguments);
    },

    tapHandler: function(button) {
        alert(button.getText());
        // this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
    }
});

I tried ,but i didnt get this .I think it’s easy but i don’t know how to do this.can anyone help me.thanks in advance

Answer 1

Just add layout:vbox to your config:

Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
    layout: 'vbox', // Add right here
    pack:'center',
    centered:true,
    height:30,
    width:100,
    xtype:'button',
    items: [
        {
            xtype:'segmentedbutton',
            allowDepress:true,
            scroll:true,
            //layout:'vbox',
            items:[
                {
                  text:'1',
                    width:100
                },
                {
                    text   : '2',
                    width:100
                },
                {
                    text: '3',
                    width:100
                }
            ]
        },
        {
            xtype:'segmentedbutton',
            //centered:true,
            pack:'center',
            items:[
                /*  {
                 centered:true,
                 html: [
                 '<br><br><br><br>'
                 ].join("")

                 },*/
                {
                    text:'4',
                    width:100
                },
                {
                    text:'5',
                    width:100
                },
                {
                    text:'6',
                    width:100
                }
            ]
        }
    ]

},
constructor: function() {
    this.on({
        scope: this,
        delegate: 'button',

        tap: 'tapHandler'
    });

    this.callParent(arguments);
},

tapHandler: function(button) {
    alert(button.getText());
    // this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});

Hope it helps 🙂