Show and Hide Docked Items.

[irfaniqbal]

Hi,
I have a panel with Top and Bottom docked items and these docked items are initially Hidden. I want to show these docked items by Clicking a button. How can i achieve this.

var dockedItems = [
    {
        xtype: 'toolbar',
        ui: 'light',
        dock: 'bottom',
        items: buttonsSpecBottom,
        hidden: true
    },
    {
        xtype: 'toolbar',
        ui: 'light',
        dock: 'top',
        items: [buttonsSpecTop,{xtype: 'spacer'}, buttonsSpecHome],
        hidden: true
    }
];


Application.App = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    activeItem: 0,
    dockedItems: dockedItems ,
    initComponent: function() {        
        this.startScreen = new Application.views.login({
            flex: 1
        });
        this.homeScreen = new Application.views.home();
        this.supplementsScreen = new Application.views.supplements();
        this.nutritionScreen = new Application.views.nutrition();
        
        this.items = [this.startScreen, this.homeScreen,this.nutritionScreen,this.supplementsScreen];
        
        Application.App.superclass.initComponent.call(this);
        
    }
});

thanks in advance.

[AndreaCammarata]

Hi infaniqbal.
Let's start to set an id to your toolbars:

var dockedItems = [
    {
        xtype: 'toolbar',
        id: 'toolbar1',
        ui: 'light',
        dock: 'bottom',
        items: buttonsSpecBottom,
        hidden: true
    },
    {
        xtype: 'toolbar',
        id: 'toolbar2',
        ui: 'light',
        dock: 'top',
        items: [buttonsSpecTop,{xtype: 'spacer'}, buttonsSpecHome],
        hidden: true
    }
]; 

Then when you have to show them simply write

Ext.getCmp('toolbar1').setVisible(true);
Ext.getCmp('toolbar2').setVisible(true); 

Hope this helps.

[mitchellsimoens]

Ugh.... never gonna get over people using getCmp(). ID independent:

var docked = panel.getDockedItems();
docked[0].setVisible(true);

[AndreaCammarata]

Michell I don't like it too, but in big project with multi components getCmp() is the only way.
In this case your solution is good, but I don't like access to component by an index.
Index should change, id may be te same over time.

[mitchellsimoens]

A better way for you:

Application.App = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    activeItem: 0,
    initComponent: function() {        
        this.dockedItems = this.buildDocks();
        
        this.items = this.buildItems();
        
        Application.App.superclass.initComponent.call(this);
        
    },
    buildItems: function() {
        this.startScreen = new Application.views.login({
            flex: 1
        });
        this.homeScreen = new Application.views.home();
        this.supplementsScreen = new Application.views.supplements();
        this.nutritionScreen = new Application.views.nutrition();
        return [
            this.startScreen,
            this.homeScreen,
            this.nutritionScreen,
            this.supplementsScreen
        ];
    },
    buildDocks: function() {
        return [
            {
                xtype: 'toolbar',
                ui: 'light',
                dock: 'bottom',
                items: buttonsSpecBottom,  //redo
                hidden: true
            },
            {
                xtype: 'toolbar',
                ui: 'light',
                dock: 'top',
                items: [buttonsSpecTop,{xtype: 'spacer'}, buttonsSpecHome], //redo
                hidden: true
            }
        ];
    }
});

This is a better application structure. Your toolbar buttons need to be moved inside the App also tho and then you will get the scope of the application.

[mitchellsimoens]

but in big project with multi components getCmp() is the only way.

That is just incorrect to be honest. Create your own references or use ComponentQuery. Using IDs is really bad, structure of components doesn't change that much and is easily fixed. Everything you do should be extensible, dynamic, and reusable. This is why IDs are bad, you cannot reuse them.

[AndreaCammarata]

That is just incorrect to be honest. Create your own references or use ComponentQuery. Using IDs is really bad, structure of components doesn't change that much and is easily fixed. Everything you do should be extensible, dynamic, and reusable. This is why IDs are bad, you cannot reuse them.

Michell sorry but I don't agree with you!
If for example I have to dinamically insert a button into a toobar as the first button just in some conditions, this makes your components index change but id is always the same, so sometimes could be really hard to control all your application by index.
ID are not bad at all, you just have to look out to assign real unique ID.

[mitchellsimoens]

It goes against good OOP practices. Guess we are not going to agree with this so as long as you are ok with it, let's not get into a thread fight

[AndreaCammarata]

It goes against good OOP practices. Guess we are not going to agree with this so as long as you are ok with it, let's not get into a thread fight

Absolutely...the last thing I want is to go into a thread fight, if you can convince me that using id is bad I'm glad to follow your street
I agree with you when you when you say that everything has to be dynamic and reusable but id don't mess with that and I don't understand why you say it goes against OOP practices.
Remember that Sencha Touch / Ext component are nothing more than div created inside your page, and, as W3C say, every dom node should have an unique id.
So setting the id on you component makes your div created with an unique id.
Yes, it's better don't use too much getCmp() because the ComponentManager should look for the wanted component through all the existing components in your application and this is not really the best, but sometime I think you have no choise.
Obviously if you are creating your custom component extending from an existing Sencha component you should not set id inside the class, but you will asign the id on the new class that you are going to create with type of your custom defined class.
Anyway absolutely no problem Michell, this doesn't want to be a fight but just a way to help all the new Sencha Touch users

[mitchellsimoens]

Keeping it light, Sencha will automatically set a unique ID. But when you try to refer to it, how can you get this unique ID.

When I create an App, I don't just add some Panels. Each "screen" is actually just an extension of another component. Then I instantiate that extension when needed. This is reusable.

If a function is used more than once, it is abstracted out and that creates a base for what to extend upon. This is reusable and extensible. Think of how Panel extends Component. Component code is reusable so Panel just extends it.

So say I have an App and it the basis is a Panel. Panel uses CardLayout. Each "card" under it is an extension of an abstract. My secret for performance is to only have 1 or 2 cards rendered at once. I destroy what isn't being viewed and recreate it when needed. This makes all my animations smooth versus others that are choppy (even on the contest winners). So managing all the unique IDs is just not feasible and since I only have 1 card rendered, I can use getActiveItem(). The active card then holds references to the components under it that I need. Keeping with performance, each card doesn't have much on it so managing those references are now simple. I don't create references to everything, just what I need.

So I accomplished 2 things. Never use IDs and unmatched performance.