Are your SSL web pages plagued by the browser warning “This page contains both secure and nonsecure items. Do you want to display the nonsecure items?“

This is a common error that occurs when some element on a secure web page (one that is loaded with https:// in the address bar) is not being loaded from a secure source. This usually occurs with images, frames, iframes, Flash, and JavaScripts.

How to solve this “issue” if the system was developed with ExtJS?

There is a property in Ext class named BLANK_IMAGE_URL:

“URL to a 1×1 transparent gif image used by Ext to create inline icons with CSS background images. (Defaults to “http://extjs.com/s.gif” and you should change this to a URL on your server).”

Following are given a screenshot from Firebug when I loaded an application which uses ExtJS:

The solution is very simple. You need to point BLANK_IMAGE_URL to “s.gif” image that is in your application’s directory.

For example:  if your application’s name is “extjs-crud-grid“, you should point it to:

Ext.onReady(function(){
     Ext.BLANK_IMAGE_URL = '/extjs-crud-grid/ext-3.1.1/resources/images/default/s.gif';
)};

extjs-crud-grid application’s directory:

Hope it helped!

Happy coding!