In this tutorial we will create a Link Button by extending Extjs's Ext.Button class. The code is as follow.
there may be other ways to implement it, i implement it using this, if you know any better solution please share.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 Link Button Example</title>
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define('LinkButton', {
extend: 'Ext.Button',
xtype: 'linkbutton',
config: {
href:'',
target:'',
},
initComponent: function () {
this.on('click', function(){
window.open(this.href,this.target);
});
}
});
var linkButton=Ext.create('LinkButton', {
text: 'Extjs 4 Link Button',
scale:'large',
href:'http://www.mobilesjinni.com/',
target:'_self'
});
var linkButtonWindow = Ext.create('Ext.window.Window', {
title: 'Link Button Example - Tutorial Jinni',
width: 250,
height: 200,
layout:'fit',
items: [linkButton]
});
linkButtonWindow.show();
});
</script>
</head>
<body>
</body>
</html>
when you execute the above code in the browser it will render like this
0 comments:
Post a Comment