Its very easy with the help of Ext properties. Here is an example ...
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.