Question

我有一个包含文字和图片的专栏。我正在尝试向图像添加事件。 id是动态分配的。当我尝试绑定事件时，Ext.get（“id”）返回null。我可以看到渲染器在viewready之后运行，因为屏幕很清爽。我应该尝试不同的DOM事件吗？

  {
        text: 'My Thing',
        flex: 6,
        sortable: true,
        width: 40,
        dataIndex: 'myThing',
        renderer: function (val, metaData, record, rowIdx, colIdx, store, view) {
           {console.log(evname, arguments);});
                var returnStr = '<div>' + val + '</div>' + '<img id="image_' + record.data.myItem.id + '" src="/myThing/img/icon.png"/>';
                console.log(returnStr);
                return returnStr;
        }


console.log('Im here');
        for(var j=0; j<items.length; j++){
            console.log(j)
            var itemDesc = 'image_' + items[j].data.myItem.id;
            var itemDescStr = items[j].data.lineItem.myItem.id;
            console.log('itemDesc' + itemDesc)
            console.log(Ext.get(itemDesc));
            (function(itemDescStr) {
                Ext.get(itemDesc).on('click', function(e,t){
                    console.log('image '+ itemDescStr + ' clicked');
                });
            })(itemDescStr);
        }

“Ext.get（itemDesc）”返回null。

编辑：

我的临时解决方案是：

 {
        text: 'My Thing',
        flex: 6,
        sortable: true,
        width: 40,
        dataIndex: 'myThing'
        renderer: function (val, metaData, record, rowIdx, colIdx, store, view) {
            var returnStr = '<div><img id="image_' + record.data.myItem.id;
                returnStr = returnStr + '" src="/myApp/resources/app/img/myIcon.gif" ';
            returnStr = returnStr + 'onclick="Ext.foo(' + rowIdx + ')" />';
            returnStr = returnStr + ' ' + val + '</div>';
            return returnStr;
        }
    },

Answer 1

不要这样做，使用事件委托：

Ext.onReady(function() {

    var grid = new Ext.grid.Panel({
        width: 400,
        height: 400,
        renderTo: document.body,
        store: {
            fields: ['name'],
            data: [{
                name: 'Foo'
            }, {
                name: 'Bar'
            }]
        },
        columns: [{
            dataIndex: 'name',
            renderer: function(v) {
                return Ext.String.format('<div class="x">{0}</div><div class="y">{0}</div><div class="z">{0}</div>', v);
            }
        }],
        listeners: {
            cellclick: function(view, el, cellIdx, record, row, rowIdx, e) {
                if (e.getTarget('.x')) {
                    console.log('x');
                } else if (e.getTarget('.y')) {
                    console.log('y');
                } else {
                    console.log('neither');
                }
            }
        }
    });

});

我应该使用ext.js中的另一个事件吗？

1 个答案: