Search code examples
javascriptextjsextjs3

ExtJs window doesn't show


I have a toggle button:

        var button =  new Ext.Button({
        tooltip: "Интенсивность",
        iconCls: "gxp-icon-intensity",
        enableToggle:true,
        toggleHandler: function (button, state) {
            if(state){
                alert(state)
                map.getLayersByName("Интенсивность")[0].setVisibility(true);
                intWin.show();
            }else{
                map.getLayersByName("Интенсивность")[0].setVisibility(false);
                alert(intWin.collapsed);
                //intWin.close();
            }
        }
    });

And when the button is toggled I show a window:

    var intWin = new Ext.Window({
        id: 'intWin', 
        layout: 'fit',
        title:'Интенсивность',
        autoScroll:false,
        width:300,
        items:[/*intForm*/]
    });

When I close my window, then the button un-toggles. But when I click it again I don't get a window. Firebug shows this error:

 TypeError: b.dom is undefined

...String(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(b);g.params...

What can be wrong here?

UPDATE

Okey,my bad. I tried to show a destroyed element.

But in this case:
1 When I close the window and is destroyed, any forms in this window will be destroyed too?
2 How can I check that the window is destroyed?

UPDATE2

Now I try this function for creating the window:

    function intWinCreate(){
        var intWin = new Ext.Window({
            id: 'intWin', 
            layout: 'fit',
            title:'Интенсивность',
            autoScroll:false,
            width:300,
            items:[/*intForm*/]
        });
    };

and in the button handler:

                intWinCreate();
                intWin.show();

But I get an error:

  ReferenceError: intWin is not defined

If I put intWin.show(); into the function then that window shows.
What can be wrong?


Solution

  • When an element is destroyed everything within it also is destroyed.

    In your case you change the default behaviour of close action to hide by setting the property closeAction: 'hide' it will cause the window to hide instead of getting destroyed.

    Ex:

    var intWin = new Ext.Window({
        id: 'intWin', 
        layout: 'fit',
        closeAction: 'hide',
        title:'Интенсивность',
        autoScroll:false,
        width:300,
        items:[/*intForm*/]
    });
    

    Update:
    It is because intWin is a local variable in the method intWinCreate. What you can do is to return the window from the method and call show on it.

    function intWinCreate(){
        return new Ext.Window({
            id: 'intWin', 
            layout: 'fit',
            title:'Интенсивность',
            autoScroll:false,
            width:300,
            items:[/*intForm*/]
        });
    };
    

    Then

    intWinCreate().show()