0

im creating an app with Sencha Touch 2 right now and got a strange behaviour. I've created a tab.panel to hold different detail-views. One of this views is a list.

At the moment there are only two panels inside my tab.panel. When i declare the list as the first object and the html-tab as the second, everything works fine. But when i define the list as the second element, it will overlay the other tab so it will not be visible at all.

What is this behaviour and how can i avoid it?

Here's my code:

The tab.panel-Container:

Ext.define('my.view.DetailsContainer', {
extend: 'Ext.tab.Panel',
xtype: 'DetailsContainer',
alias: 'DetailsContainer',
id: 'DetailsContainer',

config: {
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },
    activeItem: 0,

    items: [
        {
            xtype: 'ListView'
        },
        {
            xtype: 'DetailsInfo'
        }


    ]
},

updateData: function() {
    this.callParent(arguments);
    this.query('#DetailsInfo')[0].setData(this.getData());

    this.fireEvent('loadInfos', '', this.getData().object);
}
});

The list-view:

Ext.define('my.view.ListView', {
extend: 'Ext.Panel',
xtype: 'ListView',
alias: 'ListView',

requires: [
    'Ext.dataview.List'
],

config: {
    title: 'Services',
    iconCls: 'more',
    layout: 'fit',

    items: {
        xtype: 'list',
        store: 'services',
        //Bei Klick auf ItemDisclosurebutton zeige nähere Informationen zum Service
        onItemDisclosure: function(store, item) {
            var service = item.getRecord().serviceid;
            console.log(service);
        },
        itemTpl: '<div><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>' +
            ' {label}' +
            '</div>'
    }
}
});

The html-view:

Ext.define('my.view.DetailsInfo', {
extend: 'Ext.Panel',
xtype: 'DetailsInfo',
alias: 'DetailsInfo',
id: 'DetailsInfo',

config: {
    scrollable: 'vertical',
    layout: 'fit',
    iconCls: 'info',
    title: 'Info',

    html: '<p>My data</p>'
}
});
pyriand3r
  • 667
  • 1
  • 8
  • 18
  • Seems to work fine for me. http://jsfiddle.net/blessenm/Wd7YS/ – blessanm86 May 06 '13 at 17:25
  • Okay... I have played a bit with my code and you are right. This minimal example works for me too. In my real app i'm using the show and hide events to register a picker button in the titlebar. This seems to cause the behaviour mentioned above. – pyriand3r May 07 '13 at 07:26
  • Found my error. It was the idiot sitting in front of the keyboard. I extended the hide-function without calling `this.callParent(arguments);`, so i eventually overrode the hide-function. But strange that it worked with the list as first item... – pyriand3r May 07 '13 at 07:39

0 Answers0