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>







No hay comentarios:

Publicar un comentario