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,114
    Vote Rating
    507
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar