ExtJS: AJAX links in a grid in a bookmark in a window
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 each grid item (I am currently using advanced elements with HTML content via RowExpander) that will make an AJAX call and open another tab.
source to share
I ended up working on it. Quite confusing, and let me say that I won't get myself involved in ExtJS anymore if I can help it.
I am using Grid.RowExpander to lay out HTML inside Grid using XTemplate. So my links are pretty straight forward:
<a href="#" class="add_cart_btn" id="{product_id}" onclick="return false;">Add to Cart</a>
Where {product_id} is the JSON data loaded from the Ajax request. This is important, as you will see below.
Finding these events is much more difficult ... The grid can tell you the row, but I really needed to grab items from the table inside the grid row. Long story, but I inherited some of this code.
Then in my parent component, I bound the event to the grid itself.
this.on({
click :{scope: this, fn:this.actionGridClick}
});
To find the actual link, I'm looking 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 useful except in my case, but it's here for posterity in case anyone needs something like this in the future.
source to share
If you want to add a reference to the grid itself, you can specify a different column in the ColumnModel and apply the renderer to the column. The function of the renderer is to return the formatted content to be applied to that cell, which can be adapted according to the dataIndex value of the column (you must have the dataIndex even if it is a duplicate of another column) and write that row.
function myRenderer(value,meta,record,rowIndex,colIndex,store){
// Do something here
}
Your link may have a click event to call the method by opening another tab
function myClickEvent(value1, value2){
var myTabs = Ext.getCmp('myTabPanel');
myTabs.add(// code for new tab);
}
If you add links to your extended content area, in the RowExpander, you will have to write the rendering to the template that you use for your extended content area.
source to share
Try the following:
// 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 follows:
//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 :)
source to share