ExtJS4 - autoEl width and height property

Question

Good day, I am building a web app using ExtJS4 and I want to put a href on an image.

I have an image defined as such:

            {
                xtype: 'image',
                x: 87,
                y: 180,
                autoEl: {
                    tag: 'a',
                    href: 'resources/promoStubs/eventTalkPromo.jpg',
                    target: '_blank',
                    x: 87,
                    y: 180,
                    height: 30,
                    width: 30,
                    length: 30,

                },
                height: 30,
                itemId: 'paw1',
                width: 30,
                src: 'resources/graphics/pawpromo.png'
            },

I got the idea from this jsfiddle example

However, what happens is that the image is very large and the width and height properties are not applied at all to the image. Any ideas on how to specify width and height in an image with an autoEl property?

Any help is appreciated. Thanks.

Sreek521 Sreek521 · Accepted Answer · 2015-01-25T10:31:27

Please add an imgCls attribute to your xtype, like shown below and write a css class for the same. Here is the updated jsfiddle

Ext.onReady(function () {
    Ext.create('Ext.Img', {
        renderTo: Ext.getBody(),
        src: 'https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png',

        imgCls:'yourCSScls',


        //defines the element that wraps around the image
        autoEl: {
            tag: 'a',
            href: 'http://www.google.com',
            target: '_blank'

                   //add any other attributes to the 'a' tag as needed
        }
    });
});

Hope this helps you.

ExtJS4 - autoEl width and height property

1 Answers