PDA

View Full Version : Ext.ux.DockPanel



monsterjoe
15 Apr 2008, 12:16 AM
Hi everyone.
I'm currently developing a quite large application that needs a way to let the end-user customize it's workspace according to their needs. So I'm writing this extension to allow a user to drag out of a TabPanel a tab, let him float as a window or drop it to another tab panel.

UPDATE
Many changes and improvements:
- Rewritten Ext.ux.DockPanel. Now it's a plugin: Ext.ux.DockPanelPlugin. This way you can add it to every Ext.Panel extension.
- now, when docked, the panel is added directly to the container (fixed a problem with ext 2.0 about unregister some Ext.TabPanel events. This fix is no longer needed with Ext 2.1)
- Refactored about everything to make easier to write plugins for other containers like Panels with Accordion Layout (working on it)
- tab reordering
- dockOnly config option: a dockOnly:true dock panel can't float as a window.
- closable config option support
- Now a dock panel can be added directly to a valid container in the layout config
Example:


new Ext.TabPanel({
border:false,
activeTab:0,
frame: false,
style: 'border:1px',
items: [new Ext.Panel({
id: 'dockonly',
title: 'dockonly',
html: 'dockonly: true',
border: false,
header: false,
dockonly: true,
plugins: [new Ext.ux.DockPanelPlugin({
width: 300,
height: 350,
ddGroup: 'dock-panels'
})]
})],
plugins: [
new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels', highlightOnDrag:false})
]
})
UPDATE 0.5:
- Fixed a bug related to dragging the window
- Many changes on DragDrop object
- Added support for the window constrain and constrainHeader options
- Added dockLabel config option in Ext.ux.DockTabPanel plugin so you can choose what will be written in the ghost tab. 'title' will display the title panel. Else the dockLabel. default: ' '


UPDATE 0.6:
- Ext.ux.DockContainer: Ext.ux.DockTabPanel plugin now extends the abstract class Ext.ux.DockContainer
- Ext.ux.DockContainer.defaults to set standard config options for all dock containers
- Ext.ux.DockPanel.defaults to set standard config options for all dock panels
- Fixed some other bugs
Added 2 config options (see south-west region in demo):
- maskText (eg: 'drop here'): if set in a DockTabPanel () will mask the TabPanel on enter
- hideOnEnter: if set on a DockPanel hides the window on enter a valid drop zone

After investigating Animal suggestion I decided to not use a proxy to undock the panel only after drop in a valid DropTarget. For each DockPanel I create only a window: hidden when the panel is docked. And using a proxy I have to handle different possible ownerCt: Undocking the panel immediately, ownerCt is the window. This simplifies tab reordering for example and many other things.

UPDATE 1.0a
Alpha quality. Still many things to do...
update: uploaded the wrong file. Now it's the right one.

TODO:
New features:
- accordion layout plugin to make it a valid container
- State manager support

Bugs:
- little problem related to scrolling TabPanel when dragging out a panel
- if a TabPanel is in scroll state with animScroll:true tab reordering does not properly work.

Improvements:
- change mouse icon to show invalid drop when dockOnly:true

Live demo:
http://www.polomuseale.firenze.it/ext/test/test.html

Foggy
15 Apr 2008, 1:17 AM
Uhh, thats really nice. Maybe a visuell feedback where the panel can be docked would be nice...
Can these panels only be docked as a tabPanel?

danh2000
15 Apr 2008, 1:27 AM
Hi,

Good effort - I'm sure this functionality would come in handy.

I've just tried on IE6 -it's very buggy I'm afraid, dropping the window causes many tabs to be added to the drop target continuously.

This tool may help you to test - it allows you to install multiple version of IE on your machine:

http://tredosoft.com/Multiple_IE

(disclaimer - I haven't used the tool above- it was the first that came up in a Google search, but there are many similar tools.)

In firefox, I couldn't dock the window in the center region at all, but could dock it everywhere else.

I also think a Ghosted drop-target as you hover over drop-zones would be a good addition.

Hope that helps,

Foggy
15 Apr 2008, 1:35 AM
The tredosoft multiple ie solution is nice, but their behavior is really different to the original IE installations...
But thats just my experience

monsterjoe
15 Apr 2008, 1:48 AM
In firefox, I couldn't dock the window in the center region at all, but could dock it everywhere else.


Yes. The center region is not a dock target. It's easy to make it a drop target using the plugin like others TabPanel in the example.



I've just tried on IE6 -it's very buggy I'm afraid, dropping the window causes many tabs to be added to the drop target continuously.

This tool may help you to test - it allows you to install multiple version of IE on your machine:

http://tredosoft.com/Multiple_IE

(disclaimer - I haven't used the tool above- it was the first that came up in a Google search, but there are many similar tools.)

Hope that helps,

Sure!



I also think a Ghosted drop-target as you hover over drop-zones would be a good addition.



Sure. The first thing I'll check when the whole thing will be stable.
I think the problem in ie6 is somehow like the one with ie7.
I hope to fix it today.
Thx for your feedback

Animal
15 Apr 2008, 1:53 AM
Very nice!

I think a visual treatment of the tab strip when dropping is valid is needed. Should be just a matter of implementing onDragEnter and onDragOut in the DockWindow's DD to add/remove a configured class name to the tab strip.

monsterjoe
15 Apr 2008, 1:56 AM
Uhh, thats really nice. Maybe a visuell feedback where the panel can be docked would be nice...
Can these panels only be docked as a tabPanel?

Yes. Maybe in the future I can add support for the Accordion. But at the moment there's enough to do to make it stable.

wm003
15 Apr 2008, 2:24 AM
Very very nice:) and useful. Keep up the good work.

monsterjoe
15 Apr 2008, 2:43 AM
I think now the problem with ie is fixed.

galdaka
15 Apr 2008, 6:32 AM
Woooooooooooooo! ;) =D>

Excellent work!!

galdaka
15 Apr 2008, 10:44 PM
Is posible hightlight the drop-zone backgroung when you are over?

Thanks in advance,

monsterjoe
15 Apr 2008, 11:30 PM
Is posible hightlight the drop-zone backgroung when you are over?

Thanks in advance,

Yes.
And I think it's possible to highlight the drop zones when you start dragging a window too. I'm working on it.

mabello
16 Apr 2008, 12:33 AM
monsterjoe,

this is beautifulllllll!

Unluckily, it does not work with IE6, but I'd like to help you fixing the problems for IE6 as soon as I find a little bit of time....anyway, it is really a nice idea so congratulation...
Regards

Marco

monsterjoe
16 Apr 2008, 2:21 AM
monsterjoe,

this is beautifulllllll!

Unluckily, it does not work with IE6, but I'd like to help you fixing the problems for IE6 as soon as I find a little bit of time....anyway, it is really a nice idea so congratulation...
Regards

Marco


Uploaded new version with a fix for ie6. I hope it's all ok this time.

mabello
16 Apr 2008, 2:56 AM
Great job, it works fine now! =D>
Thanks for sharing and well done!!

danh2000
16 Apr 2008, 3:04 AM
Hi MonsterJoe,

I've just tested on IE6 again - it works great - well done.

I've also tested on Opera 9.01 - functionally it works great, but there are a couple of minor visual hiccups..

1. When dragging a window that is originally docked (not when starting from floating), part of the tab title text is selected - as shown here:

http://i57.photobucket.com/albums/g233/danh2000/drag1.png

2. Then very occassionally, as I move the window around, I get flickers of other elements becoming selected - like this (although this is only sometimes and depends on where you move the window):

http://i57.photobucket.com/albums/g233/danh2000/drag2.png

As soon as you drop the window on a target, the selected text is unselected and nothing looks wrong.

These are minor issues considering the functionality that you are providing.

This is really great - I think with a bit of polish, this will become a very popular user extension. :)

jay@moduscreate.com
16 Apr 2008, 10:01 AM
wow, that's sharp :)

watrboy00
16 Apr 2008, 10:34 AM
Nice work. I think this could possibly be modified for drag and drop tabs in a tab panel.

jay@moduscreate.com
16 Apr 2008, 11:17 AM
iotw, dnd reordering?

mabello
16 Apr 2008, 12:39 PM
I'm sure your extension will be one of the most high rated, it is really really nice.

Trying to add a grid inside a docking panel, I found some problem when undocking the panel:

That's the code


