PDA

View Full Version : [FIXED] Panel.insert not respecting docked configuration



quickasd
26 Apr 2012, 1:44 AM
Inserting items trough Panel.insert() don't produce expected results with docking configurations.


REQUIRED INFORMATION


Ext version tested:

Sencha Touch 2.0.1
Browser versions tested against:

Chrome, Mobile Safari
Description:

To achieve a idiomatic layout both in ST1 and ST2 the following items are to be added to a panel in this order: left panel with optional toolbar(docked left), toolbar (docked top), panel items for card layout. (eg kitchensink)
After removing and then reinserting back the left panel in position 0 the docked layout is broken (while in ST1 was working)
Thought correctly ordered in the main panel the displayed result look like if declared in the order: toolbar, left panel, panel items
Steps to reproduce the problem:

Create an idiomatic layout
Execute App.view.main.remove(Ext.ComponentQuery.query('#menuPanel')[0],false)
Execute App.view.main.insert(0,Ext.ComponentQuery.query('#menuPanel')[0])
The result that was expected:

Consistent docking
The result that occurs instead:

Uncorrect docking
Test Case:
Create a idiomatic layout:



Ext.define("App.view.Main", { extend: 'Ext.Panel',
xtype:'main',
config: {
fullscreen:true,
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
},
items:[
{
xtype:'panel',
id:'menuPanel',
width: 320,
docked: 'left',
layout:'fit',
items:[
{
xtype:'toolbar',
docked:'top',
title:'Menu'
},
]
},

{
xtype:'toolbar',
title:'App Title',
docked:'top',
},
{xtype:'container',html:'Panel'}
],


Remove and reinsert in postion 0 the left docked panel:


App.view.main.remove(Ext.ComponentQuery.query('#menuPanel')[0],false)
App.view.main.insert(0,Ext.ComponentQuery.query('#menuPanel')[0]




HELPFUL INFORMATION




Screenshot or Video:

a) Original layout
b) After command
Debugging already done:

Original dom structure:
<div class="x-docking-horizontal">
{MENU left}
<div class="x-docking-vertical">

{TITLE top}{PANEL}

</div>
</div>

Erratic resulting dom structure is as follows:
<div class="x-docking-horizontal">
<div class="x-docking-vertical">

{TITLE top}
<div class="x-docking-horizontal">

{MENU left}{PANEL}

</div>

</div>
</div>

mitchellsimoens
26 Apr 2012, 6:31 AM
I'm trying to create a test case to reproduce this. I made this and used 2.0.1 but it cannot reproduce it


var panel = new Ext.Panel({
fullscreen : true,
items : [
{
html : 'Hello there'
},
{
xtype : 'toolbar',
docked : 'top',
title : 'Hello',
items : [
{
text : 'add/remove',
handler : function(button) {
var toolbar = button.up('toolbar');

panel.remove(toolbar, false);
panel.insert(0, toolbar);
}
}
]
}
]
});

I noticed in your explanation you were just removing it and inserting it into the same container which is what I am doing.

quickasd
26 Apr 2012, 7:14 AM
Dear Mitchell,
your test case have only one top-docked component, you should have at least a left and a top docked panel to see the behavior.
A typical example where this is happening is the idiomatic layout (the one used in kitchensink).
My test case is just a simplified example, but if you are having problems with it you can just browse to kitchensink and write in the console:

1) Ext.ComponentQuery.query('mainview')[0].remove(Ext.ComponentQuery.query('#mainNestedList')[0],false)
2) Ext.ComponentQuery.query('mainview')[0].insert(0,Ext.ComponentQuery.query('#mainNestedList')[0])

You will immediately see how the layout is broken

mitchellsimoens
26 Apr 2012, 7:19 AM
So something like this?


var panel = new Ext.Panel({
fullscreen : true,
items : [
{
html : 'Hello there'
},
{
xtype : 'toolbar',
docked : 'top',
title : 'Hello',
items : [
{
text : 'add/remove',
handler : function (button) {
var toolbar = button.up('toolbar');

panel.remove(toolbar, false);
panel.insert(0, toolbar);
}
}
]
},
{
xtype : 'container',
docked : 'left',
width : 200,
html : 'Left dock'
}
]
});

Normally the order of items dictates the position of things. Like if I were to move the left docked container before the top docked toolbar, the toolbar will not take up full width as the left docked container takes up 200px. Since we are inserting at zero index the top docked toolbar should take up full width is what I would expect. Is this the error you are seeing?

quickasd
26 Apr 2012, 7:40 AM
This is exactly what I would expect.
Consider your example but ordered as left and then top docked, like in kitchensink.
If you remove and then re-insert at position zero the left panel (exactly where it was at the beginning) the layout is broken.


var panel = new Ext.Panel({ fullscreen : true,
items : [
{
id : 'leftbar',
xtype : 'container',
docked : 'left',
width : 200,
html : 'Left dock'
},


{
xtype : 'toolbar',
docked : 'top',
title : 'Hello',
items : [
{
text : 'add/remove',
handler : function (button) {
var toolbar =panel.down('#leftbar');


panel.remove(toolbar, false);
panel.insert(0, toolbar);
}
}
]
},
{
html : 'Hello there'
},


]

});

mitchellsimoens
26 Apr 2012, 7:53 AM
Ok cool, just making sure we are on the same page and have a fully runnable test case.