Thursday, July 22, 2010

Table Pivoting using ExtJs




















Hello,

Recently, I have completed a project in which I have implemented Table Pivoting using ExtJs.
Please refer the above image. Here data will be displayed in a tabular format. Data will be fetched using real time Ajax Request. Axe locations are also stored in a database. For example, here year and country are the horizontal axes and gender, and area are the vertical axes. Axe location will be fetched from a database. Data will be stored in JSON object and axes location will be stored in JavaScript array.

User has all the freedom of changing location of axes and swapping of axes as can be seen from image below. As user change location of axes data will be automatically reordered as per new format.
















Furthermore, user can swap one axe with any axes from horizontal or vertical locations. Data will be reordered as per new format.

















Furthermore, user can save new layout so next time when a user views this report save format will be applied to table. This component was built to support a business report application. Where a user can view reports in different formats. User can save preferences to a database.

This is implemented using ExtJs panel with a table layout. All the pivoting functions are depended on only three things.

1) Data which is stored in JSON object.
2) Vertical and horizontal axes array.
3) Value axes name.

Using above three variables and ExtJs panel this complete component has been built.
Well, I cannot display complete code here. However, I will explain certain functions here.

How table is created?

This was the first challenge for me when I started this project. Because this is the code which is going to be more crucial for all the functions. When you use table layout in ExtJs panel, first you have to specify a number of columns. After this when you add items to the panel ExtJs will automatically position to correct location. For example, if you specify totalcolumns=2 and add three items to the panel. First two items will be on row 0 and third item will be in row one column 0.

So total number of columns is calculated using a number of vertical axes and total number of values in horizontal axes. After this ExtJs panel object is created. First of all, values of horizontal axes and vertical axes will be added in panel. Following is the code for it.

panel.add({height:40,html:uniqueHorizontalAxesValues[i][2][j],colspan:totalcolspan});

panel.add({height:40,html:uniqueVerticalAxesValues[i][2][j],colspan:totalcolspan});

With this all the necessary controls are added. Change and Save layout button, Column to Row/Row to Column buttons, swap axes split button, etc.

After these all controls are added, data will be added to the table.

How swapping and pivoting function works?

This is quite simple. All we have to do is just change arrays of vertical and horizontal axes and regenerate the table. For example, if a user chose to swap gender with area. Just remove gender from array and place area instead of it and remove area from array and place gender instead of it.

This is how this component is implemented. This is a completely reusable component. User can add this to any website easily. All you need to do is supply necessary data.

Hope this post helps.

Posted by at 3 comments:
Labels: , ,

Wednesday, July 14, 2010

Simple Image Slider
















Recently, I have created image slider for a website like one displayed above. User can navigate to particular image by clicking on an image number otherwise Images to rotate one after other. When a user hovers a mouse over a number, image rotation stops. On mouse out rotation resumed.


Here are the code and description of my approach to implement this type of slider.

First of all, the image name should be same except last few digits like as displayed below.

e.g shoes_image1.jpg, shoes_image2.jpg, shoes_image1.jpg

So that you can synchronize image rotation through a loop using some variable. To begin slider a JavaScript function called from body onLoad method.


<body onload="slideImage();" onunload="clearTimer();">

Here slideImage function initiates sliding.

Here is the complete JavaScript code.

var _currentImage=0;
var _currentBrand
var _interval;
function changeImage(_imgNumber)
{
for(var i=1;i<=5;i++)

{
document.getElementById('imgCell'+i).style.border='1px solid black';
}
document.getElementById('images').style.background='url(plastic_parts_'+_imgNumber+'.jpg) no-repeat';
document.getElementById('imgCell'+_imgNumber).style.border='';
}

function slideImage()
{
_currentImage++;
if(_currentImage>4)
{
_currentImage=1;
}
document.getElementById('images').style.background='url(plastic_parts_'+_currentImage+'.jpg) no-repeat';
_interval=setTimeout("slideImage()",3000);
}

function clearTimer()
{
clearTimeout(_interval);
}

function resetTimer()
{
_interval=setTimeout("slideImage()",3000);
}

and here is HTML code.

<div id="images" style="border-width: 1px; border-style: solid; border-color: black; width:500px; height:500px; overflow:hidden; background: url(plastic_parts_1.jpg) no-repeat;">
<table style="position:relative; top:460px; left:10px; background-color:#EAEAEA;">
<tr>
<td id="imgCell1" style="border: 1px solid black; width:20px;"><center><a style="color:black;" href="javascript:" onclick="changeImage(1);" onMouseOver="clearTimer();" onMouseOut="resetTimer();">1</a></center></td>
<td id="imgCell2" style="border: 1px solid black; width:20px;"><center><a style="color:black;" href="javascript:" onclick="changeImage(2);" onMouseOver="clearTimer();" onMouseOut="resetTimer();">2</a></center></td>
<td id="imgCell3" style="border: 1px solid black; width:20px;"><center><a style="color:black;" href="javascript:" onclick="changeImage(3);" onMouseOver="clearTimer();" onMouseOut="resetTimer();">3</a></center></td>
<td id="imgCell4" style="border: 1px solid black; width:20px;"><center><a style="color:black;" href="javascript:" onclick="changeImage(4);" onMouseOver="clearTimer();" onMouseOut="resetTimer();">4</a></center></td>
</tr>
</table>
</div>


Hope this helps. Let me know if you have any questions.


Posted by at No comments:
Subscribe to: Posts (Atom)