Question

我正在使用ExtJS开发我的第一个项目。

我有一个数据网格位于窗口内的Tab中。

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

Answer 1

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

Answer 2

我实际上最终解决了这个问题。非常复杂，我只想说如果我能帮助它，我将不再参与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
  }
}

除了在我的情况下，这对我来说并不是很有帮助，但如果有人在将来需要类似的东西，那么它就是后代。

Answer 3

试试这个：

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

你在这里：）

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

3 个答案: