Results 1 to 2 of 2

Thread: How to add link in a grid column

  1. #1

    Question How to add link in a grid column

    Hi, i have to add two link in two column of a grid, and every click of those link different dialog will be opened. would any please tell me how it can be done?

  2. #2

    Default

    Hi,

    here some example:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title>ExtJs - Grid - Links</title>
      
      <!-- Include YUI utilities and Ext: -->
      <script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/yui-utilities.js"></script>
      <script type="text/javascript" src="web/js/ext1_1_1/adapter/yui/ext-yui-adapter.js"></script>
      <script type="text/javascript" src="web/js/ext1_1_1/ext-all-debug.js"></script>
    
      <!-- Include Ext stylesheets here: -->
      <link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ext-all.css">
      <link rel="stylesheet" type="text/css" href="web/js/ext1_1_1/resources/css/ytheme-vista.css">
        
      <!-- Init namespace -->
      <script type="text/javascript">
        Ext.onReady(function() {
            var myDiv = Ext.DomHelper.append(document.body, '<div></div>', true);
            
            var myDialog = new Ext.LayoutDialog(myDiv, {
                    height   : 300,
                    title    : 'Grid - Links',
                    width    : 400,
                    center: {}
                });
            
            //--- init grid BEGIN --------------------------------------------------
            
            var myGridDiv = Ext.DomHelper.append(document.body, {
                    tag : 'div'
                }, true);
        
            var myGridData = [
                    ['Lil', 'DingDing', 'http://www.google.de'],
                    ['Karl', 'Kota', 'http://www.google.fr'],
                    ['Filo', 'Fili', 'http://www.google.co.uk']
                ];
            
            var myGridStore = new Ext.data.Store({
                    proxy: new Ext.data.MemoryProxy(myGridData),
                    reader: new Ext.data.ArrayReader({}, [
                            {name: 'first_name'},
                            {name: 'last_name'},
                            {name: 'link'}
                        ])
                });
            myGridStore.load();
            
            var myGridCM = new Ext.grid.ColumnModel([{
                        dataIndex : 'first_name',
                        header    : 'First Name',
                        id        : 'first_name'
                    }, {
                        dataIndex : 'last_name',
                        header    : 'Last Name',
                        id        : 'last_name'
                    }, {
                        dataIndex : 'link',
                        header    : 'Link',
                        id        : 'link',
                        renderer  : function(myValue, myDontKnow, myRecord) {
                                return '<a href="'+myValue+'">'+myValue+'</a>';
                            }
                    }]);
            
            var myGrid = new Ext.grid.Grid(myGridDiv, {
                    autoExpandColumn : 'link',
                    cm             : myGridCM,
                    ds             : myGridStore,
                    enableDragDrop : true
                });
            
            var myGridDZ = new Ext.dd.DropTarget(myGrid.container, {
                    ddGroup    : 'myDDGroup',
                    notifyDrop : function(myDragSource, myEvent, myData) {
                            alert('drop into grid');
                        }
                });
            
            myGrid.render();
            
            //--- init grid END ----------------------------------------------------
    
            var myGridPanel = new Ext.GridPanel(myGrid, {
                    fitToFrame : true
                });
            
            var myLayout = myDialog.getLayout();
            myLayout.beginUpdate();
            myLayout.add('center', myGridPanel);
            myLayout.endUpdate();
            
            myDialog.show();
        });
      </script>
    </head>
    <body>
    </body>
    </html>
    I hope this will help you

    cowabunga!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •