Question

我想要制作的第一个应用程序的结构差不多完成了。一个小问题，原来是一个难以解决的问题。我用了一个分机。列表中包含onitemdisclosure函数，以便在按下列表中的项目时显示一些详细信息。我需要一个后退按钮，所以我将其添加到相应选项卡的工具栏中。

我无法弄清楚如何在详细信息页面处于活动状态时显示它。在StackoverFlow，谷歌的Sencha论坛上搜索，但似乎无法自己解决。

这是我的代码：

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
        });
    }
};

Answer 1

您可以使用itemId获取对该按钮的引用：

mybutton = getComponent("buttonId");

（您可能需要嵌套这些调用以在层次结构中找到您的组件）

然后使用show（）/ hide（）方法手动显示/隐藏它 - 您可以在选择处理程序中执行此操作（在从列表中选择项目以显示详细信息视图时显示它）后退按钮处理程序本身你可以隐藏它。

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

[SENCHA]隐藏主面板上的后退按钮

1 个答案: