1

I am new to sencha touch and I am trying to use the back button in my toolbar. I wish to toggle its visibility based on the User Agent detected. By default it is visible but if the user agent is detected as desktop I want to set hidden : true.

I cannot understand,

  1. How to detect the UserAgent
  2. How to toggle the visibility

Here is the code

myapp.views.SubSettings = Ext.extend(Ext.Panel, {
 layout: 'fit',

 dockedItems: [{
 xtype: 'toolbar',
 items: [ {
   ui: 'back',
   id: 'backButton',
   text: 'Back',

   handler : function () {
    // this function should detect the User Agent and set visibility to false for back button
    }
   }
  ]
}]

1 Answer 1

1

For detecting the user-agent there is the Ext.is class
http://dev.sencha.com/deploy/touch/docs/?class=Ext.is

Example to set the visibility of a back button on Android with the hidden property:

myapp.views.SubSettings = Ext.extend(Ext.Panel, {
    layout: 'fit',

    dockedItems: [{
        xtype: 'toolbar',
        items: [{
            ui: 'back',
            id: 'backButton',
            text: 'Back',
            hidden: Ext.is.Android
        }]
    }];

Example if you want to check for the user-agent and set visibility inside the function

handler: function () {
    if(Ext.is.Android) {
        this.hide();
    }
}
1
  • 1
    This works great. I found out about Ext.is but didn't know I could use it hidden: Ext.is.Phone like this.
    – JABD
    Sep 8, 2011 at 20:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.