PDA

View Full Version : [4.1.0 - 4.2 beta] addDocked position error when panel has header



slemmon
17 Dec 2012, 8:18 AM
REQUIRED INFORMATION



Ext version tested:

Ext 4.1.0, 4.1.1, 4.2 beta



Browser versions tested against:

Chrome 23
IE 10
FF 17.0.1



DOCTYPE tested against:

strict



Description:

When adding a docked item using addDocked and passing in the second optional pos parameter the behavior of position is different depending on whether the owner component has a header. i.e. If there is no header then position 1 is the second position in the docked order. If there is a header then position 1 is the first position in the docked order.



Steps to reproduce the problem:

Create two panels - one with a header and one without. Give each two bottom-docked items. Add another docked item to each as dock: 'bottom' position 1.



The result that was expected:

Both new docked items should dock at the same position.



The result that occurs instead:

The panel with no header has the new docked item added as the second docked item.
The panel with a header has the new docked item added as the first docked item.



Test Case:




var panel = Ext.widget('panel', {
renderTo: Ext.getBody()
, height: 200
, width: 600
, layout: { type: 'hbox', align: 'stretch' }
, defaults: { flex: 1 }
, defaultType: 'panel'
, items: [{
itemId: 'panel1'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}]
}, {
itemId: 'panel2'
, title: 'panel 2'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}]
}, {
dockedItems: [{
xtype: 'toolbar'
, dock: 'top'
, items: [{
text: 'add at pos 1'
, handler: function () {
Ext.ComponentQuery.query('#panel1')[0].addDocked({
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
, items: ['new docked tb']
}, 1);
}
}, '-', {
text: 'add at pos 1'
, handler: function () {
Ext.ComponentQuery.query('#panel2')[0].addDocked({
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
, items: ['new docked tb']
}, 1);
}
}]
}]
}]
});








HELPFUL INFORMATION


See this URL for live test case: http://jsfiddle.net/slemmon/qGEKT/


Additional CSS used:

only default ext-all.css



Operating System:

OSX
Win8

mitchellsimoens
17 Dec 2012, 8:53 AM
The problem I see is the header is a docked item also so when you addDocked, it's really putting it in order properly when you think of the header as a docked item.

slemmon
17 Dec 2012, 8:58 AM
I would think that when it's evaluation position it would take into consideration that I'm adding a bottom-docked item with addDocked and header isn't a peer docked item then.

If I have left-docked items it looks like it honors the positioning of the bottom-docked items since the left-docked wouldn't participate in the docked order for bottom-docked items.

http://jsfiddle.net/slemmon/qGEKT/1/

Animal
17 Dec 2012, 10:07 AM
What do you mean by "position 1"?

Docked item docking order is determined by the weight config of the docked item.

Lighter weight goes further out as you would expect.

Headers have weight: -1

So if you want to dock outside of the header, use a weight less than that.

slemmon
17 Dec 2012, 10:23 AM
I was hoping that if I did owner.addDocked(cmp, 1) where cmp's dock property was 'bottom' that it would position cmp within owner based on the position of the other bottom-docked items. I was thinking that owner havint a titlebar or other non-bottom-docked items wouldn't factor since they weren't in the array of existing bottom-docked items.

I was thinking that position seemed relative to the other edge-docked items and just wouldn't include headers or other non body docked items on the same edge where the new item was being docked.

Perhaps I just didn't understand what the position param in addDocked() did. I was thinking it was the position with the same edge group.

But, when I just made the first and second components grids with column headers it changed the behavior back to what I was thinking for both panels - with and without header.

http://jsfiddle.net/slemmon/qGEKT/2/

slemmon
17 Dec 2012, 10:32 AM
After a little further testing it seems that when I have a panel with no header and a panel with a header adding doing panel.addDocked(cmp, 1) behaves one way if the docking is done with the docking on the bottom, but another when docking to top, left, or right.

While it's not what I was hoping it would do for left, top, right, it was at least consistent between the panel with and without the header.

Docking to bottom


var panel = Ext.widget('panel', {
renderTo: Ext.getBody()
, height: 200
, width: 600
, layout: { type: 'hbox', align: 'stretch' }
, defaults: { flex: 1 }
, items: [{
xtype: 'panel'
, itemId: 'panel1'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}]
}, {
xtype: 'panel'
, title: 'panel 2'
, itemId: 'panel2'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}]
}, {
xtype: 'panel'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'top'
, items: [{
text: 'add at pos 1'
, handler: function () {
Ext.ComponentQuery.query('#panel1')[0].addDocked({
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
, items: ['new docked tb']
}, 1);
}
}, '-', {
text: 'add at pos 1'
, handler: function () {
Ext.ComponentQuery.query('#panel2')[0].addDocked({
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
, items: ['new docked tb']
}, 1);
}
}]
}]
}]
});


Docking Left


var panel = Ext.widget('panel', {
renderTo: Ext.getBody()
, height: 200
, width: 600
, layout: { type: 'hbox', align: 'stretch' }
, defaults: { flex: 1 }
, items: [{
xtype: 'panel'
, itemId: 'panel1'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}]
}, {
xtype: 'panel'
, title: 'panel 2'
, itemId: 'panel2'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'bottom'
, height: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}, {
xtype: 'toolbar'
, dock: 'left'
, width: 22
}]
}, {
xtype: 'panel'
, dockedItems: [{
xtype: 'toolbar'
, dock: 'top'
, items: [{
text: 'add at pos 1'
, handler: function () {
Ext.ComponentQuery.query('#panel1')[0].addDocked({
xtype: 'toolbar'
, dock: 'left'
, height: 22
, items: ['new docked tb']
}, 1);
}
}, '-', {
text: 'add at pos 1'
, handler: function () {
Ext.ComponentQuery.query('#panel2')[0].addDocked({
xtype: 'toolbar'
, dock: 'left'
, height: 22
, items: ['new docked tb']
}, 1);
}
}]
}]
}]
});

Animal
17 Dec 2012, 10:52 AM
It's to do with weight

Added order is used, but weight also applies.

Weight is useful when you want non-standard nesting. See how left and right are full height with
top and bottom docked between them:

https://s3.amazonaws.com/uploads.hipchat.com/9804/25186/kk3d0qv1a8lln63/Screen%20Shot%202012-12-17%20at%2018.51.34.png

slemmon
17 Dec 2012, 10:58 AM
Ok. Fair enough. Looks like this was more an understanding issue on my part.
Was just surprised to see the header factored in when docking items on the bottom of the container.

Thx for the answers.

If I have further questions I'll open a new thread in the Q/A forums and stop muddying the bug forum with this line of inquiry. :)