在EXTjs 4中动态添加按钮单击事件

Question

我的网格布局中有一个操作列图标，单击该图标，我打开了一个窗口表单面板。 然后单击该图标，我将构建一个fieldset动态布局。 字段集包括按钮和图像。

//Below is the code
for (var j = 0; j < productPictures.length; j++) {
    var values = productPictures[j].value;
    var idPic = productPictures[j].idProductPicture;
    alert(idPic);
    fieldset.add({
        xtype: 'container',
        layout: 'hbox',
        items: [{
            xtype: 'box',
            autoEl: {
                tag: 'img',
                src: '/files/product/' + idProduct + '/picture/100x75/' + values,
                height: '50px',
                width: '50px'
            }
        }, {
            xtype: 'button',
            name: 'remove' + idPic,
            width: 200,
            text: 'Remove',
            handler: function () {
                alert(idPic);
                Ext.Ajax.request({
                    url: '/admin/productpicture?id=' + idPic + '&memberId=' + idMember + '&idProduct=' + idProduct,
                    method: 'DELETE',
                    success: function (response) {
                        Ext.Msg.alert('Status', 'Image Deleted succesfullly.');
                    },
                    failure: function () {
                        Ext.Msg.alert('Status', 'There is an error.');
                    }
                })
            }

        }]
    })

}

我遇到的问题是我希望按钮的处理程序接受每次循环时都带有的动态值。但是，在每个按钮上单击时，其给出的值是相同的（循环的第一个值）。因此如何使其动态化，这样我可以动态地为每个图像传递参数。

Answer 1

您遇到了范围界定问题。 您需要做的是将变量保存在按钮配置中。

您可以执行以下操作：

{
    xtype: 'button',
    name: 'remove' + idPic,
    idPic: idPic,
    width: 200,
    text: 'Remove',
    handler: function (button) {
        alert(button.idPic);
        //the rest...
    }
}