[Ver 0.2] De - and Retaching Tabs (Gridpanels)

[tobiu]

hi together,

this posting is a work in progress-project!

based upon my poll "drag & drop with tabpanelItems"
http://extjs.com/forum/showthread.php?t=11112

i would like to start this user-extension, since it will not get part of the ext core for now.
i am hoping, that some users of the community will participate =)

project-roadmap:

1) first of all, it is important to detach and retach tabpanelItems

2) extending the tabpanel class, so that tabpanelItems get dragzones

3) making tabpanels to dropzones with animation like in grid-headers (small arrows between tab-buttons)

4) routines for sorting tabs (insert new tab at position x of y items)

5) putting it all together


the start

ok, lets get an easy testing-case. i would like a borderlayout and a layoutDialog, both with a center-region. these center-regions display tabs (have tabpanels). for the grids, i use a contructor class. so, here's the simplified syntax:



layout = new Ext.BorderLayout(document.body, {...,
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true,
alwaysShowTabs: true
}
});

grid1 = new GridClass('home');
homeGrid = new Ext.GridPanel(grid1.grid, {title: 'Home', fitToFrame: true, closable: false});
layout.add('center', homeGrid);

centerRegion = layout.getRegion('center');
centerPanel = centerRegion.getTabs();

centerPanel.addTab("tabId2", "new tab", "some Content");




on an event, like button-click, we do create the new layoutDialog:




function openGridDialog () {

gridDialog = new Ext.LayoutDialog(...,

center:{
alwaysShowTabs: true
}
});

diaLayout = gridDialog.getLayout();
diaLayout.beginUpdate();

diaHomeGrid = new Ext.GridPanel(grid1.grid, {autoCreate:true,
title: 'Home', fitToFrame: true, closable: false});
diaLayout.add('center', diaHomeGrid); //lets keep it easy, this is the first tab with index 0

}


so, we created a new gridpanel, with an already existing grid.
this will detach the dom-container-element of the grid of the first gridPanel and attach it to the gridpanel in the layoutDialog. works fine.

the next step is bringing the grid back to the borderlayout:



function = restoreGrid () {

centerPanel.getTab(0).bodyEl.appendChild(grid1.grid.getGridEl().dom); //this line took tons of time =)
centerPanel.getTab(0).setHidden(false);
gridDialog.hide();

}



this demo is supposed to hide a tab, so, if you do detach and retach it, it will be displayed at the same position like it was before! we could make it optional to chose, if the tab should be inserted at the "end" of the tabPanel -> right side. this would need to remove the tab and insert a new one, atm impossible due to bug 1.

restoreGridDialogCategory () is a workaround for sure! this method only works fine, this the grid never looses the resize-listeners it has gotten by creating the first gridpanel. though it does work nice this way (except it has the resize-listeners of the dialog too...).

[tobiu]

this posting is for known bugs

1) when using Ext.TabPanel's removeTab( String/Number id ) method,
it is not possible, to insert a new tab to the panel with the same id as the removed tab.

solution

the description was only partly correct.
layout.getRegion("center").getTabs().removeTab() is NOT working as intended. this is so, because layout regions seem to have their own array for panel-ids and removing a tab wont remove the id there.
But, layout.remove('center', homeGrid); works fine, if we put preservePanels true for the whole region (global).

2) not really a bug, but not strictly logically implemented: the resize-listeners for gridpanels do not get attached to the gridpanel, but to the grid-object itself. that means in my example, if you create the second gridpanel with the same grid, the grid has still the listeners for resizing the border-layout. that means, if it is in the layout-dialog and you resize that element, the grid inside the layout-dialog gets resized to too. if you do resize the dialog, the grid fits again, since it is listening to both.

workaround:

layout.remove('center', homeGrid); works fine, if we put preservePanels true for the whole region (global). i'm not sure if this is a bug or feature. for me in this case a feature =)

[tobiu]

this posting is for open questions

1) is it possible, to attach a gridpanel to an existing tab?

2) how to remove the grids resizing-listeners set by the gridpanel-constructor (without our workaround mentioned above)?

3) a method for disabling / enabling that listener, would be great too!

[tobiu]

ok, i have a new idea, that seems better.
though still somehow a workaround.

since preservePanels does not work for local removes, we set it global
(see bug-post: http://extjs.com/forum/showthread.php?t=11435 ).



layout = new Ext.BorderLayout(document.body, {...,
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true,
alwaysShowTabs: true,
preservePanels: true
}
});


this means, that content or gridpanels shall not be destroyed, when removing from a layoutRegion. so far so good.



function openGridDialog () {

gridDialog = new Ext.LayoutDialog(...,

center:{
alwaysShowTabs: true,
preservePanels: true
}
});

diaLayout = gridDialog.getLayout();
diaLayout.beginUpdate();

layout.remove('center', homeGrid);

diaHomeGrid = new Ext.GridPanel(grid1.grid, {autoCreate:true, title: 'Home', fitToFrame: true, closable: false});
diaLayout.add('center', diaHomeGrid);
diaLayout.endUpdate();
}


the key here is layout.remove('center', homeGrid);. this says, we do remove the gridpanel, without destroying it.

BUT this will delete the resize-listeners from our grid, that caused problems in ver0.1. i have no idea, why this is so, but it fits perfect.

since we have a grid without listeners now, we can use it again in our layoutDialog. this time only listening to the resizing of that element.



function = restoreGrid () {

diaLayout.remove('center', diaHomeGrid);
homeGrid = new Ext.GridPanel(grid1.grid, {title: 'Home', fitToFrame: true, closable: false});
layout.add('center', homeGrid);

}


when we want it back, this time it gets the newest tab (somehow it is cleaner that way, because it indeed is the last one inserted. we do the trick again, to auto-remove the dialog resizing-listeners and again, the grid only sizes to the borderLayouts centerRegion.

[tobiu]

updated this to version 0.2