ExtJS: Stop the “page contains secure and nonsecure items” Warning
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! 
very helpful, thanks!