CODEWITHSUNDEEP
javascriptextjsextjs4extjs-mvc
anupkumar
anupkumar

Reputation: 357

adding buttons click event dynamically in EXTjs 4

I have a action column icon in my grid layout ,with the click of icon I have opened a window form panel. And on click of the the icon I am building a fieldset dynamicllay. Fieldset includes buttons and images.

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

        }]
    })

}

The problem that i am getting is i want the handler of buttons to accept dynamic values that is coming with every looping.But onclick of each button its giving the same value(1st value of loop).So how to make it dynamic,so that I can pass parameters dynamicallly for every images.

Upvotes: 1

Views: 2727

Answers (1)

Johan Haest
Johan Haest

Reputation: 4421

You're experiencing a scoping issue. What you need to do is hold the variable in the button config.

You can do something like this:

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

Upvotes: 1

Related Questions