disable collapse button in west panel

I have a viewport. My west panel is:

new Ext.Panel({     //west
         开发者_JAVA百科   region: 'west',
            title: 'דוחות',
            id: 'w',
            header: true,
            width: 190,
            split: true,
            collapseMode: 'mini',
            margins: '0 1 0 0',
            collapsible: true,
            collapsed: true,
            items: ......

My goal is to disable the collapse/expand button and enable it only when something else is made (javascript function - another button clicked).

Is there a way to do it?

Set 'collapsible: false' in the panel's configuration to prevent the titlebar button from being generated. Then, from within whatever custom control you desire, call:

Ext.getCmp('w').toggleCollapse();

Create a subclass of Ext.Panel with an overridden toggleCollapse. That's what gets called when you click the collapse/expand button.

Ext.ns('MyExt');
MyExt.LockablePanel = Ext.extend(Ext.Panel, {
  cls: 'myext-lockable-panel',
  toggleCollapse: function() {
    if (this.lockedPanel) {
      this[this.collapsed ? 'expand' : 'collapse'](animate);
      return this;
    }
  },
  toggleLock: function() {
    this.lockedPanel = !this.lockedPanel;
    this[this.lockedPanel ? 'addClass' : 'removeClass']('disabled-collapser');
  }
});

Just add some opacity to the button and the default cursor when it's disabled-collapser.

collapsible: true

- I guess you just have to change true to false.