ExtJS Grid Cell Rendered with Mixed Image and Text

Rendering

To render mixed image and text in ExtJS grid, I found the following two approaches

• Implement custom renderer, return a value like this 

      <img src="..."/>you text content

• Use CSS to add background image to the cell (see Reference)

Problem: misaligned columns in the first approach

However, when I examine a grid with "locked" columns, I starting to see problem in the first implementation. Often times, the locked columns and floating columns are misaligned. Turns out image tag in the cell will cause grid to adjust row hight. However, ExtJS does not adjust fixed columns and floating columns together. So, if there is image in fixed column only, it will frequently make it taller than the floating columns, thus causing misalignment. To solve this problem, I added the following style to the image tag:

   margin-top: -4px;

   margin-bottom: -4px;

Event Handling

The image in the cell is usually an active component. In order to intercept the click event, I found two good approaches, again.

• In JS code, hookup event handlers to the image component, and fire event from there. Refer to implementation of ActionColumn (ExtJS source grid\column\Action.js)
• Change the selType of grid to 'cellmodel', and add select event listener

Reference

Displaying an Image Inside an Ext JS GridPanel Cell http://miamicoder.com/2009/displaying-an-image-inside-an-ext-js-gridpanel-cell-part-2/

New Years Resolution: do not update to .NET 4.5.1

Ok, just kidding. Should not be a new year's resolution. But serious, it was causing me nightmares over the holiday season. All of a sudden, several clients starting to have problem using an ActiveX control in IE (to be precise, ChartFx 6/7 ActiveX controls). After some really boring days researching, installing/uninstalling/reinstalling and testing, I finally found out .NET 4.5.1 was causing the problem.

I have no idea why it's a problem, but I know if I uninstall 4.5.1 and rollback to 4.5.0, then all the problems are gone. So, it's official, .NET 4.5.1 update is banned.

Problem with Intranet Web Site Content?

Did your Intranet web application users complain about your website not working at all? Here is one of the root cause: IE running in emulation mode of older browsers. It will mess up some JavaScript functions that relies on relative new features.

Symptoms

• Your clients use IE
• Only have problem when using Intranet like URLs
• JavaScript console shows weried error messages like: 'JSON' is undefined
• IE 11 Emulation (or IE10 document mode) is showing IE 7 or older or even quirk mode (however, if you see Edge then the solution I provide below won't help you)
• DOM view showing your nice HTML5 doc type being commented out

IE commented out doctype

Root Cause

IE option "Display intranet sites in Compatibility View" forced it to emulate behavior of older browser for Intranet web applications, regardless what is in the web page's header.

Solution

This worked for me: change IIS HTTP header

• In IIS admin, go to the folder or file that you want to enable IE "Edge" mode
• Click "HTTP Response Headers"
• Click "Add", and type Name: X-UA-Compatible, Value: IE=edge

HTTP Header that will fix the problem