Inserting a List in a TabPanel Card

[nobosh]

I have 3 TabPanel items. For the People TabPanel Items, I am trying to get a contact list to load. Currently, when the contact list loads it blocks the TabPanel at the bottom of the page, breaking the app. What is the correct way to insert the contact list in the card?

Ext.setup({
    onReady: function () {

        var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

        var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

        var peopleDisplay = new Ext.Component({ scroll: 'vertical',
            tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> <i>{from_user}</i>: {text}</div></tpl>']
        });

		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: 'Ape', lastName: 'Evilias'},
		            {firstName: 'Dave', lastName: 'Kaneda'},
		            {firstName: 'Michael', lastName: 'Mullany'},
		            {firstName: 'Abraham', lastName: 'Elias'},
		            {firstName: 'Jay', lastName: 'Robinson'},
		            {firstName: 'Tommy', lastName: 'Maintz'}, 
		            {firstName: 'Ed', lastName: 'Spencer'},
		            {firstName: 'Jamie', lastName: 'Avins'},
		            {firstName: 'Aaron', lastName: 'Conran'}, 
		            {firstName: 'Dave', lastName: 'Kaneda'},
		            {firstName: 'Michael', lastName: 'Mullany'},
		            {firstName: 'Abraham', lastName: 'Elias'},
		            {firstName: 'Jay', lastName: 'Robinson'},
		            {firstName: 'Tommy', lastName: 'Maintz'}, 
		            {firstName: 'Ed', lastName: 'Spencer'},
		            {firstName: 'Jamie', lastName: 'Avins'},
		            {firstName: 'Aaron', lastName: 'Conran'}, 
		            {firstName: 'Dave', lastName: 'Kaneda'},
		            {firstName: 'Michael', lastName: 'Mullany'},
		            {firstName: 'Abraham', lastName: 'Elias'},
		            {firstName: 'Jay', lastName: 'Robinson'}                    
		        ]
		    })
		};

        var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card', items: [{ html: 'Please Wait...' }, groupingBase],
            listeners: {
                activate: function () {
			                                
			        if (!Ext.platform.isPhone) {
			            new Ext.List(Ext.apply(groupingBase, {})).show();
			        } 

        			this.getLayout().setActiveItem(0);

                }
            }
        };

        new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom', layout: { pack: 'center'} }, animation: { type: 'fade' },
            items: [favoritesTab, peopleTab, settingsTab]
        });

    }
});

Thanks

[meyerovb]

What your code does is create a new list and show it, which overlays the entire page. What you want to do is add the new list to the card where you want to show it. Here's the new code for peopleTab to do that:

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card', 
items: [{ html: 'Please Wait...' }, { xtype: 'panel'}],
listeners: {
    activate: function () {
        if (!Ext.platform.isPhone && 
                //ensure we don't double add the list
                this.getLayout().getLayoutItems()[1].getLayout().getLayoutItems().length == 0)
            this.getLayout().getLayoutItems()[1].add(new Ext.List(Ext.apply(groupingBase, {})));
        this.setCard(1);
    }
}
};

However, there's two issues with this.

One: because the data is static on the page, there's no need to have a Please Wait... card. That was there in case you were doing a callback. Note - There are two other approaches to blocking: hiding and showing an element on a single card (which won't give you the fancy animation when it's done); or modalling the screen out while it's working (feature request 119 will give us an in-card modal, so the user can switch card's while one is busy).

Two: sencha is a lazy load system... the item isn't rendered until it's card is first shown. The creation of the list js object itself should be trivially light, so I don't see an advantage to adding it to the card in the activate method. An easier solution would be the following, which allows you to switch to the tab without having to worry about dynamically adding content to it.

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team',  layout: 'card', 
                         items: [Ext.apply(groupingBase, {xtype: 'list'})] };

An even easier one would be to just add xtype:'list' to the groupingBase definition, then just add the groupingBase object itself to the items collection

[nobosh]

@meyerovb, wow very helpful. For some reason though this is inserting the client list in the card but it hugely zoomed in and isn't displaying properly. Am I missing some style setting?

[meyerovb]

Looks fine to me in safari, scrolls fine too

list.png

Ext.setup({
    onReady: function () {

        var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

        var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

        var peopleDisplay = new Ext.Component({ scroll: 'vertical',
            tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> <i>{from_user}</i>: {text}</div></tpl>']
        });

        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });

        var groupingBase = {
            xtype: 'list',
            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: 'Ape', lastName: 'Evilias' },
                    { firstName: 'Dave', lastName: 'Kaneda' },
                    { firstName: 'Michael', lastName: 'Mullany' },
                    { firstName: 'Abraham', lastName: 'Elias' },
                    { firstName: 'Jay', lastName: 'Robinson' },
                    { firstName: 'Tommy', lastName: 'Maintz' },
                    { firstName: 'Ed', lastName: 'Spencer' },
                    { firstName: 'Jamie', lastName: 'Avins' },
                    { firstName: 'Aaron', lastName: 'Conran' },
                    { firstName: 'Dave', lastName: 'Kaneda' },
                    { firstName: 'Michael', lastName: 'Mullany' },
                    { firstName: 'Abraham', lastName: 'Elias' },
                    { firstName: 'Jay', lastName: 'Robinson' },
                    { firstName: 'Tommy', lastName: 'Maintz' },
                    { firstName: 'Ed', lastName: 'Spencer' },
                    { firstName: 'Jamie', lastName: 'Avins' },
                    { firstName: 'Aaron', lastName: 'Conran' },
                    { firstName: 'Dave', lastName: 'Kaneda' },
                    { firstName: 'Michael', lastName: 'Mullany' },
                    { firstName: 'Abraham', lastName: 'Elias' },
                    { firstName: 'Jay', lastName: 'Robinson' }
                ]
            })
        };

        var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
            items: [Ext.apply(groupingBase, { xtype: 'list' })]
        };

        new Ext.TabPanel({ fullscreen: true, tabBar: { dock: 'bottom', layout: { pack: 'center'} }, animation: { type: 'fade' },
            items: [favoritesTab, peopleTab, settingsTab]
        });

    }
});

[TommyMaintz]

Are you starting your app using Ext.setup({onReady: function(){})? The setup method will automatically add meta tags to the page that will prevent the page from zooming in etc.

[nobosh]

Thanks all, that's working fantastically. The issue was I was working off an example that had the following CSS:

	   .x-tabpanel > .x-panel-body .x-panel-body {
	       padding: 100px 0;
	       text-align: center;
	       font-size: 72px;
	       font-weight: bold;
	       color: rgba(0,0,0,.2);
	       text-shadow: rgba(255,255,255,.2) 0 1px 0;
	       padding: 100px 15%;
	   }

[nobosh]

Now that we have a nice contact list loading, it makes sense to want to be able to click a contact in the list, slide over, and see a contact detail page which has a toolbar with a back button etc. And somehow an identified to know which contact was selected.

I'm guessing that to make this happen I want to use the "itemSelector" defined in the groupingBase above, is that correct? If so, I'm not seeing anything in the documentation that points on how to use this. Is there a URL anyone can point me to?


Thanks

[nobosh]

Anyone have any pointer or urls to the API I should learn? Thanks

[TommyMaintz]

So by specifying the itemSelector, you tell the List component how to figure out which markup belongs to which item. This allows the list to fire an event called selectionchange, to which the selected item is passed.

[nobosh]

Thanks Tommy! Do any of the examples illustrate how to make this happen, support the back btn etc?