1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    2
    thething is on a distinguished road

      0  

    Default Problem: mouseover Tooltip with Ajax Request

    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
    thething is on a distinguished road

      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
    thething is on a distinguished road

      0  

    Default


    Thanks for the links - i will try

  5. #5
    Sencha User
    Join Date
    Jun 2008
    Posts
    10
    Vote Rating
    0
    Shogun is on a distinguished road

      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
    billtricarico is on a distinguished road

      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
    89
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      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
    billtricarico is on a distinguished road

      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