ActiveWidgets • Rollover on grid row make images in cell move 2-3 pixel to left

Hi Alex

Here is the code that reproduce the bug. In fact there are 2 bug.
1. The one described before
2. On column resizing I got an infinite horizontal scroll bar
Note that these 2 bugs appear only on IE, not on FireFox

To run the code you need to put 2 small images 16x16px named image_1.gif and image_2.gif. Thes 2 images should appear in the 2 first columns in the grid

Thanks to look at it
<html>

    <head>

        

        <script src="./runtime/lib/aw.js"></script>

        <link href="./runtime/styles/xp/aw.css" rel="stylesheet"></link>



    <script>

    

    AW.UI.TabsEnhanced = AW.UI.Tabs.subclass();

    AW.UI.TabsEnhanced.create = function()

    {

      var obj = this.prototype;

    

      obj.isEnabled = function(col)

      {

        if  (typeof this.getItemTemplate(col).getAttribute('isEnabled') == 'undefined')

          return true

        else

          return (this.getItemTemplate(col).getAttribute('isEnabled'))

      }

      obj.setTabEnabled = function(tabIndex, enabled)

      {

        if (enabled == true)

        {

          this.getItemTemplate(tabIndex).setAttribute('isEnabled', true);

          this.getItemTemplate(tabIndex).setClass("extension", "tabs-enabled")

        }

        else

        {

          this.getItemTemplate(tabIndex).setAttribute('isEnabled', false);

          this.getItemTemplate(tabIndex).setClass("extension", "tabs-disabled")

        }

      }

      obj.onItemClicked = function(event, index)

      {

        if (this.isEnabled(index) == false)

          return true;

      }

    }

    

    var tabs;

    var tabContentDiv;

    var tabLabels = [];

    var tabLabelsInvisible = [];

    var activeTab;

    

    var divIds = [];    // store ids of content DIVs

    var grids = []; // store grids reference

    var lastMessages = [];

    var hourGlassCursor = false;

    

    // Tabs 

    

    var ID_MAIN = 0;

    var ID_NOTES = 1;

    var ID_HISTORY = 2;

    

    var TAB_MAIN_LABEL = "Main";

    var TAB_NOTES_LABEL = "Notes";

    var TAB_HISTORY_LABEL = "History";

    

    var TAB_LABELS_STR = [TAB_MAIN_LABEL, TAB_NOTES_LABEL, TAB_HISTORY_LABEL];

    

    var TAB_MAIN_VISIBLE = true;

    var TAB_NOTES_VISIBLE = true;

    var TAB_HISTORY_VISIBLE = false;

    

    var TABS_INIT_VISIBLE_STATE = [TAB_MAIN_VISIBLE, TAB_NOTES_VISIBLE, TAB_HISTORY_VISIBLE];

    

    var TAB_CONTENT_DIV_WIDTH = "100%";

    

    

    // Grids

    

    var GRID_HEIGHT = "500px";

    var GRID_WIDTH = "100%";

    

    var NUM_COL = 8;

    var ROW_HEIGHT = 32;

    

    var COL_ICON = 0;

    var COL_FLAG = 1;

    var COL_TITLE = 2;

    var COL_EDITION = 3;

    var COL_PUBLISHED = 4;

    var COL_NOTES = 5;

    var COL_HISTORY = 6;

    var COL_MSGID = 7;

    

    var COL_ICON_WIDTH = "35";

    var COL_FLAG_WIDTH = "35";

    var COL_TITLE_WIDTH = "240";

    var COL_EDITION_WIDTH = "170";

    var COL_PUBLISHED_WIDTH = "100";

    var COL_NOTES_WIDTH = "155";

    var COL_HISTORY_WIDTH = "45";

    var COL_MSGID_WIDTH = "0";

    

    var HEADER_MSG_TYPE = "";

    var HEADER_MSG_FLAG = "";

    var HEADER_MSG_TITLE = "Title";

    var HEADER_MSG_EDITION = "Edition";

    var HEADER_MSG_PUBLISHED = "Published";

    var HEADER_MSG_NOTES = "Notes";

    var HEADER_MSG_HISTORY = "History";

    var HEADER_MSG_ID = "";

    

    var HEADERS = [HEADER_MSG_TYPE, HEADER_MSG_FLAG, HEADER_MSG_TITLE, HEADER_MSG_EDITION, HEADER_MSG_PUBLISHED,

         HEADER_MSG_NOTES, HEADER_MSG_HISTORY, HEADER_MSG_ID];

    

    

    function doParseMessageList() 

    {

        insertMessageInGrid(TAB_MAIN_LABEL);

    }

    

    

    function doInit()

    {

        for (var i = 0;  i < TAB_LABELS_STR.length ; i++)

        {

            var isTabVisible = TABS_INIT_VISIBLE_STATE[i];

            var tabLabel = TAB_LABELS_STR[i];

            

            if(isTabVisible == true)

            {

                tabLabels.push(tabLabel);

                

                buildTabContent(tabLabel, i);

            }

            else

            {

                tabLabelsInvisible.push(tabLabel);

                

                buildTabContent(tabLabel, i);

            }

        }

        

        document.write(tabContentDiv);

        

        initializeTabs();

    }

    

    

    function buildTabContent(tabLabel, i)

    {

        // AW.HTML.DIV

        var d = new AW.HTML.DIV;

        var id = "div" + i;

        d.setId(id);

        d.setStyle("width", TAB_CONTENT_DIV_WIDTH);

        divIds.push(id);

        

        // AW.UI.Grid

        var grid = new AW.UI.Grid;

        gridId = tabLabel;

        grid.setId(gridId);

        grid.setStyle("width", GRID_WIDTH);

        grid.setStyle("height", GRID_HEIGHT);

        

        // Text wrap in grids rows

        grid.getRowTemplate().setClass("text", "wrap");

        grid.setRowHeight(ROW_HEIGHT);

        grid.setRowCount(0);

        grid.setSelectionMode("single-row");

        

        grid.setHeaderText(HEADERS);

        

        // Cell formating

        var str = new AW.Formats.String;

        var num = new AW.Formats.Number;

        var date = new AW.Formats.Date;

        date.setDataFormat("ISO8601");

        date.setTextFormat("dd-mmm hh:mm");

        

        // Columns

        grid.setColumnCount(NUM_COL);

        

        grid.setCellFormat([str, str, str, str, date, str, str, num]);

        grid.setCellTemplate(new AW.Templates.Image, COL_ICON); // display image in first cell

        grid.setCellTemplate(new AW.Templates.Image, COL_FLAG);

        grid.setCellTemplate(new AW.Templates.Image, COL_HISTORY); 

        

        if(tabLabel == TAB_MAIN_LABEL)

            grid.setColumnIndices([COL_ICON, COL_FLAG, COL_TITLE, COL_EDITION, COL_PUBLISHED, COL_NOTES, COL_HISTORY]); // hide 8th column containing message ids

        else

            grid.setColumnIndices([COL_ICON, COL_FLAG, COL_TITLE, COL_EDITION, COL_PUBLISHED, COL_NOTES]); // hide history column too

            

        grid.setColumnWidth(COL_ICON_WIDTH, COL_ICON);

        grid.setColumnWidth(COL_FLAG_WIDTH, COL_FLAG);

        grid.setColumnWidth(COL_TITLE_WIDTH, COL_TITLE);

        grid.setColumnWidth(COL_EDITION_WIDTH, COL_EDITION);

        grid.setColumnWidth(COL_PUBLISHED_WIDTH, COL_PUBLISHED);

        grid.setColumnWidth(COL_NOTES_WIDTH, COL_NOTES);

        grid.setColumnWidth(COL_HISTORY_WIDTH, COL_HISTORY);

        grid.setColumnWidth(COL_MSGID_WIDTH, COL_MSGID);

        

        grid.setColumnResizable(false, COL_ICON);

        grid.setColumnResizable(false, COL_FLAG);

        grid.setColumnResizable(true, COL_TITLE);

        grid.setColumnResizable(true, COL_EDITION);

        grid.setColumnResizable(false, COL_PUBLISHED);

        grid.setColumnResizable(true, COL_NOTES);

        grid.setColumnResizable(false, COL_HISTORY);

        grid.setColumnResizable(false, COL_MSGID);

          

        // AW.UI.Grid events

        //grid.onRowDoubleClicked = processRowDoubleClicked;

        //grid.onCellClicked = processCellClicked;

        //grid.onHeaderClicked = processHeaderClicked;

        grid.onColumnWidthChanged = processColumnWidthChanged;

        

        // Store a grid reference

        grids.push(grid);

        

        // Add Grid in DIV

        d.setContent(grid.getId(), grid);

        

        // Put the DIV in the global DIV

        tabContentDiv.setContent(d.getId(), d);

    }

    

    

    function processColumnWidthChanged(value, index)

    { 

        // When a column is resized in a grid, the same column is resized in other invisible grids

        for(var i = 0 ; i < grids.length ; i++)

        {

            grids[i].onColumnWidthChanged = function(value, index){return;};

            grids[i].setColumnWidth(value, index);

            grids[i].onColumnWidthChanged = processColumnWidthChanged;

        }

    }

    

    

    // Initialize tabs

    function initializeTabs()

    {

        tabs.setItemText(tabLabels);

        tabs.setItemValue(divIds); // store ids of content DIVs

        tabs.setItemCount(tabLabels.length);

        

        tabs.setTabEnabled(ID_HISTORY, false);

        

        tabs.refresh();

        

        // Tabs event

        tabs.onSelectedItemsChanged = processTabsSelectedItemsChanged;

    

        tabs.setSelectedItems([ID_MAIN]);

        activeTab = ID_MAIN;

        

        doParseMessageList();

    }

    

    function processTabsSelectedItemsChanged(selected)

    {

        var i, divs = document.getElementById("content").childNodes;

    

        for(i = 0 ; i < divs.length ; i++ )

        {

            if(divs[i].style)

            {

                divs[i].style.display = "none"; // hide all elements

            }

        }

    

        var index = selected[0];

        activeTab = index;

        

        var value = this.getItemValue(index);

        

        // Trick to get the getElementById working

        var divName = divId + "-" + value;

        document.getElementById(divName).style.display = "block"; // show selected

    }

    

    

    function insertMessageInGrid(tabid)

    {

        var msgid = 1234;

        var msgType = "test";

        var msgIcon = "pdf";

        

        var msgName = "title";

        var msgStartDateValue = 12342342;

        var msgStartDate = giveDate(msgStartDateValue);

        var msgFlag = "redx";

        var msgFlagValue = getFlagValue(msgFlag);

        var msgEdition = "edition content";

        var msgNotes = "notes content";

        

        // Get the grid for this groupName

        var g = getGrid(tabid);

         

        // Get the grid's rowcount

        var rowcount = g.getRowCount();

        var newRowIndex = rowcount++;

        

        // Add row

        g.addRow(newRowIndex);

        

        // Populate row

        g.setCellImage(msgIcon, COL_ICON, newRowIndex); // Image is referenced in ssActiveWidgetsLib.css (.aw-image-...)

        g.setCellValue(msgIcon, COL_ICON, newRowIndex); // Set icon column a text value to make it sortable

        g.setCellImage(msgFlag, COL_FLAG, newRowIndex);

        g.setCellValue(msgFlagValue, COL_FLAG, newRowIndex);

        g.setCellText(msgName, COL_TITLE, newRowIndex);

        g.setCellText(msgEdition, COL_EDITION, newRowIndex);

        g.setCellText(msgStartDate, COL_PUBLISHED, newRowIndex);

        g.setCellValue(msgStartDateValue, COL_PUBLISHED, newRowIndex);

        g.setCellText(msgNotes, COL_NOTES, newRowIndex);

        g.setCellText(msgid, COL_MSGID, newRowIndex);

        

        g.sort(COL_PUBLISHED, "descending");

        

        g.refresh();   

    }

    

    

    function getGrid(id)

    {

        var g = null;

        for(var i = 0 ; i < grids.length ; i++)

        {

            if(grids[i].getId() == id)

            {

                g = grids[i];

                return g;

            }

            else

            {

            }

        }

        return g;

    }

    

    

    function giveDate(sec)

    {

    

        var d = new Date();

        var millsec = sec * 1000;

        

        d.setTime(millsec);

        

        var min = d.getMinutes();

        if(min < 10)

            min = "0" + min ;

            

        var hours = d.getHours();

        if(hours < 10)

            hours = "0" + hours ;

            

        var day = d.getDate();

        if(day < 10)

            day = "0" + day ;

            

        var month = d.getMonth();

        var mon = getMonthStr(month);

            

        //var year = d.getYear();

        

        return day + '-' + mon + ' ' + hours + ':' + min ;

    }

    

    

    function getMonthStr(num)

    {

        switch(num)

        {

            case 0:

                return "Jan";

                break;

            case 1:

                return "Feb";

                break; 

            case 2:

                return "Mar";

                break;

            case 3:

                return "Apr";

                break;

            case 4:

                return "May";

                break;

            case 5:

                return "Jun";

                break; 

            case 6:

                return "Jul";

                break;

            case 7:

                return "Aug";

                break;

            case 8:

                return "Sep";

                break;

            case 9:

                return "Oct";

                break; 

            case 10:

                return "Nov";

                break;

            case 11:

                return "Dec";

                break;

        }

    }

    

    

    function getFlagValue(msgFlag)

    {

        switch(msgFlag)

        {

            case "excla":

            case "excla16":

            case "excla32":

                var value = "a";

                break;

            case "redx":

            case "redx16":

            case "redx32":

                var value = "b";

                break;

            case "":

                var value = "c";

                break;

            default :

                var value = "c";

        }

        

        return value;

    }

    

    

    function doInitView()

    {

        registerEventHandlers();

    }

    

    var timeoutID    = new Number(0);

    var windowWidth  = new Number(0);

    var windowHeight = new Number(0);

    

    function registerEventHandlers()

    {

        window.onresize = doOnResize;

    }

    

    function doOnResize()

    {

        if(timeoutID) 

            window.clearTimeout(timeoutID)  // clear old timeout 

        timeoutID = window.setTimeout("doResize()", 50);

    }

    

    function doResize()

    {

        windowWidth  = document.body.clientWidth;

        windowHeight = document.body.clientHeight;

        

        grids[ID_MAIN].setStyle("height", windowHeight - 100);

        grids[ID_NOTES].setStyle("height", windowHeight - 100);

        grids[ID_HISTORY].setStyle("height", windowHeight - 100);

    }

    

    </script>



    <style>

    .aw-ui-tabs .aw-item-box

    {

        width: 75px

    }

     

    /* Icons */  

    .aw-image-pdf

    {

        background: url(image_1.gif);

        width: 16px;

        height: 16px

    }

    .aw-image-redx

    {

        background: url(image_2.gif);

        width: 16px;

        height: 16px

    }

    /* Tab enabled-disabled style */                        

    .aw-extension-tabs-enabled {color:black;}

    .aw-extension-tabs-disabled {color:gray; background-position: 100% 0px!important;}

    .aw-extension-tabs-disabled .aw-item-box {color:gray; background-position: 0px -50px!important;}

    

    /* Selected row in grid */

    .aw-grid-control .aw-cells-selected, .aw-grid-control .aw-rows-selected {color:#000;background:#DDDDDD}

    </style>       

    </head>

    

    <body onLoad="doInitView();" oncontextmenu="return false;">



        <div class="TopElement">

        

            <!-- Tabs -->

            <div>

                <table width="100%" cellpadding="0" cellspacing="0">

                    <tr>

                        <td>

                            <script>

                            var tabs = new AW.UI.TabsEnhanced; 

                            var tabsId = "tabs";

                            tabs.setId(tabsId);

                            tabs.setStyle("width", "100%");

                            document.write(tabs);

                            </script>

                        </td>

                    </tr>

                </table>

            </div>

            <!-- End Tabs -->

            

            <!-- Tabs content global Div -->

            <div>

                <table width="100%" cellpadding="0" cellspacing="0">

                    <tr>

                        <td>

                            <script>

                            var tabContentDiv = new AW.HTML.DIV;

                            var divId = "content"; 

                            tabContentDiv.setId(divId);

                            tabContentDiv.setStyle("width", "100%");

                            tabContentDiv.setStyle("border", "1px solid #aaa");

                            </script>

                        </td>

                    </tr>

                </table>

            </div>

            <!-- End Tabs content global Div -->

            

            <script>



                doInit();

                

            </script>

            

          </div>

        <!-- End TopElement -->

    </body>

</html>
Rollover on grid row make images in cell move 2-3 pixel to left

Forum search
