1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default get list item component x,y position in an item tap event

    get list item component x,y position in an item tap event


    Hi All,

    I feel like this is an obvious one, but couldn't find any answers in my search so far. I'm using Touch v2.0 PR3. My issue is that I have a list and have an item tap event hooked up to it. No problems there, the event fires just fine. But I'm trying to figure out how to get the exact x.y position on the screen of the list item component that was tapped (or actually just the y position; I guess x would always be 0), so I can display an Ext.Sheet (sized sort of small like a pop up menu) directly under (or over) the tapped list item. I've been going through the various params on the itemtap event, but can't seem to obtain the list item component position from any of them.

    So, with the first param of the item tapevent, the list component, I've tried using getAt, getComponent, getItems, getSelected, etc., passing in the idx value, and none seem to give me the actual list item component that was clicked on. I'm assuming I can get the list item component, and getTop will give me what I need.

    I've also tried using the offsetTop property of the dom target param of itemtap , like: target.dom.offsetTop , but that doesn't behave consistently either.

    Currently I'm positioning the sheet using the event param, like: evt.touch.pageX and evt.touch.pageY, which works OK, but would like to position it based on the list item instead.

    Am I just missing something obvious here? Thanks for helping out a noob.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Do you want the position of the list item or where you touch?

    To do where you touch it is as easy as:

    Code:
    listeners : {
        itemtap : function(list, index, node, e) {
            var x = e.pageX,
                y = e.pageY;
        }
    }
    To get the position of the list item:

    Code:
    listeners : {
        itemtap : function(list, index, node, e) {
            var el    = Ext.get(node),
                xy    = el.getXY(),    //will be top-left corner of el
                size  = el.getSize();
    
            xy[0] = xy[0] + size.width / 2;   //if you want it at the center of the x axis
            xy[1] = xy[1] + size.height;      //if you want it at the bottom of the el
        }
    }
    By default, the xy will be the top-left of the el. If you want it at the bottom and middle of the el, then you can get the size and do some math.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


    Hi Mitchell,

    Thanks for the quick reply. Your solution works for placing the sheet, *however*, the target element passed into the itemtap event seems to be pointing to the overall list itself, and not the individual item that was tapped on. My sheet/view is displayed, but is shown at the bottom of the list regardless of which item I tap on. This is why I was having issues before in using the target dom element.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can get any element that is under where you tapped via e.getTarget('div.some-class', null, true)

    replacing 'div.some-class' with the DOM selector of your element
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


    OK, thanks. Is there a rule for the element id naming to know how I could use the index value to get the exact list item? Using something like e.getTarget('x-list-item', null, true) still seems like I wouldn't know how to obtain the exact list item. I see in the generated dom that each of the list item divs have an 'itemindex' attribute that corresponds to the index of the item in the list, so I guess I could somehow use a query to get the div I wanted, like Ext.ComponentQuery.query("itemindex = " + idx, target) ? But based on what you've suggested and what I've read in the docs, isn't it a bug that the whole list container element is passed in instead of just the tapped list item element?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The default target should be the 'div.x-list-item' so when you are doing getTarget, you would try to find a component under that list item.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


    Thanks for the help with this. Below is what I ended up doing to get it to work the way I needed it to.


    Code:
    doListItemTap: function(listCmp, idx, target, evt, options ) {
    	
    //get my view, which is just a sized down Ext.Sheet
    var view = this.getItemMenuView().create();
    
    
    //note that the quotes around the itemindex value here are required to include and don't seem to be in the sencha docs; this function was failing until I included the quotes
    var itemEl = Ext.select("div.x-list-item[itemindex=\"" + idx + "\"]", listCmp.getId() );
    
    //I know that the array returned by Ext.select above will only ever be a single element array, so we just grab the first element here
    var el = itemEl.first();
    
    
    var x = el.getX();    
    var y = el.getY();
    var size = el.getSize();
    
    
    x = x + size.width / 2;
    y = y + size.height;
    
    
    view.setTop(y);
    view.setLeft(10);
    
    
    view.show();
    
    
    }

  8. #8
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    epicflux is on a distinguished road

      0  

    Default


    Could you confirm that your code works with the latest beta release of Sencha Touch 2. I have code very similar to yours, but when I try to use the 'first' function I get this error:

    • Uncaught TypeError: Object [object Object] has no method 'attach'
    Code:
    var itemEl = Ext.select("div.x-item-selected", this.getHeadlinesList().getId());
    console.log(Ext.select("div.x-item-selected", this.getHeadlinesList().getId())); //this works
    console.log(itemEl.first()); //this throws the above error

Thread Participants: 2