View Full Version : Lightbox working with an Ext 3.2 EditGrid

19 Aug 2010, 3:39 PM

I am having a problem getting lightbox to displaying an image in a modal window using an ext editgrid. I was successful doing this using the extgrid implemented with cold fusion. I then went to exjs and built an ext grid to display the same data and images. I am using the exact same image cell renderer and javascript libraries.

However, when I click on my image to initiate the lightbox event, I am sent to the the url of the image location rather than being presented with a modal window that displays the image.

I have all the correct javascript libraries - they are found per firebug. I can not detect anything else that is wrong.

Has anyone successfully implemented lightbox with an extgrid displaying images in the grid?


19 Aug 2010, 10:42 PM
Not much I can say about that without being able to se the code...

21 Aug 2010, 4:47 AM
I am using the lightbox2 plugin by Lokesh Dhakar. I believe I am following the correct steps:
- including the correct javascript libraries in the correct order (yes I have experimented with this)
- included the css and ensured the button images are in the correct location
- included a rel="lightbox" tag in with my anchor tag <a rel="lightbox" href=....
- included an onload event to start lightbox

I have this working with similar code using a cfgrid (which is really an ext grid) instead of an ext grid

Here is the source:

<title>Ext JS Grid with ColdFusion</title>
<cfsetting showdebugoutput="false">

<!-- javascript libraries needed for lightbox-->
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }

<script type="text/javascript">
function imageCellRenderer(data,cell,record,row,col,store){
//return if data is empty
if (data == '') {
return "";
//return if data is null
} else if (data == null) {
//cell.css = "redcell";
return "";}
else {
//format image for rendering";
return String.format('<a rel="lightbox" href="UploadImages/{0}" title="my caption" alt=""><img src="images/UploadImages/{0}" width="100 height="80" border="0" alt=""> </a>',data)};


<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script src="adapter/ext/ext-base.js"></script>
<script src="js/ext-all.js"></script>

<script src="editgridItemTable.js"></script>

<!-- attempt to position grid buttons-->
<style type="text/css">
/*.x-btn-td {padding-left:200;}*/
/*.x-btn button {margin-left:100;}*/
.x-btn-mc {text-align:center;}
.x-btn-mc {div style=text-align:center;}
.x-btn-mc {margin-left:100; }
.ext-gen28 {margin-left:100px; position:relative;}
<!---.x-btn-mc {margin-left:200; }--->
<!---.x-btn-bc {padding-left:200;}--->

<!--style the grid to allow for text wrapping-->
<style type="text/css">
.x-grid3-col-0{text-align:right; white-space:normal !important;}
.x-grid3-col-1{text-align:left; white-space:normal !important;}
.x-grid3-col-2{text-align:left; white-space:normal !important;}
.x-grid3-col-3{text-align:left; white-space:normal !important;}
.x-grid3-col-4{text-align:right; white-space:normal !important;}
.x-grid3-header-offset {width: auto;}
.x-grid3-row td {white-space:normal !important;}
.x-grid3-hd {white-space:normal !important;}
.x-grid3-header-offset {width: auto;}
.x-grid3-hd-0-0 {white-space:normal !important;}
.x-grid3-hd-0-1 {white-space:normal !important;}
.x-grid3-hd-0-2 {white-space:normal !important;}
.x-grid3-hd-0-3 {white-space:normal !important;}
.x-grid3-td-1{white-space:normal !important;}
.x-grid3-td-2 {white-space:normal !important;}
.x-grid3-td-3 {white-space:normal !important;}

<cfset ajaxOnLoad("initLightbox")>
<script type="application/x-javascript">
<div id="editgrid"></div>
<div class="images">
<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>

21 Aug 2010, 6:32 AM
My original problem was that I could not get the lightbox effect to display when I clicked on the image in the grid. So I ensured that I had all the up-to-date js libraries needed for lightbox and I am now getting the modal effect! However, I just get the loading image meaning the image never displays.

So, I added an image above the grid and an image underneath the grid to test lightbox. The image above the grid displays properly with the full lightbox effect. The image below the grid exhibits the same behavior as the image in the grid - you just get the loading modal dialog with no image.

So, it appears that the lightbox libraries are colliding with the ext libraries. How do you debug this stuff?


21 Aug 2010, 8:40 AM
I finally got it working. This was something simple. My href was "Uploadimages" but it should have been "images/Uploadimages" just the same the as my img src. Thanks for your initial response though, it got me re-energized to look at this again.