ExtJS:窗口中选项卡中网格中的AJAX链接

事实上,我最终解决了这个问题。非常复杂,如果我能帮助的话,我不会再参与ExtJS了。

因此,我的链接相当直截了当:

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

其中{product_id}来自从Ajax查询加载的JSON数据。这一点很重要,如下所示。

然后在父组件中,我将事件附加到网格本身。

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

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

试试这个:

// 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
});

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

渲染器的定义如下:

//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>';
}

给你:)

如果希望将链接添加到网格本身,可以在ColumnModel中指定另一列,并对该列应用渲染器。渲染器的功能是返回要应用于该单元格的格式化内容,这些内容可以根据列的dataIndex值(您应该有一个dataIndex,即使它是另一列的副本)和该行的记录进行定制。

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

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

如果要在RowExpander中向扩展区域添加链接,则必须将渲染写入用于扩展内容区域的模板中。