Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext User
    Join Date
    Jun 2009
    Posts
    6
    Vote Rating
    0
    shameed is on a distinguished road

      0  

    Question Adding mouseover event to column in column model

    Adding mouseover event to column in column model


    In my editorGridPanel I want to show an icon in the cell on mouseover that tells the user this field can be inline edited. I was trying to add a mouseover event to one of the columns in my ColumnModel.
    My columnModel is defined as below:

    Code:
    var cm = new Ext.grid.ColumnModel([{
                           id:'masterLabel',
                           header: 'Master',
                           dataIndex: 'parentName',
                           sortable: true,
                           resizable: false,
                           menuDisabled: true,
                        },{
                           header: 'translation',
                           dataIndex: 'localValue',
                           sortable: false,
                           resizable: false,
                           menuDisabled: true,   
                           listeners: {
                                   'mouseover': showEditIcon,             //<--- doesnt work
                           },                                 
                           editor: new Ext.form.TextField({
                               allowBlank: true,
                               listeners: {
                                    'change': showEditButtons,
                               }
                           })
                        }                   
                    ]);
    it seems like there is no onmouseover event on the column config object. I could use addEvents but I am not sure what is the class name of the objects that go into ColumnModel e.g.

    Code:
    var myColumn = new Ext.<which class goes here?> {
                           header: 'translation',
                           dataIndex: 'localValue',
                           sortable: false,
                           resizable: false,
                           menuDisabled: true,                                       
                           editor: new Ext.form.TextField({
                               allowBlank: true,
                               listeners: {
                                    'change': showEditButtons,
                               }
                           }
    myColumn.addEvents("onmouseover");
    What is the class name I would have to use here? Or is there a better way to achieve showing an icon in the column cause I am not even sure how to define when to fire this event yet?

    Thanks!
    Last edited by shameed; 23 Jun 2009 at 12:39 PM. Reason: change post icon

  2. #2
    Ext User euchiyama's Avatar
    Join Date
    Apr 2008
    Location
    Chicago, IL
    Posts
    149
    Vote Rating
    0
    euchiyama is on a distinguished road

      0  

    Default


    The mouseover is at the grid level...then you need to get row and cell.

    Try referencing the code in this thread:

    http://extjs.com/forum/showthread.php?t=16411&page=2


    specifically this the section of code:
    Code:
    Grid.on('mouseover',function(e,t){
    
      //'e' is the event object
    
      //'t' is undocumented, but looks like it is just a shortcut to e.target
    
      //'this' of course is the GridPanel
    
    
    
      //these 2 dont exist in the documentation anywhere that I see
    
      rowIndex = this.getView().findRowIndex(t);
    
      colIndex = this.getView().findCellIndex(t);
    
      
    
      if (row && col){
    
        cell = this.getView().getCell(rowIndex,colIndex);
    
        //you could at this point set a qtip on the cell
    
        //there also used to be a getCellText, but that appears to have been omitted in 2.0
    
        //the cell contents can be easily enough retrieved from the data record though
    
      }
    
    })

  3. #3
    Ext User
    Join Date
    Jun 2009
    Posts
    6
    Vote Rating
    0
    shameed is on a distinguished road

      0  

    Default


    Thanks for the solution euchiyama but this would only work on showing the icon. But when I move out of the cell I would need to change the css again to get rid of the edit icon. I cannot use on mouseout of the grid for that because the event needs to fire when you go out of the cell not the entire grid. Checking for which cell you are in on mouseover and getting rid of the CSS on all others is the only option with this solution which is clunky and seems like an overkill that might slow things down a lot.

    So, any suggestions for mouse out of the cell?

    Also, right now when I add the CSS it gets added to the <td> instead of the <div> and sometimes the <td> is a little bigger than the <div> making the icon appear outside the cell. I tried the Element.getChild() thinking I could get the <div> and add the icon there but could not understand what they mean by the CSS selector (name of CSS class?)

    Would appreciate any help. Thanks!

  4. #4

  5. #5
    Ext User
    Join Date
    Jun 2009
    Posts
    6
    Vote Rating
    0
    shameed is on a distinguished road

      0  

    Question


    I have partially solved the issue by calling addClassOnOver() on each Cell element of the grid. Problem is my grid's activate/show/render events are never called. Which event should I use if I want to call a function after the grid is rendered and has all the cells?

    Code given below:

    Code:
        
        grid = new Ext.grid.EditorGridPanel({
            store: myStore,
            cm: myColumnModel,
            viewConfig: {
                forceFit: true
            },
            title: 'blah',
            autoHeight: true,
            width: 1000,
            frame: true,
            clicksToEdit: 1,
            renderTo: 'myGrid', //This is a div in my HTML
        });     
    
         grid.on('activate',function(e,t){
                    alert('activate');
                    for (row=0; row < myStore.getCount(); row++){
                         var myCell = new Ext.Element(this.getView().getCell(row, 1));
                         myCell.addClassOnOver('inlineEditWriteOn');  //CSS class with edit icon   
                    }
             })

Thread Participants: 2