Tuesday, October 2, 2012

ExtJs 4 Grid display URL or hyperlink (href)

5:02 PM No Comments

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

0 comments:

Post a Comment