PDA

View Full Version : unable to remove formPanel



teox76
23 Sep 2009, 5:14 AM
I have two dependent grids were clicking on the first populates with related date the second grid. Meanwhile, clicking on each row of the two grids displays an edit form in a panel below the grids. To not clutter too much the UI I want to display the form in the same Panel, adding and removing the formPanel on the fly.
My problem is that the panel get added correctly, but after that they aren't removed no more.
The code I use for the grid event listeners is the following. 'editPanel' is a simple panel nested in the first column of another panel with 'column layout'.
Please tell me if you need other parts of my code, thanks!



gridMaster.on('rowclick', function(gridMaster, rowIndex, eventObj){
//console.log(Ext.getCmp('editDetailPanel').findParentBy(function(){return true})) <<- returns 'editPanels'
Ext.getCmp('editPanels').remove(Ext.getCmp('editDetailPanel'), false);
//console.log(Ext.getCmp('editDetailPanel').findParentBy(function(){return true}))<<-returns 'null'
var recordMaster = gridMaster.getStore().getAt(rowIndex);
Ext.getCmp('editPanels').add(editMasterPanel);
Ext.getCmp('editPanels').doLayout()
editMasterPanel.form.setValues(recordMaster.data);
storeDetailGridRows.load({
params: {
start: 0,
limit: 15,
sort: 'id',
dir: 'DESC',
master: recordMaster.id
}
});
});

gridDetail.on('rowclick', function(gridDetail, rowIndex, eventObj){
Ext.getCmp('editPanels').remove(Ext.getCmp('editMasterPanel'), false)
var recordDetail = gridDetail.getStore().getAt(rowIndex);
Ext.getCmp('editPanels').add(editDetailPanel)
Ext.getCmp('editPanels').doLayout()
editDetailPanel.form.setValues(recordDetail.data);
});

27 Sep 2009, 6:23 PM
Ext.getCmp('editPanels').remove(Ext.getCmp('editMasterPanel'), false)

will ensure that the panel is removed from the 'editPanels' mixedCollection but prevents the 'editMasterPanel' and its DOM elements from being destroyed! remove false and it will get destroyed as required.

27 Sep 2009, 6:23 PM
wait! why are you removing it and re-adding it???

teox76
30 Sep 2009, 1:35 AM
hi, thank you for answering !


Ext.getCmp('editPanels').remove(Ext.getCmp('editMasterPanel'), false)

will ensure that the panel is removed from the 'editPanels' mixedCollection but prevents the 'editMasterPanel' and its DOM elements from being destroyed! remove false and it will get destroyed as required.

If I remove 'false' the panel will be destroyed, thus I will need to re-create it on every click. I only wanted to remove it from being rendered when the other form is displayed at his place.

Something like this
http://www.extjs.tv/index.php/2009/tdg-i-005-containers-add-and-remove/
but with only one 'parent' and two 'child'.


wait! why are you removing it and re-adding it???

Can you please point me were this happens ? :-/
I remove and add alternatively the master and detail form, clicking on the appropriate grid row (or at least this is what I wanted to do ....)

ps. i'm noticing now... but it's you the author of the screencast I linked ?:)

30 Sep 2009, 1:53 AM
I think this is a good job for the Card Layout. false, when remove is called, pulls the item from the containers 'items' mixed collection. Thus, adding another item without removing the DOM from the original will result in a collision.


Use the card layout to 'flip' to another editor when a grid is clicked.

teox76
30 Sep 2009, 2:18 AM
ok, so if i'm understanding correctly 'remove false' is more a way of "moving" items from a panel to another rather than doing some selective hide/show thing.

I will give the card layout a try, thanks !

30 Sep 2009, 2:34 AM
No. if you're looking to 'replace' a child, you'll need to destroy its DOM elements, thus a full destroy is required.