0

我在 extJS 上有以下 EditorGridPanel：

http://jsfiddle.net/VDFsq/1/

Ext.onReady(function () {
  var myData = [[ '<SPAN STYLE=\"text-align:Left;font-family:Segoe UI;font-style:normal;font-weight:normal;font-size:12;color:#000000;\"><P STYLE=\"font-family:Arial;font-size:16;margin:0 0 0 0;\"><SPAN><SPAN>HTML </SPAN></SPAN><SPAN STYLE=\"font-weight:bold;color:#FF0000;\"><SPAN>FORMAT</SPAN></SPAN><SPAN><SPAN> TEST<BR />TEST</SPAN></SPAN></P></SPAN>', "lisa@simpsons.com", "555-111-1224"],
                [ 'Bart', "bart@simpsons.com", "555-222-1234"],
                [ 'Homer', "home@simpsons.com", "555-222-1244"],
                [ 'Marge', "marge@simpsons.com", "555-222-1254"]];

  var store = new Ext.data.SimpleStore({
    fields:[ {
      name: 'name'
    },
    {
      name: 'email'
    },
    {
      name: 'phone'
    }],
    data: myData
  });
  var grid = new Ext.grid.EditorGridPanel({
    renderTo: 'grid-container',
    columns:[ {
      header: 'Name',
      dataIndex: 'name', 
        width:200
    }
    ],
    store: store,
    frame: true,
    height: 240,
    width: 500,
      enableColumnMove :false,
            stripeRows: true,
            enableHdMenu: false,
            border: true,
            autoScroll:true,
            clicksToEdit: true,
    title: 'HTML in Grid Cell',
    iconCls: 'icon-grid',
      sm: new Ext.grid.RowSelectionModel({
      singleSelect: true
    })
  });

    grid.on({
        celldblclick: function() {alert(1);}
        });
});

问题是，当gridCell包含HTML数据（这是我的情况）时，当您双击带有html的单元格时，网格不会触发事件celldblclick。

在我的应用程序中，我需要在网格中显示那种 html。

如何解决这个问题？无论如何要将事件从 html 冒泡到网格？

谢谢

4

1 回答 1

1

结构内部深处的 dom 树似乎存在一些限制。我认为将 html 放入网格不是一个好主意——如果你能统一它的结构——可能模板会更有用。

试试这个而不是你的 HTML：

 "<div ondblclick=\"alert('1!')\">1<div ondblclick=\"alert('2!')\">2<div ondblclick=\"alert('3!')\">3<div ondblclick=\"alert('4!')\">4</div>3</div>2</div>1</div>"

事件继承在这个 HTML 中工作得很好，但在你的 EXt 示例中只工作 2 层。

注意：如果你尝试

 grid.on('rowdblclick', function(eventGrid, rowIndex, e) {
     console.log('double click');
 }, this);

您不会遇到问题（但是，显然，您可以以这种方式仅对行进行 dblclick）

于 2013-04-10T14:48:36.317 回答