parallax background

Making a clickable image and/or making a clickable container (Ext JS 4.x)

Digital Transformation Group LinkedIn
Creating a dynamic TabPanel that contains dynamic GridPanels (Ext JS 4.x)
May 3, 2012
Digital Transformation Group LinkedIn
Custom themes in Ext 4.1 not generating images through slicing
July 5, 2012

I had a case where I wanted to be able to click on an image and have it execute a transition within the Ext JS MVC framework. I originally looked into just using a regular button, but ran into several styling issues and most importantly a problem where the large image was being clipped. Due to a time crunch I threw a click listener on a container and set the container’s background using CSS.

JS:

...
{ 
       xtype: 'container',
       width: 290,
        height: 248,
        cls: 'button-single-report',
        listeners: {
         afterrender: function (comp) {
                 var element = comp.getEl();
                        var me = this;
                        element.on('click', function() {
                              console.log('this container was pressed');       
                        });
                },
}
...

CSS File:

.button-single-report {
  background-image: url('../images/single_report.jpg') !important;
  background-repeat: no-repeat;
}

 

jvalentino
jvalentino
I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

Leave a Reply

Your email address will not be published. Required fields are marked *

//]]>