Site Information ...

▼

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

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.