Blog Archive

ExtJs 4 Grid display URL or hyperlink (href)

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;
    }


ExtJs 4 Grid Cell display URL link
ExtJs 4 Grid Cell display URL link
ExtJs 4 Grid Cell display URL link





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'}
    ]
}

2 comments :

  1. Whoa! You seriously crushed it with this post. Everything you need, straight to the point, code is broken out just like mine and boom, worked first time! Thank you!

    ReplyDelete