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

时间:2013-02-26 12:18:57

标签: javascript extjs extjs4 extjs-mvc

我的网格布局中有一个动作栏图标,点击图标我打开了一个窗口表单面板。 点击我正在构建一个fieldset dynamicllay的图标。 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.');
                    }
                })
            }

        }]
    })

}

我得到的问题是我希望按钮的处理程序接受每个循环所带来的动态值。但是每个按钮的onclick它给出相同的值(循环的第一个值)。那么如何使它动态化,这样我就可以动态地为每个图像传递参数。

1 个答案:

答案 0 :(得分:1)

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

您可以这样做:

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