Tuesday, April 3, 2012

Sencha touch Spinner field - Change Plus/Minus button icons


Recently I was working on a project where I had to change plus/minus button icons on sencha touch spinner fields. See the image below.

First I tried to change it with traditional sencha touch approach. By using sass files but there are no variables or mixins defined for it. You can check this from Sencha Touch Theme  

After that I checked the source code of spinner field and found that plus and minus signs are added by just specifying it in html of element so we can override it and change it the way we want.

Here are steps for it. Create an overides.js file and attach it after sencha touch js and before app.js. Add following code to it.

Ext.override(Ext.field.Spinner, {
    updateComponent: function (newComponent) {

        var innerElement = this.innerElement,
            cls = this.getCls();

        if (newComponent) {
            this.spinDownButton = Ext.Element.create({
                cls: ' minusButton',
                html: '<img src="resources/icons/minus.png"/>'

            this.spinUpButton = Ext.Element.create({
                cls:' plusButton',
                html: '<img src="resources/icons/plus.png"/>'

            this.downRepeater = this.createRepeater(this.spinDownButton, this.onSpinDown);
            this.upRepeater = this.createRepeater(this.spinUpButton, this.onSpinUp);

Check this code

html: '<img src="resources/icons/minus.png"/>' 
html: '<img src="resources/icons/pluss.png"/>'

This does the trick and will add your custom icon to it and you will get ui as displayed in above image.

Hope this helps you. Please note that above code is tested for Sencha touch 2.0 gpl version. It may be different for other older versions or may change in future version.

No comments:

Post a Comment