Sencha Touch: проблемы с ext.List внутри Tabpanel? - PullRequest
Новая
       15

Sencha Touch: проблемы с ext.List внутри Tabpanel?

0 голосов
/ 19 августа 2011

Изучение Сенча Прикоснись, и уже люби его.Гораздо лучше, чем JQTouch на мой взгляд.Просто работаю над какой-то идеей приложения, которая у меня была, и мне нужно иметь 2 вкладки, где первая вкладка будет содержать ext.List с некоторыми данными.Я зашел так далеко, но у меня есть одна проблема, которую я не могу понять.

Проблема: панель подробностей не отображается, когда я касаюсь имени из списка.Когда его не было на панели вкладок, у меня не было никаких проблем.Пробовал форумы, не могу найти решение.

Это весь мой код (на многих примерах): 

ShotjesApp = new Ext.Application({
name: "Shotjes",
launch: function() {

    ShotjesApp.detailPanel = new Ext.Panel({
        id: 'detailpanel',
        tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
        dockedItems: [
            {
                xtype: 'toolbar',
                items: [{
                    text: 'terug',
                    ui: 'back',     
                    handler: function() {
                    ShotjesApp.Viewport.setActiveItem('listwrapper', {type:'slide', direction:'right'});
                    }
                }]
            }
        ]
    });

    ShotjesApp.listPanel = new Ext.List({
        id: 'disclosurelist',
        store: ListStore,
        itemTpl: '<div class="contact">{Naam} {Basis}</div>',
        grouped: true,
        onItemDisclosure: function(record, btn, index) {
    var naam = record.data.Naam;
            ShotjesApp.detailPanel.update(record.data);
            ShotjesApp.Viewport.setActiveItem('detailpanel') //THIS WON'T WORK?
    ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);
        }
    });

    ShotjesApp.listWrapper = new Ext.Panel ({
        id: 'listwrapper',
        layout: 'fit',
        items: [ShotjesApp.listPanel],
        dockedItems: [
                    {
                    dock : 'top',
                    xtype: 'toolbar',
                    title: 'Shotjes'

    }],

                });

this.mainView = new Ext.TabPanel({ 
    tabBar: { 
            dock: 'bottom', 
            ui: 'dark', 
            layout: { pack: 'center' } 
        }, 
    cardSwitchAnimation: { 
            type: 'fade', 
            cover: true 
        },  

    items:[{
title: 'Shotjes', 
        cls: 'card 1', 
        id: 'card 1', 
        items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel] ,
        iconCls: 'home', 
        layout: 'card', 

    }, {
        title: 'About', 
        cls: 'card 2', 
        id: 'card 2', 
        html: 'about',
        iconCls: 'calendar', 
        layout: 'card', 
    }


    ],

    tabBarDock: 'bottom', 
    fullscreen: true, 
    layout: 'fit' 
}); 

this.Viewport = this.mainView; 
}

});

Ответы [ 2 ]

0 голосов
/ 19 августа 2011

Круто, спасибо. Я также добавил это, иначе слайд откроется как новая вкладка: 

    ShotjesApp.Viewport = new Ext.Panel ({
        fullscreen: true,
        layout: 'card',
        cardSwitchAnimation: 'slide',
        items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel]
    });

В сочетании с вашими изменениями он отлично работает ..

Одна огромная проблема. Поскольку окно просмотра является полноэкранным, вторая вкладка не будет отображаться при нажатии. Когда я устанавливаю вторую вкладку в полноэкранный режим: true, я вижу анимацию, но первая вкладка все еще находится на ней.

Когда я меняю полноэкранный режим: false в окне просмотра, старая проблема возвращается и панель сведений не отображается.

0 голосов
/ 19 августа 2011

попробуйте 

ShotjesApp.Viewport.setActiveItem(ShotjesApp.detailPanel);

Также в вашем коде отсутствует точка с запятой.

...