PDA

View Full Version : [4.0.2a] Am I using Placeholder correctly?



slemmon
29 Aug 2011, 6:28 PM
I'm having trouble with placeholder. I set it for the south panel and it's ok. I set it for a west or east panel and it collapsed to 4 pixels.

You can take the code below and drop it right into the border layout's editable space in the API docs to see what it does.


Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5',
collapsible: true,
placeholder: Ext.widget('toolbar', {
items: [{
xtype: 'tool'
, type: 'close'
}]
})
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
placeholder: Ext.widget('toolbar', {
items: [{
xtype: 'tool'
, type: 'close'
}]
})
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});

raz0r1
30 Aug 2011, 4:02 AM
if i understand you right, you are using it "correctly" but it is not possible as far as i know, to use toolbars as vertical placeholders.

slemmon
30 Aug 2011, 5:22 AM
What's driving me crazy is that using it on a west collapsible panel is how I used it when I first learned it existed. I had a west panel with an accordion layout with three items all non-floating menus. When I collapsed it I had a toolbar with one item of type tool and three buttons. I've tried for hours now to reproduce it and I cannot seem to. But, it absolutely worked the very first time I set it up. :(

raz0r1
30 Aug 2011, 6:15 AM
referring to
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-placeholder (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-placeholder)

it seems like you are not allowed to use toolbar. you only have to add an array of tools you want to add.

i never used it on my own but i hope that helps.

slemmon
30 Aug 2011, 6:50 AM
In my current app I had a west region with floating : false menus and I'd collapse that panel and replace it with a toolbar with a panel.Tool and three buttons. Requirements matured and the west panel needed to end up being a south panel with a grid and multiple columns so I dropped the west panel and made a south instead.

I have a menu of options in my south toolbar and I wanted quick access to them when I collapsed the region (but not my floating it) so I made a toolbar placeholder with 4 buttons on the left and a panel.Tool for expand on the right and that works ok.

And that's about what I had on my west panel at one point, too, but for hours now I cannot get it working again. And I don't have a versioning system set up so I can't go back 2 weeks in my code. :(

skirtle
31 Aug 2011, 2:08 PM
Your original code works for me if I just put vertical: true on the toolbar.

slemmon
31 Aug 2011, 4:58 PM
This. This is the happiest I've ever been.
Thank you for the tip, skirtle. Worked perfectly.