View Full Version : Lightbox w/Iframe

3 Nov 2007, 1:52 PM
Ext.ux.lightBox = function(url, title, userConfig)
//Default config
var config = {
width: 500,
height: 500

//User config
for(i in userConfig)
config[i] = userConfig[i];

//Create dialog container
var dialogCont = Ext.DomHelper.append(document.body, {tag: "div", id: "lightBoxCont"});

//Create Dialog
var dialog = new Ext.LayoutDialog(dialogCont,{
autoCreate: true,
closable: true,
syncHeightBeforeShow: true,
modal: true,
width: config.width,
height: config.height,
fixedcenter: true,
shadow: true,
resizable: false,
proxyDrag: true,
title: title,
center: {autoScroll: false}

//Delete containers on hide
dialog.on("hide", function(){
Ext.select("#lightBoxCont, #lightBoxFrame").remove();

//Hide dialog when ESC key is pressed
dialog.addKeyListener(27, dialog.hide, dialog);

var layout = dialog.getLayout();

var iframe = Ext.DomHelper.append(document.body, {tag: "iframe", frameBorder: 0, src: url, id: "lightBoxFrame"})
var center = layout.add("center", new Ext.ContentPanel(iframe, {fitToFrame: true}));


//Show dialog

13 Mar 2008, 3:38 AM
HiI am new to EXTJS, so im a little confused as to how it all works.I have figured out the basics, and I stumbled upon users extentions.Id really like to use the light box extention, but im wondering how to impliment it.In which script do I stick the code below.Iv been through most of the script, and cant find a ext.ux class, does anyone know where it is?Any help will be appreciatedThanks in advanceHave a good dayCheers