ExtJS: AJAX Links in Grid in Tab in Window

Question

I am working on my first project using ExtJS.

I have a Data Grid sitting inside a Tab that is inside a Window.

I want to add a link or button to the each element of the grid (I am using extended elements at the moment with HTML content through the RowExpander) that will make an AJAX call and open another tab.

Answer 1

If you are looking to add the link to the grid itself, you can specify another column in your ColumnModel and apply a renderer to the column. The function of the renderer is to return formatted content to be applied to that cell, which can be tailored according to the value of the dataIndex of the column (you should have a dataIndex, even if it is a duplicate of another column), and the record of that row.

function myRenderer(value,meta,record,rowIndex,colIndex,store){ // Do something here }

Your link might have a click event to call a method, opening another tab

function myClickEvent(value1, value2){ var myTabs = Ext.getCmp('myTabPanel'); myTabs.add(// code for new tab); }

If you're adding the links to your expanded area, within the RowExpander, then you'll have to write the rendering into the Template you're using for your expanded content area.

Answer 2

I actually worked this out in the end. Pretty convoluted, and let's just say I will not be involving myself with ExtJS again if I can help it.

I am using the Grid.RowExpander to place HTML inside the Grid using XTemplate. My links are therefore fairly straight forward:

<a href="#" class="add_cart_btn" id="{product_id}" onclick="return false;">Add to Cart</a>

Where {product_id} is from JSON data loaded from an Ajax query. This is important, as you will see below.

Finding these events is much more difficult ... the Grid can tell you the row, but I actually needed to grab elements from a table inside the grid row. Long story, but I inherited some of this code.

Then in my parent component I have attached an event to the Grid itself.

this.on({    
  click :{scope: this, fn:this.actionGridClick} 
});

To find the actual link, I search for the link in the target that has the correct class. In this case "add_cart_btn"

actionGridClick:function(e) {
  // Looking for a click on a cart button
  var addCartEl = Ext.get(e.getTarget('.add_cart_btn'));   
  if(addCartEl) {
    productID = addCartEl.id;
    // Once we have the ID, we can grab data from the data store
    // We then call to the server to complete the "add to cart" functionality
  }
}

Mpst of this is not very helpful except in my case, but it's here for posterity if anyone needs something similar in the future.

Answer 3

Try this :

// create grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: 'NAME', width: 170, sortable: true, dataIndex: 'name'},
        {header: 'PHONE #', width: 150, sortable: true, dataIndex: 'phone'},
        {header: 'BIRTHDAY', width: 100, sortable: true, dataIndex: 'birthday',
            renderer: Ext.util.Format.dateRenderer('d/m/Y')},
        {header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email',
            renderer: renderIcon }
    ],
    title: 'My Contacts',
    autoHeight:true,
    width:600,
    renderTo: document.body,
    frame:true
});

See this :

{header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email', renderer: renderIcon }

the renderer will be defined as this :

//image path
var IMG_EMAIL = '/gridcell-with-image/img/email_link.png';

//renderer function
function renderIcon(val) {
    return '<a href="mailto:' + val + '">'+ '<img src="' + IMG_EMAIL + '"> ' + val  +'</a>';
}

And here you are :)