Results 1 to 8 of 8

Thread: Problem: mouseover Tooltip with Ajax Request

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
      0  

    Default Problem: mouseover Tooltip with Ajax Request

    Hello

    we actually have the following problem, and i dont really know how to solve it.

    We are using a grid to show for example headlines and when someone hovers over the headline a Tooltip should appear with the abstract of the text via a Ajax Request. I actually solved parts of the problem (thx to other threads ^^), the following code should show how:

    Grid:
    Code:
        // create the grid
        setupGrid = function(){
      grid = new Ext.grid.GridPanel({
       id: 'gridnews',
       store: store,
       cm: cm,
       //sm: sm,
       autoHeight: true,
       autoWidth: false,
       collapsible: false,
       loadMask: true,
       border: false,
       iconCls:'icon-grid',   
       view: new Ext.grid.GroupingView({
        forceFit:true,
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Artikel" : "Artikel"]})'
       }),
       listeners: {
        mouseover: function(grid, rowIndex, colIndex, e) {
         loadTooltip(grid, rowIndex, colIndex, e);
        },
        rowdblClick: function(grid, rowIndex, e) {
         newsradar.article.loadData(this.selModel.selections.items[0].data.n_newsnr_);
        }
       }
      });
     }
    Tooltip Function (see grid listener):

    Code:
     function loadTooltip(grid, rowIndex, colIndex, e) {
     
      var Connection = new Ext.data.Connection();
      
      Connection.request({
       url: 'lib/dao/abstract.cfm',
       method: 'post',
       success: function(o) {
        new Ext.ToolTip({
         target: grid.target,
         title: 'Textauszug',
         autoHide: true,
         showDelay:60,
         hideDelay:0,
         autoHeight:true,
         width:400,
         html: o.responseText     
        })
       },
       params: {}
      })
      
     }
    It actually shows only a fixed id because i am not able to acces the row ID of the grid (i pressume that this because the line has not been marked). So my questions are:

    - how can i access the rowId
    - is there any better solution to solve this situation
    - can i add a delay to the mouseover function, so that it triggers for example after 1s over the row (too much requests)

    Thanks for your answers

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
      0  

    Default

    Ok, i actually solved one part of the problem

    Code:
        mouseover: function(e, t) {
         var rowIndex = this.getView().findRowIndex(t); 
         var colIndex = this.getView().findCellIndex(t); 
        
         if(rowIndex && colIndex) { 
          var row = this.getStore().getAt(rowIndex)
          var id = row.data.n_newsnr_;
          new Ext.ToolTip({
           target: e.target,
           title: 'Textauszug',
           autoHide: true,
           showDelay:1000,
           hideDelay:0,
           autoHeight:true,
           width:400,
           autoLoad: 'lib/dao/abstract.cfm?n_newsnr_=' + id     
          })
         }
        },
    But the delay is still not perfect - does anyone know a solution? Is it possible to "cache" (some kind of) the results?

  3. #3

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
      0  

    Default

    Thanks for the links - i will try

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by thething View Post
    Ok, i actually solved one part of the problem

    Code:
        mouseover: function(e, t) {
         var rowIndex = this.getView().findRowIndex(t); 
         var colIndex = this.getView().findCellIndex(t); 
         [...]
       }
    In my grid shown below, sometimes rowIndex and/or colIndex are "false". This depends where I hover over my grid row. How can I fix that. Is something wrong with my gridpanel?

    thx for helping

    Code:
    var featureGridColumnModel = new Ext.grid.ColumnModel([
            {
                header:'Feature', 
                sortable: true, 
                dataIndex: 'feName',
                autoWidth: true
            }
        ]);
    var featureGrid = new Ext.grid.GridPanel ({
            id: 'feature-grid-'+type,
            store: featureStore,
            cm: featureGridColumnModel,
            viewConfig: {
                autoFill: true,
                forceFit: true,
                emptyText: "No features published",
                scrollOffset: 0 
            },
            autoWidth: true,
            autoHeight: true,
            cls: 'feature_grid',
            hidden: hidden,
            loadMask: true,
            title: 'Features',
            hideHeaders : true,
            renderTo: 'feature_grid_'+type,
            listeners: {
                mouseover: function(e, t) {
                    var rowIndex = this.getView().findRowIndex(t); 
                    var colIndex = this.getView().findCellIndex(t); 
                    alert("mouse over:"+rowIndex+" " +colIndex);
                }
            }
        });

  6. #6
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
      0  

    Default

    Yes I have the same issue with my GridPanel. When the row number is 0 or the column number is 0, this doesn't work. Is this a bug in the GridPanel?

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

    What exactly is the problem?

    findCellIndex returns false if the target isn't a cell.
    findRowIndex returns false if the target isn't a row.

    Since cells don't cover the entire row and the rows don't cover the entire grid body there will always be a region where one or both functions return false.

    ps. This looks like something you might want to do with Animal's DataTip plugin.

  8. #8
    Sencha User
    Join Date
    May 2010
    Location
    Las Vegas, NV
    Posts
    134
    Vote Rating
    2
      0  

    Default

    The code above has a mouseover function. I did a similar thing in my GridPanel. What happens is when you hover over any cell in row 0 (the first row) it returns false. When you hover over any cell in column 0 (the first column) is also returns false. So basically the mouseover fails when you attempt to hover any of these cells. This appears to be a bug in the GridPanel. I saw the same results with 3.2.1 and 3.3.0.

    I am pretty new to ExtJS, so perhaps I am missing something here.

    In any case, I have been using Animal's GridPanelEvents plugin and it seems to be working.



    Thanks,
    Bill

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •