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

<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>

Now you must to add a reference to CSS file

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

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:

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

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>'

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