1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    14
    Vote Rating
    0
    ClintPick is on a distinguished road

      0  

    Default How many levels can the item tap event handle?

    How many levels can the item tap event handle?


    The code below shows how to add tap event to a list. I would like to know if it would be possible to add a third level i.e. a second itemtap event to "var detail". If it's possible how could it be done? Also, is it a good idea in terms of resources, to implement a navigation using tap event?
    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var list = new Ext.List({
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                
                store: new Ext.data.Store({
                    model: 'Contact',
                    
                    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'
                    }]
                }),
                listeners: {
                    itemtap: function(view, index, item, e){
                        var rec =  view.store.getAt(index);
                        main.setCard(1);
                        detail.update({
                            firstName: rec.get('firstName'),
                            lastName: rec.get('lastName')
                        });
                    }
                }
            });
            
            var detail = new Ext.Panel({
                tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}</tpl>',
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [{
                        text: 'Back',
                        handler: function(){
                            main.setCard(0);
                        }
                    }]
                }],
            });
            
            var main = new Ext.Container({
                fullscreen: true,
                layout: 'card',
                items:[list, detail]
            }).show();
        }
    });

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


    Detail doesn't have an itemtap event, because it's not a list. In this case though, why would you want an item tap, since there's only ever going to be one item. You can simplify your template:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function(){
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
            
            var list = new Ext.List({
                tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
                itemSelector: 'div.contact',
                
                singleSelect: true,
                
                store: new Ext.data.Store({
                    model: 'Contact',
                    
                    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'
                    }]
                }),
                listeners: {
                    itemtap: function(view, index, item, e){
                        var rec = view.store.getAt(index);
                        main.setCard(1);
                        detail.update({
                            firstName: rec.get('firstName'),
                            lastName: rec.get('lastName')
                        });
                    }
                }
            });
            
            var detail = new Ext.Panel({
                tpl: 'First: {firstName}<br />Last: {lastName}',
                listeners: {
                    afterrender: function(c){
                        c.body.on('tap', function(){
                            alert('Third level. Perhaps an underwater level?');    
                        });
                    }
                },
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar',
                    items: [{
                        text: 'Back',
                        handler: function(){
                            main.setCard(0);
                        }
                    }]
                }],
            });
            
            var main = new Ext.Container({
                fullscreen: true,
                layout: 'card',
                items:[list, detail]
            }).show();
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    14
    Vote Rating
    0
    ClintPick is on a distinguished road

      0  

    Default


    I'm sorry. i guess I phrased my question improperly. What i basically wanted to find out was whether it would be possible to have a second list in detail and then have a another list once an item is selected and then have a detail card once an item in that list is clicked. If not what would be the best way to implement such behaviour. A nested list that links to a json store would be ideal.

    sort of like:

    item list->select item1->item 1 list -> item 1 list item detail

Similar Threads

  1. Handle special item in a treepanel
    By simplessus in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Jan 2010, 8:17 AM
  2. cls at componant, field, and item levels
    By harmomelodic in forum Ext 3.x: Help & Discussion
    Replies: 17
    Last Post: 4 Jan 2010, 2:41 AM
  3. fire event and handle it by another widget
    By Siarhei in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 21 Sep 2008, 11:41 PM
  4. About the event handle
    By zhanghaocol in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 10 Dec 2007, 8:41 AM
  5. How to Handle Event in Combobox
    By swathi.bogolu in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 5 Nov 2007, 2:48 AM

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi