PDA

View Full Version : Dockeditems on gridpanel in modal window



Spenna
7 Nov 2011, 12:05 AM
I've got a modal window that contains a gridpanel with dockedItems on top, however when i close the window and open it again i get this error in firebug:

me.dom is undefined
me.dom.style.height = me.addUnits(height);


My code is pretty straightforward:


Ext.define('SF6.view.report.View' ,{
extend: 'Ext.window.Window',
alias : 'widget.reportview',
title : 'Rapport',
modal : true,
autoShow: true,
width : 900,
border : false,
autoHeight: true,
layout: 'fit',
items: [{
xtype:'gridpanel',
height : 400,
store: 'Reports',
dockedItems : [{
xtype:'toolbar',
dock: 'top',
items: [{
text: 'Oppdater',
iconCls : 'icon-refresh',
action : 'refresh'
}]
}],
columns : [
{header: 'Anlegg', dataIndex: 'id', flex: 1, renderer: function(id){
return Ext.getStore('Facilities').getById(id).get('name');
}},
{header: 'Kode', dataIndex: 'type', flex: 1}
]
}],
initComponent: function() {
this.callParent(arguments);
}
});


Any pointers?

tvanzoelen
7 Nov 2011, 12:49 AM
property closeAction: 'hide' on the window?

Spenna
7 Nov 2011, 1:04 AM
Tried setting closeAction:'hide', but now i'm getting an extra grid-header each time i open the window (http://screencast.com/t/w6C9uZja)

tvanzoelen
7 Nov 2011, 1:20 AM
how do you open and close it?

Spenna
7 Nov 2011, 1:44 AM
Opening by the click of a button (listener in a controller). Closing via the default close-thingy in the window title.


....
init: function() {
this.control({
'dashboard button[action=report1]': {
click: this.showReport
}
});
},
showReport: function() {
this.getStore('Facilities').load({
pageSize : 0
});
this.getStore('Reports').load();
var view = Ext.widget('reportview'); // This shows the window
}
....

tvanzoelen
7 Nov 2011, 1:54 AM
I think some objects on the window are not detroying properly. My suggestion is to create the window once and use the methods show and hide when you launch the report. Hide is done with the standard close button so you dont have to do anything about that.

var view = Ext.widget('reportview'); somewhere in init or a place you can reference it.



showReport: function() {
this.getStore('Facilities').load({
pageSize : 0
});
this.getStore('Reports').load();
this.view.show(); // This shows the window
}

Spenna
7 Nov 2011, 4:25 AM
Your proposed solution works, but this is probably a bug, so if any of the admins pick this thread up please address it.

Thanks for your input :)

tvanzoelen
7 Nov 2011, 5:11 AM
You could try to override the window destroy method and destroy there explicitly your grid and toolbar. But I am not sure it helps.

alvaroguimaraes
14 Feb 2012, 4:37 AM
Any solution on this?

tvanzoelen
14 Feb 2012, 4:42 AM
You should do this



items: [{
xtype:'gridpanel',
height : 400,
store: 'Reports',
dockedItems : [{
xtype:'toolbar',
dock: 'top',
items: [{
text: 'Oppdater',
iconCls : 'icon-refresh',
action : 'refresh'
}]
}],
columns : [
{header: 'Anlegg', dataIndex: 'id', flex: 1, renderer: function(id){
return Ext.getStore('Facilities').getById(id).get('name');
}},
{header: 'Kode', dataIndex: 'type', flex: 1}
]
}],





within the initComponent. In your case all instances of the View have the same reference to your gridpanel I think that's the problem.