Sencha Touch Calendar, list disapears when adding more docked items

Question

I'm trying to work with a Sencha Touch calendar extension (http://www.sencha.com/forum/showthread.php?156351-Ext.ux.TouchCalendar) Here is an example of what im using: http://www.swarmonline.com/Ext.ux.TouchCalendar/examples/simple-events-list.html

The problem is when i add a new docked item, the list you get when clicking on an event doesn't work anymore? or atleast i dont get to see the list anymore. There is however still space where the list should be.

Here is the code im trying to alter (the commented code is what im trying to implement):

calendarPanel = new Ext.Panel({
                        fullscreen: true,
                        layout: 'fit',
                        items: [calendar],
                        dockedItems: [{         
                            //  dock: 'top',
                            //  xtype: 'toolbar',
                            //  title: 'Title App'
                            //}, {
                            xtype: 'toolbar',
                            dock: 'top',
                            ui: 'light',
                            items: [{
                                xtype: 'segmentedbutton',
                                allowMultiple: false,
                                items: [{
                                    text: 'Month',
                                    pressed: true,
                                    handler: function(){
                                        calendar.setMode('month');
                                    }
                                }, {
                                    text: 'Week',
                                    handler: function(){
                                        calendar.setMode('week');
                                    }
                                }]
                            }]
                            //}, {
                            //  dock: 'bottom',
                            //  xtype: 'toolbar'        
                            }, {
                            dock: 'bottom',
                            xtype: 'list',
                            height: 110,
                            itemTpl: '{event} {location}',
                            store: new Ext.data.Store({
                                model: 'Event',
                                data: []
                            })
                        }]
                    });

Does anyone know how to add dockeditems and keep the list? Am i doing something wrong with the structure?

Answer 1

You will need to update the 'selectionchange' event handler at the bottom of the sample file so the getDockedItems() call uses the correct index after the new docked items have been added.

The second line of the handler should read:

var eventList = calendarPanel.getDockedItems()[3];

and that should get you up and running again.

Hope this helps! Stuart