CODEWITHSUNDEEP
sencha-touchextjs
Francis
Francis

Reputation: 15

sencha touch : how do I put images in buttons and randomize the order they appear?

I'm new to using this framework so i would like to apologize if my questions are too easy to answer. I'm trying to create a picture game where a user chooses a picture from a set of four then the pictures will change and another set will be shown to the user. Suppose I have 30 pictures to show, how can I implement this in Sencha touch? I'm currently thinking of using buttons then adding an image to it. I don't know how to implement the array of pictures though and how to randomize their access. Please help. thanks

Upvotes: 1

Views: 3073

Answers (1)

ByteWelder
ByteWelder

Reputation: 5604

You create a button with a CSS style('cls' attribute) and then in your CSS you can define the image by setting the background-image property for that class

Javascript:

{                   
    xtype: 'button',
    cls: 'yourButtonClassname'
}

or otherwise something like this:

var yourButton = new Ext.Button(
{                   
    cls: 'yourButtonClassname'
});

And in your CSS you then define:

.yourButtonClassname
{
    background-image: url('button.png');
}

To randomize it, you can do this:

function getRandomClass()
{
    // return random class
}

{                   
    xtype: 'button',
    cls: getRandomClass()
}

If you want to know about the specifics of randomizing and arrays, you can find lots of tutorials about them. You probably want to look for "javascript arrays" and "javascript random value"

References: http://docs.sencha.com/touch/1-1/#!/api/Ext.Button (for Sencha 1.x) http://www.w3schools.com/cssref/pr_background-image.asp (CSS)

Upvotes: 1

Related Questions