how to change button color when perform onclick in sencha touch

**nakul_sagar** · 23 Apr 2012 11:45 PM

can any1 please help me , how to get change button color (button which is present in toolbar)when user perform onClick ..

my code is shown below:
var mytop1 = new Ext.Toolbar({
dock: 'top' ,
scroll:'horizontal',
directionLock: false,
height:'20%',
layout: {
pack:'center',
},

items:[

{
xtype:'button',
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/overview.jpg" width="100%" height="100%" onclick="overview_func();" /><font size="1%">Overview</font></div>',
},
{
xtype:'button',
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/weight.jpg" width="100%" height="100%" onclick="weight_func();"/><font size="1%">Weight</font></div>',
},
{
xtype:'button',
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/bp.jpg" width="100%" height="100%" onclick="bp_func();"/><font size="1%">BP</font></div>',
},
{
xtype:'button',
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/spo2.jpg" width="100%" height="100%" onclick="spo2_func();"/><font size="1%">spo2</font></div>',
},
{
xtype:'button',
height:'80%',

html: '<div align="center"><img src="img/glucose.jpg" height="50%" onclick="glucose_func();"/><font size="1%">Glucose</font></div>',

},
{xtype:'button',
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/spiro.jpg" width="100%" height="100%" onclick="spiro_func();"/><font size="1%">Spiro</font></div>',
},
{xtype:'button',
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/medinfo.jpg" width="100%" height="100%" onclick="medinfo_func();"/><font size="1%">Medinfo</font></div>',
},

],

});

return mytop1;

thanks in advance

mitchellsimoens

Once again you shouldn't use onclick attribute. You can set a listener to the element:

Code:

comp.element.on({
    scope : comp,
    delegate : 'img',
    tap : function(e) {....}
});

**mitchellsimoens** · 24 Apr 2012 7:51 AM

ST1 or ST2?

**nakul_sagar** · 24 Apr 2012 8:57 PM

**nakul_sagar** · 24 Apr 2012 9:00 PM

i hav taken "pressedCls" in ccs but it ll hold the properties before itself, perhaps i want oly after performing onclick and it shud change when user clicks on another option i mean another button

**mitchellsimoens** · 25 Apr 2012 4:20 AM

MOved to correct forum.

You shouldn't use onclick attribute on the element or the html config on the button. The button will fire the handler config or the tap event that you should use instead...

Code:

{
    xtype : 'button',
    text : 'Test',
    handler : function(button) {...},
    listeners : {
        tap : function(button) {...}
    }
}

**nakul_sagar** · 25 Apr 2012 11:53 PM

thank u for suggestion. i came to now new thing but it doesn't work for my requirement. okay now please forget about button . my code is below: can u please help me to horizontal scroll for 9 to 10 images

var mytop1 = new Ext.Toolbar({
dock: 'top' ,
scroll:'horizontal',
directionLock: false,
updateBoundaryOnTouchStart: true,
height:'20%',
layout: {
pack:'center',
},

items:[

{
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/overview.jpg" width="100%" height="100%" onclick="overview_func();" /><font size="1%">Overview</font></div>',
},
{
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/weight.jpg" width="100%" height="100%" onclick="weight_func();"/><font size="1%">Weight</font></div>',
},
{
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/bp.jpg" width="100%" height="100%" onclick="bp_func();"/><font size="1%">BP</font></div>',
},
{
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/spo2.jpg" width="100%" height="100%" onclick="spo2_func();"/><font size="1%">spo2</font></div>',
},
{
height:'80%',
html: '<div align="center"><img src="img/glucose.jpg" height="50%" onclick="glucose_func();"/><font size="1%">Glucose</font></div>',

},
{
style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/spiro.jpg" width="100%" height="100%" onclick="spiro_func();"/><font size="1%">Spiro</font></div>',
},
{

style:{float: 'left',},
height:'80%',
html: '<div align="center"><img src="img/medinfo.jpg" width="100%" height="100%" onclick="medinfo_func();"/><font size="1%">Medinfo</font></div>',
},

],

});

return mytop1;

how to change button color when perform onclick in sencha touch

Thread Tools

Search Thread

Display

Hybrid View

Answered: how to change button color when perform onclick in sencha touch

Answered: how to change button color when perform onclick in sencha touch