ExtJS：窗口中选项卡中网格中的 AJAX 链接答案

【问题标题】：ExtJS: AJAX Links in Grid in Tab in WindowExtJS：窗口中选项卡中网格中的 AJAX 链接
【发布时间】：2009-01-06 02:05:29
【问题描述】：

我正在使用 ExtJS 进行我的第一个项目。

我有一个位于窗口内的选项卡内的数据网格。

我想为网格的每个元素添加一个链接或按钮（我目前正在通过 RowExpander 使用带有 HTML 内容的扩展元素），这将进行 AJAX 调用并打开另一个选项卡。

【问题讨论】：

您可能想查看“动态/AJAX 选项卡示例”。你的具体问题是什么？

标签： javascript extjs

【解决方案1】：

我实际上最终解决了这个问题。非常令人费解，如果我能提供帮助，我就不会再让自己参与 ExtJS 了。

我正在使用 Grid.RowExpander 使用 XTemplate 将 HTML 放置在 Grid 中。因此，我的链接相当简单：

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

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

查找这些事件要困难得多...网格可以告诉您行，但我实际上需要从网格行内的表格中获取元素。说来话长，但我继承了其中的一些代码。

然后在我的父组件中，我将一个事件附加到 Grid 本身。

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

为了找到实际的链接，我在目标中搜索具有正确类的链接。在这种情况下，“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
  }
}

除了我的情况外，这不是很有帮助，但是如果将来有人需要类似的东西，它就在这里供后代使用。

【讨论】：

【解决方案2】：

试试这个：

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

你在这里:)

【讨论】：

【解决方案3】：

如果您希望将链接添加到网格本身，您可以在 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 中将链接添加到您的扩展区域，那么您必须将渲染写入您用于扩展内容区域的模板中。

【讨论】：