<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.blist {
background-image: url(list-items.gif) !important;
}
ul.x-tab-strip {
height: 21px;
}
.x-tab-strip-wrap-highlight {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="Ext.ux.DockPanel.js"></script>
<script type="text/javascript">

var createGrid = function(){

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

function renderTopic(value, p, record){
return String.format(
'<b><a href="#" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
value, record.data.forumtitle, record.id, record.data.forumid);
}
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);


// create the Grid
var grid = new Ext.grid.GridPanel({
region: 'center',
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', hidden: false},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', hidden: false},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change', hidden: false},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange', hidden: false},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', hidden: true}
],
stripeRows: true,
autoExpandColumn: 'company',
height:450,
title:'Array Grid',
viewConfig: {
forceFit:true
}
});
return grid;
}
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var south, east;
var undockedpanel = new Ext.ux.DockPanel({
title: 'Dockable Panel',
html: 'Dockable Panel',
border: false,
header: false,
wwidth: 300,
wheight: 350,
ddGroup: 'dock-panels'
});
var dockedpanel = new Ext.ux.DockPanel({
title: 'Docked Panel',
layout: 'fit',
border: false,
header: false,
wwidth: 300,
wheight: 350,
items: [createGrid()],
ddGroup: 'dock-panels'
});

var viewport = new Ext.Viewport({
layout: 'fit',
items:[ new Ext.Panel({
layout:'border',
border: false,
items:[
new Ext.Panel({
layout: 'border',
region:'south',
title: '&nbsp;',
split:true,
height: 300,
minSize: 100,
maxSize: 400,
collapsible: true,
margins:'0 0 0 0',
items: [
new Ext.Panel({
layout: 'fit',
title: '&nbsp;',
split:true,
minSize: 100,
width: 400,
region: 'west',
collapsible: true,
margins:'0 0 0 0',
items:
south = new Ext.TabPanel({
border:false,
activeTab:0,
frame: false,
style: 'border:1px',
plugins: [
new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels', highlightOnDrag:false})
]
})

}),
new Ext.Panel({
layout: 'fit',
region: 'center',
title: '&nbsp;',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
frame: false,
style: 'border:1px',
ddGroup: 'dock-panels',
plugins: [
new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels'})
]
})
})
]
}),
{
region:'west',
title: '&nbsp;',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 0 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
enableTabScroll: true,
plugins: [
new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels'})
]
})
},
{
region:'east',
title: '&nbsp;',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 0 0 0',
items:
east = new Ext.TabPanel({
border: false,
activeTab:0,
monitorResize: true,
enableTabScroll: true,
plugins: [
new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels'})
]
})
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[
new Ext.Panel({
title: 'center',
html: 'center'
}),
new Ext.Panel({
title: 'center2',
html: 'center2'
})
]
})
]
})]
});
dockedpanel.dock(south);
undockedpanel.undock();
});
</script>
</head>
<body>
</body>
</html>



Anyway, as I said, great extension

watrboy00
16 Apr 2008, 1:41 PM
iotw, dnd reordering?

Exactly, so not just being able to drag a panel to a different location in your layout but also picking up tabpanelstrips and reorder them in the tab strip. Kind of how you can in FireFox.

monsterjoe
17 Apr 2008, 12:15 AM
Wow. Many things to do to improve the extension. :)

At the moment I'm rewriting some parts to make the DockPanel a real panel so it can be added directly to a layout; and to delegate to the tabPanel plugin the dock method and some other things related to the container. This way it will be easier to make it work with other containers like Accordion writing another plugin.
Then I will test it with a more complex case with grids forms and other widgets to fix problems related.
Finally tab reordering and StateManager support.


PS: for opera selection issue I think I have to shim the tabs with an iframe to fix it.
PPS: a small improvement: changed the way to highlight the drop zone. Now the extension uses a proxy div over the tabStrip.

antimatter15
21 Apr 2008, 4:05 PM
Any Progress?

monsterjoe
22 Apr 2008, 12:58 AM
Any Progress?

Updated. See the original post.

wm003
22 Apr 2008, 2:00 AM
It would be nice to see the Panels Name in the GhostTab, when dragging over a possible dropZone (until now it just shows a "|"):)

monsterjoe
22 Apr 2008, 2:09 AM
It would be nice to see the Panels Name in the GhostTab, when dragging over a possible dropZone (until now it just shows a "|"):)

I tried with panel title but sometimes (when tabPanel width is small for example) the small tab is a better solution. Maybe I can leave the choice with a config option.

J.C. Bize
22 Apr 2008, 6:23 AM
Looks great, thanks for your hard work on this.

Cheers,
JC

antimatter15
22 Apr 2008, 7:08 PM
Can you dock/undock panels that are not in any tabpanel? by dragging on their titles?

monsterjoe
23 Apr 2008, 3:17 AM
Can you dock/undock panels that are not in any tabpanel? by dragging on their titles?

Not at the moment.

garraS
23 Apr 2008, 7:13 AM
I found a bug.
If you click on dockonly tab and keep pressing, and...when the windows ghost appears you release the click, you can't dock that panel anywhere.

