To display a Web link, basically an URL, all you need to do is write a custom renderer function for the ExtJs Grid column that you want as shown below ...
formatURL: function(value){
myURL = '';
if(value !== ''){
myURL = '<a href="http://' + value + '" target="_blank">' + value +'</a>';
}
return myURL;
}
Web application index.html
<html>
<head>
<title>ExtJs 4 Grid display Web URL link</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="app.js"></script>
</head>
<body></body>
</html>
Web application javascript file app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'WEB',
appFolder: 'app',
controllers: [
'Websites'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'websiteList'
}
]
});
}
});
Model javascript file Website.js
Ext.define('WEB.model.Website', {
extend: 'Ext.data.Model',
fields: ['name', 'url']
});
Store javascript file Websites.js
Ext.define('WEB.store.Websites', {
extend: 'Ext.data.Store',
model: 'WEB.model.Website',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/sites.json',
},
reader: {
type: 'json',
root: 'sites',
successProperty: 'success'
}
}
});
View javascript file WebsiteList.js
Ext.define('WEB.view.WebsiteList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.websiteList',
title : 'My Website Listing',
store : 'Websites',
initComponent: function() {
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'URL', dataIndex: 'url', flex: 1, renderer: this.formatURL}
];
this.callParent(arguments);
},
formatURL: function(value){
myURL = '';
if(value !== ''){
myURL = '<a href="http://' + value + '" target="_blank">' + value +'</a>';
}
return myURL;
}
});
Controller javascript file Websites.js
Ext.define('WEB.controller.Websites', {
extend: 'Ext.app.Controller',
stores: ['Websites'],
models: ['Website'],
views: ['WebsiteList'],
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
});
JSON data file sites.json
{
success: true,
sites: [
{id: 1, name: 'google', url: 'www.google.com'},
{id: 2, name: 'yahoo', url: 'www.yahoo.com'}
]
}
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.