1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    1
    denishoctor is on a distinguished road

      0  

    Default Tap event on List

    Tap event on List


    Hi,

    I have a simple enough list that contains an image and text wrapped in a div. I add a click event to the div which I need to get the ID from.

    It works when you click the div's white space but when you click on the child p or img they seem to be the reference for the clicked object.

    Code:
    Ext.ns('myInit');
    
    myInit.Main = {
        init: function () {
            var groupingBase2 = {
                tpl: ['<tpl for=".">',
                        '<div id="{ID}" class="result">',
                            '<tpl for="Media">',
                                '<tpl if="[xindex] == \'1\'">',
                                    '<img class="result-image" src="{SmallUrl}" />',
                                '</tpl>',
                            '</tpl>',
                            '<div class="result-info">',
                                '<h2>{Title}</h2>',
                                '<p>{Intro}</p>',
                            '</div>',
                        '</div>',
                    '</tpl>'],
                itemSelector: 'div.result',
                singleSelect: true,
                grouped: true,
                indexBar: true,
                disclosure: false,
                store: new Ext.data.Store({
                    model: 'Result',
                    sorters: 'Title',
                    getGroupString: function (record) {
                        return record.get('Title')[0];
                    }
                })
            };
    
            var groupingBase = {
                tpl: ['<tpl for=".">',
                        '<div id="{ID}" class="result">',
                            '<tpl for="Media">',
                                '<tpl if="[xindex] == \'1\'">',
                                    '<img class="result-image" src="{SmallUrl}" />',
                                '</tpl>',
                            '</tpl>',
                            '<div class="result-info">',
                                '<h2>{Title}</h2>',
                                '<p>{Intro}</p>',
                            '</div>',
                        '</div>',
                    '</tpl>'],
                itemSelector: 'div.result',            
                singleSelect: true,            
                disclosure: false,
                store: new Ext.data.Store({
                    model: 'Contact',                
                    getGroupString : function(record) {
                        return record.get('Title')[0];
                    }
                })
            };     
    
            function handleClick(e, t) {
                console.log(e);
                console.log(t);
                console.log("========================");
                alert(e.target.id + " tapped");
            }   
            
            var results = new Ext.List(Ext.apply(groupingBase, {
                fullscreen: true
            }));
            
            Ext.util.JSONP.request({
                url: 'http://www.ireland.com/api/getitems',
                callbackKey: 'callback',
                params: {
                    CategoryID: 17,
                    ItemTypeIDs: '21,4',
                    Page: 1,
                    PageSize: 20,
                    SortColumn: 'title',
                    SortDirection: 'asc'
                },
                callback: function (data) {
                    results.update(data.Items);
                    for (i=0;i<data.Items.length;i++) {
                        Ext.EventManager.on(String(data.Items[i].ID), 'tap', handleClick);
                    }
                }
            });
        }
    };
    
    Ext.setup({
        onReady: function () {
            myInit.Main.init();
        }
    });
    I could check if has id and get the parents id if it doesn't but I think I've just gone about this the wrong way. Anyone done something similar where the tap event sends the user to a details card for the item?

    Thanks,
    Denis

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,948
    Vote Rating
    636
    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


    Seems like you're doing it the difficult way.

    Why not just setup a store with a ScriptTagProxy, then you can just load the store instead of making a JSON call and then manually having to update the list.

    From there, you can just listen to the itemtap event, which will fire any time you click on the list with a match on the itemSelector.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    1
    denishoctor is on a distinguished road

      0  

    Default


    Evant,

    Thanks for the input and you've probably defined my programming approach with that first line!

    I gone and looked at ScriptTagProxy in the API and the Model, Store and Proxy setup 'Using the Data Package in Sencha Touch'. Where I'm stuck is matching complex JSON responses with complex Objects such as:

    Code:
    {
        "ResultCount": 1304,
        "Page": 1,
        "PageSize": 20,
        "Items": [
            {
                "Content": null,
                "ID": 189408,
                "Title": "Aldens In The City",
                "SubTitle": "",
                "Intro": "This is an offshoot of the renowned Aldens restaurant run by the acclaimed Jonathan Davis and a fantastic addition to the culinary scene in the city center.",
                "ItemUrl": "aldens-in-the-city/189408",
                "AmenityJson": "[{\"AddressLine1\":\"12-14 Callendar Street\",\"AddressLine2\":\"Belfast\",\"AddressLine3\":\"Antrim\",\"AddressLine4\":\"BT1 5BN, Northern Ireland\",\"Postcode\":\"\",\"Phone\":\"0044 28 9024 5385\",\"Mobile\":\"\",\"Fax\":\"\",\"Email\":\"info@aldensrestaurant.com\",\"Url\":\"www.aldensinthecity.com\",\"UrlText\":\"\",\"RoomexRef\":null,\"Description\":\"Aldens is now in the city featuring both a fully licensed restaurant and a well stocked deli featuring the now famous Alden\u0027s tapenade, pate, olives and \\\"food to go\\\" section.  Located in the heart of the city just off Donegall Square North, Aldens in the City is very handy for those shopping or working in the city centre. The restaurant provides breakfast, coffee and mouth watering patisseries baked daily by their in-house pastry chef.  The lunch menu runs all afternoon and is aimed at those on a tight schedule and those wanting to relax over wine and a leisurely meal. Why not sample some of Alden’s carefully selected products including Mussetti coffee, hot chocolate and a superb range of quality pasta and accompaniments. Also available, chocolates provided by local lady Paula Clamp - recently featured on BBC’s “The One Show”.\",\"Longitude\":-5.929005,\"Latitude\":54.598178,\"DisplayListing\":true,\"Media\":[],\"ItemID\":189408,\"HasPhone\":true,\"HasFax\":false,\"HasEmail\":true,\"HasUrl\":true,\"HasAddress\":true,\"HasName\":true,\"HasUrlText\":false,\"ShortAddress\":\"12-14 Callendar Street, Belfast\",\"ID\":13913,\"Name\":\"Aldens In The City\",\"Address\":\"12-14 Callendar Street, Belfast, Antrim, BT1 5BN, Northern Ireland\",\"Categories\":[17]}]",
                "EventJson": null,
                "StartDate": "\/Date(1262908800000)\/",
                "CustomJsonData": null,
                "CustomJsonDataType": null,
                "Media": [
                    {
                        "LargeUrl": "http://photos.ireland.com/92655/Aldens_1_lrg.jpg",
                        "SmallUrl": "http://photos.ireland.com/92655/Aldens_1_lth.jpg",
                        "ThumbUrl": "http://photos.ireland.com/92655/Aldens_1_sth.jpg",
                        "Title": "Aldens In The City"
                    },
                    {
                        "LargeUrl": "http://photos.ireland.com/92656/Aldens_2_lrg.jpg",
                        "SmallUrl": "http://photos.ireland.com/92656/Aldens_2_lth.jpg",
                        "ThumbUrl": "http://photos.ireland.com/92656/Aldens_2_sth.jpg",
                        "Title": "Aldens In The City"
                    },
                    {
                        "LargeUrl": "http://photos.ireland.com/92657/Aldens_3_lrg.jpg",
                        "SmallUrl": "http://photos.ireland.com/92657/Aldens_3_lth.jpg",
                        "ThumbUrl": "http://photos.ireland.com/92657/Aldens_3_sth.jpg",
                        "Title": "Aldens In The City"
                    },
                    {
                        "LargeUrl": "http://photos.ireland.com/92658/Aldens_4_lrg.jpg",
                        "SmallUrl": "http://photos.ireland.com/92658/Aldens_4_lth.jpg",
                        "ThumbUrl": "http://photos.ireland.com/92658/Aldens_4_sth.jpg",
                        "Title": "Aldens In The City"
                    }
                ],
                "IsPremium": true,
                "LinkUrl": "http://www.aldensinthecity.com",
                "LinkText": "Book now!",
                "Features": null,
                "IndexData": {
                    
                },
                "HasPrimaryImage": true,
                "HasAmenities": true,
                "HasCustomJsonData": false,
                "HasEvents": false,
                "Amenities": [
                    {
                        "Name": "Aldens In The City",
                        "Address": "12-14 Callendar Street, Belfast, Antrim, BT1 5BN, Northern Ireland",
                        "AddressLine1": "12-14 Callendar Street",
                        "AddressLine2": "Belfast",
                        "AddressLine3": "Antrim",
                        "AddressLine4": "BT1 5BN, Northern Ireland",
                        "Postcode": "",
                        "Phone": "0044 28 9024 5385",
                        "Mobile": "",
                        "Fax": "",
                        "Email": "info@aldensrestaurant.com",
                        "Url": "www.aldensinthecity.com",
                        "Longitude": -5.929005,
                        "Latitude": 54.598178,
                        "HasPhone": true,
                        "HasFax": false,
                        "HasEmail": true,
                        "HasAddress": true,
                        "ShortAddress": "12-14 Callendar Street, Belfast"
                    }
                ],
                "Events": [
                    
                ]
            }
        }
    }
    to a model within which I would simplify the object. Is this supported by Sencha if not where can I plugin to do the leg work myself?

    Thanks,
    Denis

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,948
    Vote Rating
    636
    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


    Well... it's difficult to say without know what you want to do, but:

    Code:
    Ext.regModel('Restaurant', {
        fields: [{
            name: 'ID', type: 'int'
        }, 'title', {
            name: 'StartDate', type: 'date'
        },{
            name: 'Media'
        }]
    });
    
    var store = new Ext.data.Store({
        autoLoad: true,
        model: 'Restaurant',
        proxy: {
            type: 'ajax',
            url: 'test.json',
            reader: {
                type: 'json',
                root: 'Items',
                idProperty: 'ID'
            }
        }
    });
    
    (function(){
        var rec = store.getAt(0);
        Ext.each(rec.get('Media'), function(med){
            console.log(med.LargeUrl);
        });
    }).defer(5000);
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    1
    denishoctor is on a distinguished road

      0  

    Default


    Thanks for the quick reply! I'm going off to setup my proxy to test this as I have a number of params to pass in.

    Without testing it first I'm unsure but are you saying Media would be matched against the schema I have above and returned as an object if I put it in as { name: 'Media' }?

    Cheers,
    Denis

  6. #6
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    1
    denishoctor is on a distinguished road

      0  

    Default


    That worked perfectly. Thanks. Codes below for anyone looking for something similar. Structure based off http://dev.sencha.com/deploy/touch/examples/twitter

    Code:
    Ext.ns('myInit');
    
    Ext.regModel('Restaurant', {
        fields: [
            { name: 'ID', type: 'int' }, 
            'Title', 
            { name: 'StartDate', type: 'date' },
            { name: 'Media' }
            ]
    });
    
    /* IrelandDotComReader */
    Ext.data.IrelandDotComReader = Ext.extend(Ext.data.JsonReader, {
        type: 'json',
        root: 'Items',
        idProperty: 'ID'
    });
    
    Ext.data.ReaderMgr.registerType('irelandDotCom', Ext.data.IrelandDotComReader);
    
    /* IrelandDotComProxy */
    Ext.data.IrelandDotComProxy = Ext.extend(Ext.data.ScriptTagProxy, {
        url: 'http://www.ireland.com/api/getitems',
        reader: 'irelandDotCom',
        defaultCategoryID: 17,
        defaultItemTypeIDs: '21,4',
        defaultPage: 1,
        constructor: function(config) {
            config = config || {};
            Ext.applyIf(config, {
                extraParams: {
                    pageSize: 20,
                    sortColumn: 'title',
                    sortDirection: 'asc',
                    categoryID: this.defaultCategoryID,
                    itemTypeIDs: this.defaultItemTypeIDs,
                    page: this.defaultPage
                }
            });
            Ext.data.IrelandDotComProxy.superclass.constructor.call(this, config);
        }
    });
    
    Ext.data.ProxyMgr.registerType('irelandDotCom', Ext.data.IrelandDotComProxy);
    
    
    var store = new Ext.data.Store({
        autoLoad: true,
        model: 'Restaurant',
        proxy: 'irelandDotCom'
    });
    
    myInit.Main = {
        init:  function () {
            (function(){
                var rec = store.getAt(0);
                console.log(rec);
                Ext.each(rec.get('Media'), function(med){
                    console.log(med.LargeUrl);
                });
            }).defer(5000);
        }
    };
    
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function () {
            myInit.Main.init();
        }
    });

Similar Threads

  1. Tap or click event for image in Panel
    By tijs in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 18 Sep 2011, 11:38 PM
  2. Tap to show Toolbar
    By dazex in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 7 Mar 2011, 11:35 PM
  3. Tap and Doubletap on List object
    By stefx in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 23 Aug 2010, 1:20 AM
  4. How many levels can the item tap event handle?
    By ClintPick in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 27 Jul 2010, 7:07 AM
  5. Event List
    By pablitobs in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 11 Dec 2008, 5:40 AM

Thread Participants: 1