Firebug said:
"this.activeGhost has no properties"

;)

galdaka
23 Apr 2008, 12:20 PM
I think that this extension would be a part of next version of Ext.

Is great!! =D>

I hope your advances with this extension, thanks for share your work!!

monsterjoe
23 Apr 2008, 11:05 PM
I think that this extension would be a part of next version of Ext.

Is great!! =D>

I hope your advances with this extension, thanks for share your work!!


Thx :D

Animal
24 Apr 2008, 12:36 AM
It is looking really great. I hope you don't mind if make a suggestion?

I think it should probably use a proxy to drag rather than going to the expense of dragging a newly instantiated Window around when you undock a tab.

It should just be a kind of "picture" representing the Panel. Perhaps just a simple, styled DIV with the same icon class that the tab had. That way, there wouldn't be a need to create an arbitrarily sized Window constrained into the browser window, and you could get it to move anywhere on screen.

Then when you drop the proxy, that's the time it should decide whether it really needs to undock and move the Panel.

See how Firefox does not move a tab until you drop it when moving them? That's the best UI pattern IMHO.

monsterjoe
24 Apr 2008, 3:04 AM
It is looking really great. I hope you don't mind if make a suggestion?

I think it should probably use a proxy to drag rather than going to the expense of dragging a newly instantiated Window around when you undock a tab.

It should just be a kind of "picture" representing the Panel. Perhaps just a simple, styled DIV with the same icon class that the tab had. That way, there wouldn't be a need to create an arbitrarily sized Window constrained into the browser window, and you could get it to move anywhere on screen.

Then when you drop the proxy, that's the time it should decide whether it really needs to undock and move the Panel.

See how Firefox does not move a tab until you drop it when moving them? That's the best UI pattern IMHO.


You're right. Nice suggestion.

mjlecomte
26 Apr 2008, 3:35 PM
Thanks for this contribution, I had asked about this feature sometime back. ;)

galdaka
13 May 2008, 11:04 AM
Hi monsterjoe (http://www.extjs.com/forum/member.php?u=10120),

What about your work? You are working in a new version?

Your extensi

gimbles
13 May 2008, 11:35 AM
It's coming along nicely, this new version is really cool. Keep up the good work!

monsterjoe
13 May 2008, 11:40 PM
[quote=galdaka;167509]Hi monsterjoe (http://www.extjs.com/forum/member.php?u=10120),

What about your work? You are working in a new version?

Your extensi

monsterjoe
29 May 2008, 12:18 AM
Work is going on.
I just finished StateManager support and a first implementation for Accordion Layout support without panel repositioning.
Changed a lot of things.
I updated the live demo to show the progress.
Suggestions are welcome.

Animal
29 May 2008, 12:47 AM
It's looking very nice. I like the insertion point highlighting scheme you've got.

Some funny things going on.

When you are dragging the Grid Window over a TabPanel, the insertion marker appears but the Grid Window disappears. Other Panels that you drag do not disappear.

You can "duplicate" Panels in the accordion Panel by dragging from there a few pixels and dropping again. The Panel creates an empty copy of itself.

A very nice feature to have would be disallowing drag outside of the current TabPanel. This would constrain movement in the Y-axis to 0 pixels (And put a limitation on the range of movement in the X axis.) This is quite easy to do with the DragDrop class. Then it could be just used for reordering Tabs if you don't want them moved elsewhere.

monsterjoe
29 May 2008, 1:41 AM
It's looking very nice. I like the insertion point highlighting scheme you've got.

Some funny things going on.

When you are dragging the Grid Window over a TabPanel, the insertion marker appears but the Grid Window disappears. Other Panels that you drag do not disappear.


This is as intended. The grid panel has hideOnEnter: true. But don't ask me why I wrote the hideOnEnter config option. I really don't remember :)




You can "duplicate" Panels in the accordion Panel by dragging from there a few pixels and dropping again. The Panel creates an empty copy of itself.


ok. Fixed.



A very nice feature to have would be disallowing drag outside of the current TabPanel. This would constrain movement in the Y-axis to 0 pixels (And put a limitation on the range of movement in the X axis.) This is quite easy to do with the DragDrop class. Then it could be just used for reordering Tabs if you don't want them moved elsewhere.

Nice one.

RugWarrior
29 May 2008, 2:34 AM
I just want to say that this extension is very very cool! =D>

mabello
29 May 2008, 3:08 AM
More and more beautifullllllllll!!
I have found a problem though, if I add a DockablePanel dinamically to a DockTabPanel, it does not to work for me



function addToTab(){
var centerPanel = Ext.getCmp('thetab');//The center panel in which add the tab
var dockPanel = new Ext.Panel({
title: 'dockonly',
html: 'dockonly: false',
border: false,
header: false,
dockonly: false,
layout: 'fit',
plugins: [new Ext.ux.DockPanel({
width: 300,
height: 350
})]
});
centerPanel.add(dockPanel);
centerPanel.doLayout();
}

Thanks and keep up the good work

monsterjoe
29 May 2008, 3:27 AM
More and more beautifullllllllll!!
I have found a problem though, if I add a DockablePanel dinamically to a DockTabPanel, it does not to work for me



function addToTab(){
var centerPanel = Ext.getCmp('thetab');//The center panel in which add the tab
var dockPanel = new Ext.Panel({
title: 'dockonly',
html: 'dockonly: false',
border: false,
header: false,
dockonly: false,
layout: 'fit',
plugins: [new Ext.ux.DockPanel({
width: 300,
height: 350
})]
});
centerPanel.add(dockPanel);
centerPanel.doLayout();
}

Thanks and keep up the good work


In the next version (I'll upload by the end of the week) you can do this in many different ways:

1st method:



var dockPanel = new Ext.Panel({
title: 'dockonly',
html: 'dockonly: false',
border: false,
header: false,
dockonly: false,
layout: 'fit',
dockContainer: 'thetab',
plugins: [new Ext.ux.DockPanel({
width: 300,
height: 350
})]
});



'thetab' will be the id of the default dock container.
This way you will use StateManager support. Maybe it's better to manually assign an id to the new instance of the panel.

2nd method:


var dockPanel = new Ext.Panel({
title: 'dockonly',
html: 'dockonly: false',
border: false,
header: false,
dockonly: false,
layout: 'fit',
plugins: [new Ext.ux.DockPanel({
width: 300,
height: 350
})]
});
dockPanel.dock('thetab');


Forces to a dock container overriding StateManager...

3rd method:




var dockPanel = new Ext.Panel({
title: 'dockonly',
html: 'dockonly: false',
border: false,
header: false,
dockonly: false,
layout: 'fit',
stateful: false,
dockContainer: 'thetab',
plugins: [new Ext.ux.DockPanel({
width: 300,
height: 350
})]
});


'thetab' will be the id of the default dock container.
But the panel won't be stateful.

mabello
29 May 2008, 3:30 AM
Thanks for your kind reply.
So I'll be waiting for the next release, good to know because I was ready to try to fix it ;)

galdaka
29 May 2008, 9:02 AM
Guauuuuuuuuuuu!!!!!!!!!!!!!!!!!!


=D> =D> =D> =D> =D>

Thanks for share!!

This extension would be integrated in Ext!!!

illuminum
14 Jun 2008, 5:26 PM
if (you know how to use git) {
if (you know how to setup a centralized git repo) {
please set one up so that I can collaborate on this with you
// because I'm working on something kind of similar but I don't
// want to download old code and have it overridden when you release
// your next version
} else {
if (you would like) i can set one up for you
}
} else {
nevermind
}

monsterjoe
16 Jun 2008, 11:14 PM
Never noticed git before... I usually use svn for my projects.
Anyway I can't work on this extension for about 2 weeks.
So submit your changes and we will talk about git or svn in the future.

ViniciusCamara
18 Jun 2008, 8:55 AM
Hi monsterjoe,

Congratulations, great example.
May you help me about TabPanel question?

Can I create a layout like a "Viewport" with x-type: "Portal" inside the tabpanel?

I tried to put viewport inside tabpanel and did not work.

Although, congratulations again.
Best Regards

Vinicius

monsterjoe
20 Jun 2008, 12:01 AM
Hi monsterjoe,

Congratulations, great example.
May you help me about TabPanel question?

Can I create a layout like a "Viewport" with x-type: "Portal" inside the tabpanel?

I tried to put viewport inside tabpanel and did not work.

Although, congratulations again.
Best Regards

Vinicius


You can't add a viewport to a container.
From docs: "Viewport: A specialized container representing the viewable application area (the browser viewport)".
Maybe a panel with xtype: "portal"

ViniciusCamara
20 Jun 2008, 4:14 AM
I finally did! I will post the example soon.
Thanks a lot.
I see you around!

galdaka
23 Jun 2008, 8:33 AM
When arrive a stable version of this extension?

I can

thejoker101
10 Jul 2008, 1:14 PM
Is there any reason you made it convert a panel to a window? I'm looking for something similar, but I'm using something like the Portlets example and want to be able to merge panels into a tab panel.

monsterjoe
18 Jul 2008, 12:04 AM
Is there any reason you made it convert a panel to a window? I'm looking for something similar, but I'm using something like the Portlets example and want to be able to merge panels into a tab panel.

Well. The idea behind the extension is to have a panel that can be dragged around the document and docked to containers or left floating. Window is the ext widget for the purpose.
The main problem with adding panels to different containers is that containers affects his child features. For example if you add a not rendered Panel to a TabPanel, the TabPanel removes the header and the frame. But if you try to move that already rendered panel to an Accordion you will get an error because the Accordion can't add events to it (no header). So you need to manually add the header element and it's a complex task.
The same if you try to move a panel from the accordion to the TabPanel: you have to manually remove (or hide) the already rendered header or it will be displayed.
In portal example a portlet is a floating panel with header and frames so you will have the same problem (if not more problems).
The easier way: use a Panel without header and frame and (if needed) add it to a wrapping panel with the properties needed by the container.
So... it's not easy to do something similar with the Portal example. Maybe you can try to rewrite the Portal example to use this extension: rewrite Ext.ux.Portal to implement methods defined in Ext.ux.DockContainer.
Good luck ;)

mabello
18 Jul 2008, 12:25 AM
Monsterjoe,

You could be interested on this thread:

http://extjs.com/forum/showthread.php?p=196997#post196997

deepak
18 Jul 2008, 6:05 AM
Very nice indeed :)

But, I do have a few queries:

1. I am still trying to figure out a good reason to provide such a functionality - because in any layout, the components are placed in such a manner that they interact with each other flawlessly. Allowing the user to make this decision brings about too many questions and confusions.

2. How would the state be recorded? If say, I chose to use Cookies to save component state, then with such a plug-in, how and where would the state information reside?

However, it is a good and clean extension :-?

galdaka
19 Aug 2008, 8:14 AM
What is the status of this extension?

Thanks in advance,

ruggerboy
20 Aug 2008, 10:50 PM
Found a small funny .....

I downloaded v1.0a and placed it into Ext 2.2. When viewing the example I found that all the Dockable tabs do not become active if you click on the text portion of the tab. If i click just to the left of the text they work fine. I took a quick look and found that the onStripMouseDown event does not even fire when the text portion of the tab is clicked.

Can't figure out why ...

monsterjoe
8 Sep 2008, 2:35 AM
Very nice indeed :)

But, I do have a few queries:

1. I am still trying to figure out a good reason to provide such a functionality - because in any layout, the components are placed in such a manner that they interact with each other flawlessly. Allowing the user to make this decision brings about too many questions and confusions.

2. How would the state be recorded? If say, I chose to use Cookies to save component state, then with such a plug-in, how and where would the state information reside?

However, it is a good and clean extension :-?


1. Sometimes the components are placed in such a manner that they can't fit all the user needs. For example, the application I'm developing has about twenty different panels each doing something different. The application is used in an intranet to edit records in a database. We have many users with different tasks and each needs a number of panels to be immediately visible at the same time. With DockPanels they can setup the workspace to fit their needs and speed up their repetitive work.

2. The state is recorded using Ext.state.Manager. So, if you are using the CookieProvider, state is stored in cookies. If the panel is docked, the saved info is the container id. If undocked the window size and position.

PS: I can't work on this extension anymore. Too much things to do and actually the extension fits my needs (we don't have browser or ext version change problems because it's used in an intranet app) and anyway seems to work good. Sorry. Obviously, feel free to use, improve, upload changes or do whatever you want with the code. :D

nico
25 Sep 2008, 7:36 AM
Found a small funny .....

I downloaded v1.0a and placed it into Ext 2.2. When viewing the example I found that all the Dockable tabs do not become active if you click on the text portion of the tab. If i click just to the left of the text they work fine. I took a quick look and found that the onStripMouseDown event does not even fire when the text portion of the tab is clicked.

Can't figure out why ...

The Drag-Drop machanism has allready received the event and blocked it.
I added the function onMouseDown to Ext.ux.DockPanel.DD to regain the activation of the tabs:



Ext.extend(Ext.ux.DockPanel.DD, Ext.dd.DD, {
moveOnly:false,
headerOffsets:[100, 25],
_checkOver: function(box,x,y){
if(x < box.x || y < box.y || x > (box.x + box.width) || y > (box.y + box.height)) return false;
return true;
},
onMouseDown:function(e)
{
var p=this.panel.wrapper || this.panel;
if(p.ownerCt && p.ownerCt != this.win)
{
if(p.ownerCt.getXType()=="docktabpanel")
p.ownerCt.activate(p);
}
},
...


If you want to use this one, you also have to register xtypes for the containers because I am checking them:



Ext.reg("dockaccordionpanel", Ext.ux.DockAccordionPanel);
Ext.reg("docktabpanel", Ext.ux.DockTabPanel);


@monsterjoe Thank you very, very much for sharing this nice, usefull and solid work !!!

galdaka
25 Sep 2008, 11:06 AM
Where is the definitve code with your addons?

Is posible a live demo or zip with example for upload and testing in www.galdaka.es (http://www.galdaka.es)?

Thanks in advance,

ruggerboy
25 Sep 2008, 9:52 PM
Cool I will give the mod a try later today and let u know.

galdaka
25 Sep 2008, 10:40 PM
Cool I will give the mod a try later today and let u know.

Can

ruggerboy
26 Sep 2008, 4:05 AM
That works great ... still having some small hiccups but i am sure it is some thing in my code..

vicirst
6 Oct 2008, 9:57 AM
Love this extention, the application we've developed use manageiframe, and how to use dockpanel with manageiframe,
this is not working


var dp = new Ext.ux.DockPanel({
stateful: false,
width: 300,
height: 150
})
var ifx = new Ext.ux.ManagedIframePanel({
title : node.text,
loadMask : true,
defaultSrc : data,
});
var ix = new Ext.Panel({
title : node.text,
dockContainer: 'mainform-tab',
plugins: [dp,ifx
]
});

vicirst
20 Oct 2008, 7:51 AM
Any help?

Frenky
15 Dec 2008, 4:18 AM
really excelent work!!!!

archmisha
6 Jul 2009, 8:10 AM
Hi,
Is there any live demo available.
Sounds like a nice plugin, I would love to see it.

Thanks

helemary
16 Jul 2009, 6:28 AM
First of all, thanks for this terrific Extension/plugin. I'm currently playing with the dockable panel using ExtJS 3.0 within an Accordion Layout (Ext.ux.DockAccordionPanel).

I found an interesting error when you try re-order the panels by dragging and dropping them the within the accordion layout while having the animate property set to true. For instance, add the following line to your test program and you'll get this error:

Error: 'parentNode' is null or not an object


layoutConfig: {animate: true}

Might be something to look into may be :-?

Thanks

farracha
7 Aug 2009, 4:18 AM
Excellent work man.

Your extension is one of the best around.

Although, I wonder if it's possible to add tools to the dockpanels. I tried to add, but no success, I guess is not possible.
The tools would be handy in the floating panels as well on the accordion.

I wanted the tools to add a quick button to dock and undock the panel to a predefined dock container.

Cheers

farracha
7 Aug 2009, 5:42 AM
I modified your script to accomplish my needs.



this.win = new Ext.ux.DockWindow({
id: c.id + "_win",
layout:'fit',
plain: true,
title: c.title,
ddGroup: this.ddGroup,
panel: c,
stateful: true,
collapsible: c.collapsible,
closable: c.closable,
closeAction: c.closeAction,
hidemode: 'visibility',
tools: c.tools,
constrain: this.constrain == true ? this.constrain : false,
constrainHeader: this.constrainHeader == true ? this.constrainHeader : false,
width: this.width,
height: this.height
});


And for the new tools I might want when the panels are on an accordion, I altered the wrap function


wrap: function(config) {
var cfg = {title: this.title, closable: this.closable, border:false, items: this, layout:'fit', wrapped: this};
if(this.closable)
{
cfg.tools = [
{
id:'close'
,handler: function(e, target, panel){
var w = panel.wrapped;
if(w.closeAction == 'hide') {
w.undock();
w.win.hide();
}
else {
var ct = panel.ownerCt;
ct.remove(panel, true);
ct.doLayout();
}
}
},
{
id:'left'
,handler: function(e, target, panel){
var w = panel.wrapped;
w.undock();
}
}];
}
Ext.applyIf(cfg, config);
this.wrapper = new Ext.Panel(cfg);
return this.wrapper;
},
I have set the fill property to false on the accordion, but the panels still fills all the space. When you have only two panels for example, the second one is "missed" in the bottom.
Any suggestion why the fill is always on?


Thanks

adlakha.vaibhav
10 Sep 2009, 1:58 AM
When i use this plugin with ext-all-debug.js shipped with ext3.0, the panel clicks do not happen correctly, i can only select the tab by clicking on bottom left corner. However this works fine with ext2.1 the difference is dedug.js, no changes were required to the script i tried. Has someone run into a similar issue.

xLP
11 Sep 2009, 9:47 AM
When i use this plugin with ext-all-debug.js shipped with ext3.0, the panel clicks do not happen correctly, i can only select the tab by clicking on bottom left corner. However this works fine with ext2.1 the difference is dedug.js, no changes were required to the script i tried. Has someone run into a similar issue.

Hi,

I'm having this problem too, on several computers and browsers (IE, FF).
A colleague told me he couldn't encounter the bug, but maybe he was always clicking some corner (I wasn't aware you could activate by clicking lower left corner of the tab until I read your post).

This seems linked to a change in ExtJS, I don't know where, I traced inside the code and couldn't find something different comparing to ExtJS 2.1.

Disabling line 25553 in ext-all-debug.js
this.DDM.stopEvent(e); would fix it, at least in some conditions, BUT:
- I don't like touching ext-all file :)
- This line is present in 2.1 and doesn't seem to cause any problem...

I finally found another way, and I'd love to get DockPanel author opinion about it: in DockTabPanel, use the following:


_initDD: function(c) {
var tabHeader = Ext.get(this.getTabEl(c));
c.win.dd.setOuterHandleElId(tabHeader.id);

Ext.EventManager.on(tabHeader.id, "mousedown",
this.onStripMouseDown, this);

c.docked = true;
},

(You'll note I just added one line).

Why? Tracing, it appeared that with ExtJS 2.1, the drag handler code of ExtJS would get executed (some "handleMouseDown"), and then onStripMouseDown would get executed too, whereas in ExtJs 3, only handleMouseDown gets executed... (which is also the reason why I try commenting the "stopEvent").
So well, I tried adding the event again, and this fixed the problem.

Maybe the event should be unregistered somewhere else, don't know... Monsterjoe, any tip? ;)

Also, one more info, according to my tests, using ExtJS 3, onStripMouseDown is never executed on a tab panel which has DockPanel as plugin...

chaddjohnson
17 Apr 2010, 12:46 AM
Thank you xLP. I was experiencing the same issue, and this remedies the situation. No idea if it's the "right" solution, but nevertheless, I can click on tabs and give them focus now.

mike.tallroth
28 Apr 2010, 2:18 PM
After successfully applying the patch provided by xLP, the tab focus worked properly, but then I was getting an error from the findTargets() function in ext-all-debug.js, which was being called by the onStripMouseDown event handler.

Cannot read property 'disabled' of undefined

It turns out with the patch applied, when you try to close the tab (not drag it or focus it), the onStripMouseDown handler gets called a second time, after the first call already destroyed the tab.

By adding one more line to xLP's patch, this time in the onStripMouseDown handler, one more gotcha is fixed. This was using 3.0.3 only, haven't tested anything else.


if(t.close){
if(t.item.closeAction == 'hide') {
t.item.undock();
t.item.win.hide();
t.item.saveState();
}
else {
this.remove(t.item);
}
e.stopPropagation();
return;
}


Note, I've only added one line, the call to stopPropagation.

Joanne
16 Aug 2010, 1:45 PM
Thank you for your suggestion, Mike! I also got the same problem and your solution works well, even for Ext 3.2.1.


After successfully applying the patch provided by xLP, the tab focus worked properly, but then I was getting an error from the findTargets() function in ext-all-debug.js, which was being called by the onStripMouseDown event handler.

Cannot read property 'disabled' of undefined

It turns out with the patch applied, when you try to close the tab (not drag it or focus it), the onStripMouseDown handler gets called a second time, after the first call already destroyed the tab.

By adding one more line to xLP's patch, this time in the onStripMouseDown handler, one more gotcha is fixed. This was using 3.0.3 only, haven't tested anything else.


if(t.close){
if(t.item.closeAction == 'hide') {
t.item.undock();
t.item.win.hide();
t.item.saveState();
}
else {
this.remove(t.item);
}
e.stopPropagation();
return;
}
Note, I've only added one line, the call to stopPropagation.

e-get2
25 May 2011, 10:26 AM
I can't made DockPanel works in Extjs v4, this is the error:

Uncaught TypeError: Cannot call method 'onDock' of undefined

I'm using the code download of the post...

For Extjs 2.2 works.... but for v4 don't works...

When we will have an update???

This plugin is very necessary.