1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    56
    Vote Rating
    0
    Rohall is on a distinguished road

      0  

    Default Getting item id / item content from a list populated by AJAX

    Getting item id / item content from a list populated by AJAX


    Hi everyone,
    I'm hoping that someone may have done something similar and can point me in the right direction. I have an Ext.List object which has been populated by an .update() from an AJAX call. This part is working well, but when I added an "itemtap" listener I'm only getting IDs of -1 and I'm not sure how else I can determine which item in the list was selected (except maybe checking the classes, but I'd rather avoid this approach if at all possible).

    Any tips would be greatly appreciated, thanks in advance!

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    56
    Vote Rating
    0
    Rohall is on a distinguished road

      0  

    Default


    Ok so I've started using .innerHTML to get the content from the list item. I believe this will work, but if there is a better/more standardized way please let me know!

    Thanks again

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    The itemtap event should get the following parameters in this order

    - The list
    - The index of the item that has been tapped
    - The item that has been tapped
    - The tap event object

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    6
    Vote Rating
    0
    d2ncal is on a distinguished road

      0  

    Default


    I am having the same problem.

    I have a list, that is populated using update. The list renders fine, but all the itemtap events returns index as '-1/'.

    Below are code snippets:

    Code:
    Test.userlist = Ext.extend(Ext.List, {
    	itemSelector: '.list-item',
    	singleSelect: true,
            tpl: '<tpl for="."><div class="list-item"><strong>{username}</strong> {status}</div></tpl>',
    
    	initComponent: function() {		
    		Test.userlist.superclass.initComponent.call(this);
    		
    		this.on('itemtap', function(dataview, index, item, e) { 
    			console.log("Tapped index " + index + " dataview "  + dataview);
    		});
    	}
    	
    });
    I can use the hack like Rohall mentioned (by using .innerHTML), but would much rather figure out why doesn't the event not return accurate index / item.

    Thanks,
    DD.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's difficult to say with just that, a slight modification to the list example behaves as I would expect:

    Code:
    Test = {};
    Test.userlist = Ext.extend(Ext.List, {
        itemSelector: '.list-item',
        singleSelect: true,
        tpl: '<tpl for="."><div class="list-item"><strong>{firstName}</strong> {lastName}</div></tpl>',
        
        initComponent: function(){
            Test.userlist.superclass.initComponent.call(this);
            
            this.on('itemtap', function(dataview, index, item, e){
                alert(index);
            });
        }
        
    });
    
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var groupingBase = {
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                grouped: true,
                indexBar: true,
                
                store: new Ext.data.Store({
                    model: 'Contact',
                    sorters: 'firstName',
                    
                    getGroupString: function(record){
                        return record.get('firstName')[0];
                    },
                    
                    data: [{
                        firstName: 'Tommy',
                        lastName: 'Maintz'
                    }, {
                        firstName: 'Ed',
                        lastName: 'Spencer'
                    }, {
                        firstName: 'Jamie',
                        lastName: 'Avins'
                    }, {
                        firstName: 'Aaron',
                        lastName: 'Conran'
                    }, {
                        firstName: 'Dave',
                        lastName: 'Kaneda'
                    }, {
                        firstName: 'Michael',
                        lastName: 'Mullany'
                    }]
                })
            };
            
            if (!Ext.platform.isPhone) {
                new Test.userlist(Ext.apply(groupingBase, {
                    floating: true,
                    width: 350,
                    height: 350,
                    centered: true,
                    modal: true,
                    hideOnMaskTap: false
                })).show();
            } else {
                new Test.userlist(Ext.apply(groupingBase, {
                    fullscreen: true
                }));
            }
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext User
    Join Date
    Jul 2010
    Posts
    6
    Vote Rating
    0
    d2ncal is on a distinguished road

      0  

    Default


    Thanks. I know what's wrong now.

    The events are reporting correct index/object if Ext.Store is used in the underlying structure for list. However, if data is directly used, it does not work.

    For example, in your code sample, if you change groupingBase to as following, the list will get rendered properly but events will not have the correct index.

    Code:
    var groupingBase = {
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                grouped: false,
                indexBar: true,
                    data: [{
                        firstName: 'Tommy',
                        lastName: 'Maintz'
                    }, {
                        firstName: 'Ed',
                        lastName: 'Spencer'
                    }, {
                        firstName: 'Jamie',
                        lastName: 'Avins'
                    }, {
                        firstName: 'Aaron',
                        lastName: 'Conran'
                    }, {
                        firstName: 'Dave',
                        lastName: 'Kaneda'
                    }, {
                        firstName: 'Michael',
                        lastName: 'Mullany'
                    }]
                 };

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    Hi,
    This is really great.
    Worked for me.

    Further question.

    I am getting the index values correct, but I dont know how to extract data from this?

    For example:

    Code:
    alert(dataview) // gives me [object, objct]
    alert(e) // gives me [object, objct]
    alert(item) // gives me [object HTMLDivElement]
    How do I get more information from inner HTML.

    My tpl looks like this:
    Code:
    tpl: '<tpl for="."><tpl if="5==5"><div class="glyph">{glyph}</div></tpl></tpl>'

  8. #8
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    hi,
    somehow my previous post never appeared and went into moderation.

    so i ask again

    this solution worked for me but somehow i cant understand what does 'item', 'dataview' and 'e' supposed to return.

    i get:

    Code:
    alert(dataview); // [Object Object]
    alert(item); // [Object HTMLDivElement]
    alert(e); // [Object Object]
    What does each of this return?
    how can i get values from my Div?

    thanks

Similar Threads

  1. Setting list and list item styles for Html widget
    By afs in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 9 Nov 2009, 2:29 AM
  2. combobox with drop list whose item height (for each item) is 3 pixels high!
    By stratton in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 17 Feb 2009, 8:50 AM
  3. Replies: 3
    Last Post: 16 Feb 2009, 4:44 AM
  4. Wish List Item - ie. the Grid
    By sgentile in forum Community Discussion
    Replies: 2
    Last Post: 26 Dec 2008, 2:46 PM
  5. a button in the list item, is it possible?
    By abe8810 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 5 Oct 2007, 8:26 AM

Thread Participants: 4