Blog Archive

ExtJs check Browser Type and Version

Its very easy with the help of Ext properties. Here is an example ...


extjs check browser type and version

Application HTML file - index.html

<html>
<head>
<title>ExtJs check browser type example</title>

<link rel="stylesheet" type="text/css"
 href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="checkBrowser.js"></script>

</head>
<body>
 <div id="myExample"></div>
</body>
</html>

Application JavaScript file - checkBrowser.js

Ext.Loader.setConfig({ 
 enabled: true 
 });

Ext.application({
    
 name: 'myApp',
    appFolder: 'app/checkBrowser',
    
    controllers: [
                  'MyController'
              ],

    launch: function() {
     Ext.create('Ext.container.Container', {
         renderTo: 'myExample',
            items: [
                {
                 xtype: 'myView'
                }
            ]
        });
    }
});

Application View - MyView.js

Ext.define('myApp.view.MyView' ,{
 extend: 'Ext.container.Container',
 alias : 'widget.myView',
 
    height: 400,
    width: 400,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    defaults: {
     margin: '5 5 5 5'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'button',
                    text: 'Detect my Browser',
                    action: 'findBrowser'
                },
                {
                  xtype: 'displayfield',
                     fieldLabel: 'My Browser is',
                     name: 'browserType',
                     itemId: 'browserType',
                     value: '?'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Application Controller - MyController.js

Ext.define('myApp.controller.MyController', {
   extend : 'Ext.app.Controller',

   //define the views
   views : ['MyView'],
   
   init : function() {
    this.control({
     
     'container' : {
      render : this.onPanelRendered
     },
     'myView button[action=findBrowser]' : {
      click : this.onDetectMyBrowser 
     }
    });
   },

   onPanelRendered : function() {
    //console.log('The container was rendered');
   },
   
   onDetectMyBrowser : function(button) {
    //console.log('Button Click');
    var myView = button.up('container');
    var myTextDisplay = myView.getComponent('browserType');
    if(Ext.isChrome){
     myTextDisplay.setValue("Chrome Version " 
     + Ext.chromeVersion);
    }
    else if(Ext.isIE) {
     myTextDisplay.setValue("IE Version " 
     + Ext.ieVersion);
    }
    else if(Ext.isSafari) {
     myTextDisplay.setValue("Safari Version " 
     + Ext.safariVersion);
    }
    else if(Ext.isGecko) {
     myTextDisplay.setValue("Firefox Version " 
     + Ext.firefoxVersion);
    }
    //and so on for other browsers
    else {
     myTextDisplay.setValue("I have no idea...");
    }
   }           
   
         
 });

References