0

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

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

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

4

3 回答 3

0

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

于 2009-02-06T19:21:59.653 回答
0

我实际上最终解决了这个问题。相当令人费解，如果我能提供帮助的话，我就不会再让自己参与 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
  }
}

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

于 2009-02-21T04:16:51.430 回答
0

试试这个 ：

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

你在这里:)

于 2010-09-15T14:00:17.060 回答