lunes, 20 de agosto de 2012

Error on blank images with EXT JS (Sencha) and Internet Explorer (IE 6-8)

Is very normal to get errors in your Web Page designed with ExtJs if you use Internet Explorer.
For example, there is a typical error when you use HTTPS.
When you are using a secure HTTP server IE will show you an error error image over each image link or action image. This is a blank image and i am not sure the utility but you will see your image and over it another one like an error.

To solve this issue you must to add to your code this line 

Ext.BLANK_IMAGE_URL = '[path-to-ext]/resources/themes/images/default/tree/s.gif'; 

You must to add this after  OnReady. The result is something like that:

Ext.onReady(function() {
        Ext.BLANK_IMAGE_URL = '[path-to-ext]/resources/themes/images/default/tree/s.gif'; 
        [Your Code]
}

Good Luck

miércoles, 1 de agosto de 2012

Using Ext JS 3 to create a windows Iframe

This example is very easy.
All you need are few lines to get a very nice floating frame in your web.

Have you download Ext Js?
Let´s do it: Click here to get it

After that let´s write code.
Firstly you have to add references to de JS files. You need only 2 references because this is very basic example

<head>
...
<script type="text/javascript" language="javascript" src="../../includes/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" language="javascript" src="../../includes/ext-3.3.1/ext-all.js"></script>
...
</head>

Now you must to add a reference to CSS file

 <head>
...
<link rel="Stylesheet" href="../../includes/ext-3.3.1/resources/css/ext-all.css"/>
...
</head> 

Note: you can add ext-all.css or one of other which 
represents diferents themes (blue, gray, black...)


Now in your code add this lines:

<body>
...
<div id="hello-win" class="x-hidden"></div>
...
</body>

And finishing the script code.

<script language="javascript" type="text/javascript">
function ventanaCargaFicheros(p) {
        var win;
        if (!win) {
            win = new Ext.Window({
                title: 'Subida de ficheros',
                applyTo: 'hello-win',
                layout: 'fit',
                width: 500,
                height: 350,
                closeAction: 'close',
                buttons: [{ text: 'Cerrar', handler: function() { win.close(); } }],
                keys: [{ key: 27, /* hide on Esc*/fn: function() { win.close(); } }],
                html: '<iframe src=SubidaFichero/index.aspx?P=' + p + ' style="width:485px;height:283px;"></iframe>'
                });
            }
            win.show(this);
    }
</script>


Done all before you have an windows iframe, now you must to decide how to lunch it, for example whith a button, with a link there are many diferents ways to do that.

<a href="#" onclick="ventanaCargaFicheros(params);">window</a>