[SENCHA] Скрыть кнопку на главной панели - PullRequest
Новая
       3

[SENCHA] Скрыть кнопку на главной панели

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

Структура моего первого приложения, которое я хочу сделать, почти готова.Одна небольшая проблема, которая оказалась болью для решения для меня.Я использую доп.список с функцией onitemdisclosure, чтобы показать некоторые подробности при нажатии элемента в списке.Мне нужна кнопка «назад», поэтому я добавил ее на панель инструментов соответствующей вкладки.

Я не могу понять, как показать его, когда активна панель сведений.Поиски на форумах Sencha, в StackoverFlow, Google, но я не могу понять это самостоятельно.

Это мой код: 

Ext.ns('ShotjesApp');
Ext.setup({
    onReady: function() {
    ShotjesApp.Main.init();
    }
});

Ext.regModel('Contact', {
    fields: ['Naam', 'Basis', 'Inhoud']
});

ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters: 'Naam',
    getGroupString : function(record) {
    return record.get('Naam')[0];
    },
    data: [
        { Naam: "Domino",      Basis: "Derval",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Elektra",     Basis: "King",       Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Fiona",       Basis: "Volpe",      Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Holly",       Basis: "Goodhead",   Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Honey",       Basis: "Rider",      Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Jill",        Basis: "Masterton",  Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Kissy",       Basis: "Suzuki",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Mary",        Basis: "Goodnight",  Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Miranda",     Basis: "Frost",      Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Molly",       Basis: "Warmflash",  Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Paula",       Basis: "Caplan",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Penelope",    Basis: "Smallbone",  Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Plenty",      Basis: "O'Toole",    Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Pussy",       Basis: "Galore",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Strawberry",  Basis: "Fields",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Sylvia",      Basis: "Trench",     Inhoud: "XXX 1<br> XXX 2 <br> XXX 3"},
        { Naam: "Tatiana",     Basis: "Romanova",   Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
        { Naam: "Tilly",       Basis: "Masterton",  Inhoud: "XXX 1<br> XXX 2 <br> XXX 3" },
]
});


ShotjesApp.listPanel = new Ext.List ({
store: ListStore,
id: 'listpanel',
layout: 'fit',
itemTpl: '<div><p><strong>{Naam}</strong></div>',
onItemDisclosure: function(record) {
    var naam = record.data.Naam;
            ShotjesApp.detailPanel.update(record.data);
            ShotjesApp.listContainer.setActiveItem(ShotjesApp.detailPanel, {type:'slide', direction:'left'}); 
            ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);     
        }
});

ShotjesApp.detailPanel = new Ext.Panel({
        id: 'detailpanel',
        tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
        layout: 'auto',
    });

ShotjesApp.listContainer = new Ext.Container ({
layout: 'card',
items: [ShotjesApp.listPanel, ShotjesApp.detailPanel] ,
})


ShotjesApp.mainToolbar = new Ext.TabPanel ({
    flex: 1,
    xtype: 'tabpanel',
    tabBar: {
    dock: 'bottom',
    layout: {
        pack: 'center'
    }
},
ui: 'dark',
cardSwitchAnimation: {
    type: 'fade',
    cover: true
},
defaults: {
    scroll: 'vertical'
},
items: [{
    layout: 'vbox',
    title: 'Home',
    iconCls: 'mail',
    layout: 'fit',
    dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            scroll: {
                direction: 'horizontal',
                scrollbars: false
        },
            items: [{
                    text: 'terug',
                    ui: 'back',
                    handler: function() {
                    ShotjesApp.listContainer.setActiveItem('listpanel', {type:'slide', direction:'right'});
                    }
                }]

    }],
    items: ShotjesApp.listContainer
}, {
    title: 'tab2',
    iconCls: 'bookmarks',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        scroll: {
            direction: 'horizontal',
            scrollbars: false
        },
        layout: {
            pack: 'center'
        },

    }]
}, {
    title: 'tab3',
    iconCls: 'bookmarks',
     dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        scroll: {
            direction: 'horizontal',
            scrollbars: false
        },
        layout: {
            pack: 'center'
        },

        }]
    }]
})

ShotjesApp.Main = {
    init : function() {
        new Ext.Panel({
            fullscreen: true,
            layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: ShotjesApp.mainToolbar
        });
    }
};

1 Ответ

1 голос
/ 22 августа 2011

Вы можете использовать itemId для получения ссылки на кнопку: 

mybutton = getComponent("buttonId");

(вам может понадобиться вложить эти вызовы, чтобы перейти к вашему компоненту в иерархии)

затемпоказать / скрыть вручную, используя методы show () / hide () - вы можете сделать это в своем обработчике выбора (чтобы показать его, когда они выбирают элемент из списка, чтобы перейти к подробному виду) и в самом обработчике кнопки «назад»Вы можете скрыть это. 

mybutton.hide();
mybutton.show();
...