Hello Dmitry,

I can't help you with the big-column table, but with the ToolTipTable
(ideas were either from qooxdoo-contrib or they once wandered around in this
forum)

/Peter

Am 8/20/2014 um 2:38 PM schrieb Dmitry A. Golubkov:
> Dear community,
> 
> We use Qooxdoo framework for our project P7
> (https://www.datadvance.net/product/pseven/). But for some cases we
> need a table which can works with a huge data (like big-size matrices
> and so on). For now we are using a table widget, but it works very
> slowly when column count more than 50.
> 
> Is anybody can help us, and improve qooxdoo table widget to:
> * use huge data (at now it can dynamically load data only for rows,
> but not for columns)
> * show tooltip on mouse over on table cell with using standard qooxdoo
> tooltip component
> 
> We are ready to deliver work results absolutely free for the qooxdoo team.
> 
> Details of cooperation I am ready to discuss directly by email
> (mas...@hsdesign.ru).
> 
> Thanks in advance,
> Dmitry A. Golubkov,
> DATADVANCE

-- 


** Unsere Veranstaltungen: 

Post-Expo in Stockholm, Halle A - Stand A10.05, 23.-25.09.2014
TIS-Hausmesse in Bocholt, 16.10.2014
3. Innovationsforum Telematik, Idstein 28.10.2014
BWVL-Tagung in Köln, 12.-13.11.2014
/**
 * Tool Tip Table
 */
qx.Class.define("app.ui.table.ToolTipTable",
{
  extend : app.ui.table.Table,




  /*
  *****************************************************************************
     CONSTRUCTOR
  *****************************************************************************
  */

  /**
   * Constructs tool tip table
   *
   * @param tableModel {Object} table model of table
   * @param custom {Map|null} custom implementations
   */
  construct: function(tableModel, custom)
  {
    this.base(arguments, tableModel, custom);

    this.__previousCol = -1;
    this.__previousRow = -1;

    // default -> showTimeout :700, hideTimeout:4000 is ok
    this.__tableToolTip = new qx.ui.tooltip.ToolTip;
    this.__tableToolTip.setRich(true);

    this.setToolTip(this.__tableToolTip);

    // Register event listeners/handlers
    this.addListener("mousemove", this.__onMousemove, this);
    this.addListener("cellOver", this.__onCellOver, this);

  },




  /*
  *****************************************************************************
     EVENTS
  *****************************************************************************
  */
  events :
  {
    /**
     * Dispatched when the mouse is over a cell
     */
    "cellOver" : "qx.ui.table.pane.CellEvent",

    /**
     * Dispatched when the mouse is over a column header.
     */
    "headerOver" : "qx.ui.table.pane.CellEvent"
  },




  /*
  *****************************************************************************
     PROPERTIES
  *****************************************************************************
  */

  properties :
  {

    /**
     * List of labels to display.
     * labelList[col][row] is displayed when the mouse is over the cell
     * located in the column <code>col</code> and in the row <code>row</code>.
     */
    labelList :
    {
      init : new Array(),
      check : "Array"
    },

    /**
     * Displayed when no label is set for a particular cell.
     * NOTE : Setting to "" will hide the tooltop for the cell you didn't set a
     *        label
     */
    defaultLabel :
    {
      init : "",
      check : "String"
    }

  },


  /*
  *****************************************************************************
     MEMBERS
  *****************************************************************************
  */
  members :
  {
    /** {qx.ui.tooltip.ToolTip} */
    __tableToolTip : null,

    /** previous column {Integer} */
    __previousCol : null,

    /** previous row {Integer} */
    __previousRow : null,


    /*
    ---------------------------------------------------------------------------
       EVENT HANDLER
    ---------------------------------------------------------------------------
    */

    /**
     * Will generate the cellOver and headerOver events.
     *
     * @param e {qx.event.type.Mouse} The event itself.
     */
    __onMousemove : function (e)
    {
      var pageX = e.getDocumentLeft();
      var pageY = e.getDocumentTop();

      var scroller = this.getTablePaneScrollerAtPageX(pageX);
      if (!scroller) {
        return;
      }

      var row = scroller._getRowForPagePos(pageX, pageY);
      var col = scroller._getColumnForPageX(pageX);

      if (col != this.__previousCol || row != this.__previousRow)
      {
        var target = e.getTarget();

        // Hide tooltip if mouse is not over a row
        if (!(target instanceof qx.ui.table.pane.Pane)) {
          this.__hideToolTip();
        }
        // If mouse over a row
        else if (typeof(row) === "number" && row > -1)
        {
          if (target instanceof qx.ui.table.pane.Pane && 
this.hasListener("cellOver") && this.cellExists(col, row)) {
            this.fireEvent("cellOver", qx.ui.table.pane.CellEvent, [this, e, 
row, col], true);
          }
        }

        this.__previousCol = col;
        this.__previousRow = row;
      }
    },


    /**
     * Handle the tooltip label change
     *
     * @param e {qx.ui.table.pane.CellEvent} Self made cell event
     *        (see {@link #__onMousemove}).
     */
    __onCellOver : function (e)
    {
      var row = e.getRow();
      var col = e.getColumn();
      var label = this.getCellToolTipLabel(col, row);

      // to allow the tooltip to appear again without moving out of the table
      qx.ui.tooltip.Manager.getInstance().setCurrent(null);

      if ((typeof label === "string") && label!=="")
      {
        this.__tableToolTip.setLabel(label);
        qx.ui.tooltip.Manager.getInstance().setCurrent(this.__tableToolTip);
      } else {
        qx.ui.tooltip.Manager.getInstance().resetCurrent();
      }
    },


    /**
     * Hides table's tooltip.
     */
    __hideToolTip : function()
    {
      this.setToolTip(null);
      qx.ui.tooltip.Manager.getInstance().setCurrent(null);
    },


    /**
     * Evaluates if string in column is shown with ellipses,
     * it's only a guess, not science!
     *
     * @param input {String} Input string (from data cell) to evaluate
     * @param col {Integer} Column number, needed to get column width
     *
     * @return {Boolean} <true> if ellipses seems to be is shown, <false> 
otherwise
     */
    __hasEllipses : function(input, col)
    {
      var ret = false;

      if (typeof(input) === "string" && input.length)
      {
        var colWidth = this.getTableColumnModel().getColumnWidth(col);
        var map = qx.bom.Label.getTextSize(input);
        // this seems to work fine
        var strWidth = map.width*0.84+14;

        if (strWidth>colWidth) {
          ret = true;
        }
      }
      return ret;
    },


    /**
     * Determines whether the specified cell exists.
     *
     * @param col {Integer}
     *      Cell column.
     * @param row {Integer}
     *      Cell row.
     * @return {Boolean}
     *      <code>true</code> if there is the cell at crossing of 
<code>col</code> column and <code>row</code> row,
     *      otherwise - <code>false</code>.
     */
    cellExists : function(col, row)
    {
      var dataModel = this.getTableModel();
      return (typeof(row)==="number" && typeof(col)==="number"
              && 0<=row && row<dataModel.getRowCount()
              && 0<=col && col<dataModel.getColumnCount());
    },


    /**
     * Returns the tooltip label for a particular cell.
     * @param col {Integer}
     *      Cell column.
     * @param row {Integer}
     *      Cell row.
     * @return {String}
     *      The tooltip label for the specified cell.
     */
    getCellToolTipLabel : function(col, row)
    {
      var sResult = "";

      if (this.cellExists(col, row))
      {
        sResult = this.getToolTipLabelFromList(col, row);
        if (sResult!==null) {
          return sResult;
        }
        else
        {
          sResult = this.getTableModel().getValue(col, row);
          if (sResult)
          {
            // stringify all "no-strings"
            if (!qx.lang.Type.isString(sResult)) {
              sResult = qx.lang.Json.stringify(sResult, null, 2);
            }
            sResult = qx.bom.String.fromText(sResult); // newline => <br/>
          }
          if (!this.__hasEllipses(sResult, col)) {
            sResult = this.getDefaultLabel();
          }
        }
      }
      return sResult;
    },


    /**
     * Returns the label associated to a particular Cell
     * from given label list!
     *
     * @param col {Integer} Cell column
     * @param row {Integer} Cell row
     * @return {String}
     */
    getToolTipLabelFromList : function(col, row)
    {
      if (row == undefined || col == undefined) {
        return null;
      }

      var labelList = this.getLabelList();

      if (labelList[col] == undefined) {
        return null;
      }
      else if (labelList[col][row] == undefined) {
        return null;
      }
      else {
        return labelList[col][row];
      }
    }


  },




  /*
  *****************************************************************************
     DESTRUCTOR
  *****************************************************************************
  */
  destruct : function()
  {
    this.removeListener("mousemove", this.__onMousemove, this);
    this.removeListener("cellOver", this.__onCellOver, this);

    this._disposeObjects("__tableToolTip");
  }
});
------------------------------------------------------------------------------
Slashdot TV.  
Video for Nerds.  Stuff that matters.
http://tv.slashdot.org/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

Reply via email to