Image buttons in Sencha Touch?

[uooq]

I'm brand new to Ext and Sencha Touch, so forgive my n00biness

I've got an existing html5 app that I'm trying to rewrite using Sencha Touch. My app contains custom buttons that I originally created by styling html anchor tags (i.e. I set the background-image for the <a /> elements) and then handling the click event with jquery event handlers and doing whatever I want with the events.

I'm trying to figure out what the analogous Sencha Touch recipe for this is... should I use an Ext.Button and set the icon for it? It seems like an icon button is more like a button with an icon inside of it... Should I just type out the old HTML in my index.html and then retrieve that element from the page in the js?

I'd rather add my buttons to the page programmatically, but I can't quite figure out what Element/Widget to use.

Thanks in advance for any advice/tips.

[wildaker]

There are several approaches that work. However, the cleanest way would probably be to use an Ext.Button, assign a class to it ("cls: 'myBtnClass',", say), and then style it via your app-specific CSS file. The icon: paramater is (as you've worked out) a red herring.

If your buttons all share certain features it can be helpful to first subclass the native classes (.x-button, .x-button-action and so on, in the various combinations that apply) in your own CSS, and then have simpler classes for each specific button.

And, of course, you can just modify sencha.css if you prefer, although you'll want to prettify/un-minify it first.

[peterkuli]

But why is this not working?

Application JavaScript:

Ext.setup({
    onReady: function() {		
	var rootPanel = new Ext.Panel({
		fullscreen: true,					
		dockedItems:[{					
			xtype: 'toolbar',
			dock: 'top',
			items: [{
				xtype: 'button',
				cls: 'btnAction'						
			}]								
		}]			
	});
    }
});

CSS:

.btnAction {
	background: url(../action.png);
	width: 40px;
	height: 40px;
}

[wildaker]

The answer can be found by walking the DOM using Web Inspector - your CSS isn't quite where you'd expect (or, arguably, it should) be in the cascade and so is being overridden.

But, change

.btnAction {...}

to

.x-button.btnAction.x-button-normal {...}

and you should be cooking with gas...

Alternatively - and, perhaps, more elegantly - use the !important declaration to override the override:

.btnAction {
    background: url(../action.png) !important;
    width: 40px;
    height: 40px;
}

Safari's (or Chrome's) Web Inspector is utterly essential for debugging - and designing - CSS for Sencha Touch, IME.

Best,

Mike

[peterkuli]

Thanks for your reply!

A button is placed in the toolbar at the top now...but without the 'good' dimensions, even without the 'width' and 'height' properties.
Picture

It seems that the icon itself is bigger than it's 'viewport' and lies 'behind' the outline of the button.

[wildaker]

Er... you're using a 60x60 pixel background on a 40x40 pixel button. It will fall off the bottom and sides unless you use size it:

.btnAction {
 background: url(../action.png) !important;
 background-size: 40px 40px;
 width: 40px;
 height: 40px;
}

However, you're probably better off using WebKit's CSS3 selectors and doing something like this:

.btnAction 
{
 padding: 5px !important;
 width: 40px;
 height: 40px;
 -webkit-mask-image: url('../action.png') !important;
 -webkit-mask-size: 30px 30px;
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-origin: content;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
  from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.9))) !important;
 background-color: #000000 !important;
}

which gives you a 30x30 pixel image on a 40x40 pixel button, together with a handsome fading effect (thanks to the use of a -webkit-gradient with alpha transparency as the background-image, masked by the -webkit-mask).

The CSS3 selectors provide for a lot more flexibility and are well worth learning (and using) in the Sencha Touch context. It pays to be aware that Android's implementation of them is slightly less complete than iOS/Mobile Safari's, however.

[peterkuli]

I will look into CSS3 selectors I think...thank you for your reply!

[d5chris]

I've just been trying to do pretty much the same thing, but with the twist that i needed to programmatically set the image URL because it is to be a DVD cover (so that rules out CSS). Here's how i did it:

1: In my index.html i included jquery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

2: In my JS, i made a button like so:
{ width:235, height:160, xtype: 'button', id:"movie_id_xxx", cls:'myimagebutton', handler: myHandler },
Then later on, immediately after adding the button to the page, i set the image url like so:
$('#movie_id_xxx').css('background','url(img/shows/something.jpg)');

3: In my CSS:
.myimagebutton {
border:0;
border-radius:0;
-webkit-box-shadow:0 0 10px #000;
}
.myimagebutton.x-button-pressed {
-webkit-box-shadow: 0 0 10px #ff0;
}

Works so far, and is pretty simple!

[RandyMcMillan]

For example...

In a button definition

Reference the KitchenSink demo for over all usage context.

cls:'demobtn',

In CSS...

.demobtn
{
margin: 3% 5%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAUklEQVRIDWNgoDFgBJnPz8d3HkgZ0MIumAX/aWE4yEwmWhkMM3fUAlhI4KRHgwhn0MAkRoMIFhI46dEgwhk0MInRIIKFBE56NIhwBg1MYugHEQCQzwKBoNiZjAAAAABJRU5ErkJggg==);
}

[Vijaya1]

Hi All,

i have created Login page in sencha touch app. For this i have used xtype: "vbox"
(1)i want the CUID, Pssword be left side and edittext boxes @ right side, and also buttons are in column i want them to be in row.
(2)i want to reduce the size od edittext box.
(3)want to remove background box for CUID and Password
Here is my code.
Ext.setup({
onReady: function(){
new Ext.Panel({
fullscreen: true,
items: [{
xtype: "form",
layout: "vbox",
autoscroll: "stretch",
items: [
{
xtype: "toolbar",
title: "Login",
cls: "txtlogin"
},
{
xtype: "textfield",
name: "name",
label: "CUID",
cls: "txtField",
placeholder: "Enter your CUID here"
},
{
xtype: "passwordfield",
name: "password",
label: "Password",
placeholder: "Enter your password"
},
{
xtype: "button",
cls: "btnLogin",
ui: "normal",
text: "Login"
/*align: "right"*/
},
{
xtype: "button",
cls: "btnReset",
ui: "normal",
text: "Reset"
}
]
}]
});
}
});
Any suggestions, advise would be appreciable
please help me...