Thursday, May 3, 2012

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

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.

See the following for the code:

Creating a dynamic TabPanel that contains dynamic GridPanels (Ext JS 4.x)

This was in a case where the data needed to be displayed in a tab for each category, so tab A had grid A, tab B had grid B, and so on. The TabPanel was also only displayed in certain cases, which meant that the TabPanel itself also had to be dynamic.

The issue with this is that the data within each of the grids on each tab was not refreshing when a new tab was selected. In order to get it looking right I ended up using a tab listener that refreshed the data in the grid on each tab selection. So if you selected Tab A the GridPanel in Tab A would have its store cleared and then reloaded.

See the following for the code:

Wednesday, May 2, 2012

Adding columns dynamically to a GridPanel (Ext JS 4.x)


There were examples on how to do this, just none of which I could get to work in Ext JS 4. Apparently you are not supposed to use the headerCt objects and with good reason, but I needed something that worked.

Tuesday, May 1, 2012

Calculating the scrollbar height of an iFrame (Ext JS 4.x)


The underlying problem was that I needed to drive the scrollbar on an iframe, but it was not entirely clear how to get the height of the scrollbar. I ended up having to derive it, and also found that the actual height is not set until some point after the content is loaded into it. There is an iframe onload event, but the scrollbar height is set at some point after that.