javascript - ExtJs window doesn't show - Stack Overflow

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?

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?

• javascript
• extjs
• extjs3

Share Improve this question Follow edited Apr 21, 2015 at 21:15 Cristik 33k2626 gold badges102102 silver badges141141 bronze badges asked May 15, 2013 at 6:50 Kliver MaxKliver Max 5,3192424 gold badges101101 silver badges157157 bronze badges 1

• intWin is a local variable and is not accessible out of the function – Tiago Sippert Commented May 15, 2013 at 14:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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()

1. Yes, form usually is destroyed too
2. You can check, for example, intWin.body - if it is null - window is destroyed

UPDATE

As i see you have one answear already but I have another one for you too ;) As long as you set

id: 'intWin'

You can access this window from anywhere using

Ext.getCmp()

so you can show it with this:

Ext.getCmp('intWin').show()