Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

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

    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
    Last edited by nakul_sagar; 23 Apr 2012 at 11:50 PM. Reason: addition of code

  2. 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) {....}
    });

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    ST1 or ST2?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    ST1

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    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

  6. #5
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    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) {...}
        }
    }
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    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;

  8. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    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) {....}
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    okay thanks. i came to knw solution. but i can see only 5 images on toolbar rest of the 4 images are not able visible due to less width. please can u help me how to scroll horizontally

  10. #9
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    set scroll : 'horizontal'
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  11. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    21
    Answers
    1
    Vote Rating
    0
      0  

    Default

    i did tat .. but it snot holding component instead going back

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •