I'm getting to grips with ExtJs 4 and having an issue showing a modal window upon a double click event on a grid.

A listener defined on grid ponent:

"listeners": {
    "itemdblclick": function() { 
        var win =Ext.getCmp('myCmp');
        win.myWindow.show(); 
    }
}

previously defined property of myCmp to be a window ponent: (I've used the parent container object myCmp as I'm code generating the javascript to build the ExtJs config)

myCmp.myWindow = Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
 ....     
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
});

The logic works well, I double click the grid, the window object is present (myCmp.myWindow) but when i call show() the window is displayed very small (6px x 6px).

if I change the handler to :

Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
 ....     
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
}).show();

It works ok. obviously this is creating a new window instance.

Any ideas? am I doing this right?

Thanks in advance

sam

I'm getting to grips with ExtJs 4 and having an issue showing a modal window upon a double click event on a grid.

A listener defined on grid ponent:

"listeners": {
    "itemdblclick": function() { 
        var win =Ext.getCmp('myCmp');
        win.myWindow.show(); 
    }
}

previously defined property of myCmp to be a window ponent: (I've used the parent container object myCmp as I'm code generating the javascript to build the ExtJs config)

myCmp.myWindow = Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
 ....     
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
});

The logic works well, I double click the grid, the window object is present (myCmp.myWindow) but when i call show() the window is displayed very small (6px x 6px).

if I change the handler to :

Ext.create('Ext.window.Window',{
"layout": "fit",
"items": [
 ....     
],
"title": "Hello Window",
"width": "300",
"height": "300",
"id": "myWindow"
}).show();

It works ok. obviously this is creating a new window instance.

Any ideas? am I doing this right?

Thanks in advance

sam

• javascript
• extjs

1 Answer 1

Why do you refer to "myCmp" when you can directly refer to your window?

 var win = Ext.getCmp('myWindow');
 win.show();

This should work. Also, Why do you instantiate a window else where and then use it? Wouldn't it be better to create a instance when you need it and destroy it after use?

Also, you should configure the window correctly. The width and height are numeric fields and not string. Refer to api documentation and examples to see how to configure the objects properly. you should use the following window:

Ext.create('Ext.window.Window',{
    layout: 'fit',
    items: [
     ....     
    ],
    title: 'Hello Window',
    width: 300,
    height: 300,
    id: 'myWindow'
}).show();