View Full Version : Resizing Image Buttons

17 Apr 2011, 6:57 PM
Hi everyone,

I am relatively new programmer working on my first Sencha Touch App,

Everything has been going fairly well so far; however, I have encountered a problem I can't seem to find an answer to,

I am attempting to create two image buttons next to each other that will adjust in size when the screen size changes,

My buttons will change size perfectly well, but parts of the images will be cut off when the button becomes smaller, and the multiple images will be created when the buttons become larger,

So basically I'm looking for a way to have my images resizing to fit inside the buttons as the buttons resize,

here is the code I am currently using:

The JS File:

//The 2 buttons

var button1 = {
xtype: 'button',
cls: 'button1cls',
flex: 1

var button2 = {
xtype: 'button',
cls: 'button2cls',
flex: 1

//The Panel containing the buttons

var buttonPanel = {
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch',
flex: 1,
items: [button1, button2],


//The panel (Of a tabPanel) that contains the buttonPanel, a list (which, incase it matters, has a flex of 3), and a toolbar docked to the top,

var sermons = {
title: 'Main Panel',
iconCls: 'user',
layout: {
type: 'vbox',
align: 'stretch',
items: [buttonPanel, List],
dockedItems: [{
dock : 'top',
xtype: 'toolbar',
title: 'Toolbar',

The CSS File:

.x-button.button1cls.x-button-normal {
background: url(button2.bmp);

.x-button.button2cls.x-button-normal {
background: url(button2.bmp);

Thanks in advance :)

23 Jan 2012, 3:33 AM
I have the exact same problem and found this post in response. I'm surprised to see that nobody responded in 8 months. Surely this must be a common issue.

How do you resize images in buttons on Sencha Touch 1.x.x ?

27 Mar 2012, 8:07 PM