Extjs - override collapse function

0
votes

i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but... when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made). It's possible do it? I want a type of override method that doing other things, for example to show a div with few specific information in the page. I use only javascript and Extjs.

thanks in advance and happy holidays

2
extjsoverridingexpand
I added the follow code : Ext.getCmp('idPanel).collapse(); when my conditions are true, but now i want disable the expand button and replace it with another function. – sengy
I have hidden the collapse/expand button, and when the code does this, I have enable the click on the div that show a window popup with my information. I don't know why if I disable the button without making it invisible, the button remains enabled – sengy

2 Answers

1
votes

I added a bindable version

Fiddle

Using databinding to collapsible, you might also add the binding to the collapsed param

0
votes

Please see my snippet. Can it resolve your issue ? Tell me if you have any question. https://fiddle.sencha.com/fiddle/1fk9

Ext.application({
name : 'Fiddle',

launch : function() {
    var parent = Ext.create('Ext.container.Container', {
        title : 'Demo',
        renderTo : Ext.getBody(),
        layout : 'vbox',
        items : [{
            xtype : 'checkbox',
            fieldLabel : 'Enable collapsible',
            handler : function(self, v){
                var panel = parent.down('panel');
                panel.collapseTool.setVisible(v);

                panel.getHeader().down('tool[type=up]').setVisible(!v);
            },
            checked : true
        }, {
            xtype : 'panel',
            width : 500,
            height : 400,
            title : 'Collapsible demo',
            collapsible : true,
            tools : [{
                type : 'up',
                hidden : true
            }]
        }]
    });
}

});