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

4 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
  2. Awesome, the renderer worked perfect with Architect.

    ReplyDelete