PDA

View Full Version : making a styled checkbox



DaveC426913
26 Oct 2010, 7:53 AM
Line items in my list have checkboxes. I override the default button look with my own and then manipulate CSS background-position to show the correct check state icon. There's an 'unchecked' state, a 'pressed' state and a 'checked' state.

The 'pressed' state takes care of itself, thanks to Sencha's default button-press behaviour .x-button-pressed.

But, when I click on the button, it should add the 'checked' class, meaning my icon will show as checked.

Clearly, it is not as simple as button.cls="checked";

But is there something I'm missing?



xtype: 'button',
height: 40,
cls: 'Checkbox',
handler: this.checkme



checkme: function(button,event){
button.cls="checked";
}


CSS:


#ShoppingList .x-button{
width: 27px;
height: 29px;
background-image: url(../img/checkbox.png);
-webkit-box-shadow: none;
border:0;
}
#ShoppingList .Checkbox.x-button-pressed{
background-position: 0 58px;
}
.checked{
background-position: 0 29px;
}



In a nutshell: I want my button to add a class to itself when clicked.

DaveC426913
26 Oct 2010, 8:32 AM
button.addClass("checked")


Duh.


OK. Now I need to detect it, so I can toggle it. Like this:

if (button.el.dom.className.indexOf("checked")>=0){
button.removeClass("checked");
}
else{
button.addClass("checked");
}

evant
26 Oct 2010, 3:16 PM
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Element&member=hasClass

http://dev.sencha.com/deploy/touch/docs/?class=Ext.Element&member=toggleClass

DaveC426913
27 Oct 2010, 6:36 AM
Awesome, thanks!