1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    27
    Vote Rating
    0
    tim594 is on a distinguished road

      0  

    Default Making <A> Link draggable inside Grid, just like row

    Making <A> Link draggable inside Grid, just like row


    This question was posted here, but there was no exact technical response.
    http://extjs.com/forum/showthread.ph...755#post204755

    I have a grid, with draggable rows to a tree.
    The grid has a rowRenderer which renders one of the cells as an html A href link instead of just the text:

    Code:
    myRowRenderer=function(value){
      return "<a href='javascript:;' onclick='doMyEvent()'>" + value + "</a>";
    }
    The problem is, that you cant drag the row from the href link now... but you can
    from everwhere else on that row.

    It was mentioned in the above thread about passing along the mouse events from
    the href link to the row? Can someone show me show to do that?
    Im thinking it might be something like this?:

    Code:
    myRowRenderer=function(value){
      return "<a href='javascript:;' 
         onmousedown='myGrid.getSelectionModel().getSelected().fireEvent(mousedown)'
         onmouseup='myGrid.getSelectionModel().getSelected().fireEvent(mouseup)'
         onclick='doMyEvent()'>" + value + "</a>";
    }
    that is not the correct code... but am i on the right track?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why is that a link with an href of 'javascript:;'? That is a real no-no.

    If you want to hook a click event on a cell use the GridPanel's cellclick event. Details in the FAQ.

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by Animal View Post
    Why is that a link with an href of 'javascript:;'? That is a real no-no.
    Many developers are still in the late 90s

  4. #4
    Sencha User
    Join Date
    Jul 2008
    Posts
    27
    Vote Rating
    0
    tim594 is on a distinguished road

      0  

    Default


    Imagine a grid as a file explorer.
    You click the grid row/cell to select it,
    you click the name of the file to open it.
    you double click the name to rename it.

    how else would you do it?
    That means the name of the file has to be an <A> link,
    or else selecting it and opening it would conflict.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    Trees make much more sense as a file explorer analog than a grid...
    Also, web browser mouse events dont work the same as mouse events do in windows. You cant have both click and a double click handlers assigned to an object or you get unexpected results.
    If you did want to keep using a grid, something like Saki's rowActions plugin makes much more sense anyway. Yeah, its slightly different than a file explorer, but then this is a web browser not an application language; youre going to have to make compromises.

  6. #6
    Sencha User
    Join Date
    Jul 2008
    Posts
    27
    Vote Rating
    0
    tim594 is on a distinguished road

      0  

    Default


    When you see the project as a whole, the grid is what makes sense.
    Anyways, the issue is not - should i do it another way, its - how do i make this work...

    Having one object that is draggable, single-clickable, and double-clickable is not asking too much, its just a matter of figuring it out.

    I'll check out the rowactions plugin but it doesnt look like it handles all three events - i could be wrong, i only glanced at it.

    Why is that a link with an href of 'javascript:;'? That is a real no-no.
    If you want to hook a click event on a cell use the GridPanel's cellclick event.
    Im already using cellclick event for selecting the row, but you miss my point -- There are actually 5 things going on in a single row -- for which, as far as i can tell, arent handled natively by the grid or plugins --
    1. Selecting a row (grid click)
    2. clicking a text link in the row (to produce a different event)
    3. double-clicking the text link in the row (to rename it)
    4. dragging the row
    5. dragging the the row by the text link (or just draggin the text link)
    I'll paypal $20 to the first person to show me exactly how to do it.

    I already got 1-4 done.
    #5 is what im not sure about... draggable (making the text link draggable or pass on the drag events to its parent row)

    If I have to sculpt my own drag/drop events based on the text links onmousedown/onmouseup events, then thats what i have to do..

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by tim594 View Post
    Imagine a grid as a file explorer.
    You click the grid row/cell to select it,
    you click the name of the file to open it.
    you double click the name to rename it.

    how else would you do it?
    That means the name of the file has to be an <A> link,
    or else selecting it and opening it would conflict.
    By using the cellclick event.

  8. #8
    Sencha User
    Join Date
    Jul 2008
    Posts
    27
    Vote Rating
    0
    tim594 is on a distinguished road

      0  

    Default


    Animal, did you read post #6?
    Im already using cell click event.
    I want 2 events to occure.
    a cell click when the row is clicked...
    and a clickevent when the actual text value of one of the cells is clicked, which is currently an A link.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why 2 events? Why not just process the rowclick event?

  10. #10
    Sencha User
    Join Date
    Jul 2008
    Posts
    27
    Vote Rating
    0
    tim594 is on a distinguished road

      0  

    Default


    Because I need it to do 2 different things. Clicking the row selects it,
    while clicking the name opens it. When I say open, basically do some specialized processing on that item in another frame.
    In total, I have 5 events occuring on each row:
    1. Selecting a row (grid click)
    2. clicking a text link in the row (to produce a different event, opens it)
    3. double-clicking the text link in the row (to rename it)
    4. dragging the row
    5. dragging the the row by the text link (or just draggin the text link)
    I have all of them working except #5. Thats what i need help on.
    $20 via paypal if you can show me how...