PDA

View Full Version : making a toolbar float



toxkillfraex
16 Mar 2012, 12:23 AM
Is it possible to make a toolbar float over the content of a panel it's docked in?

and possibly hide/collapse it?

toxkillfraex
16 Mar 2012, 5:38 AM
fell of page bump

toxkillfraex
20 Mar 2012, 2:50 AM
still with the issue. Maybe I can achieve it with a container of some sort in the panel?

friend
20 Mar 2012, 4:33 AM
I'm not sure if this is what you want exactly, but it might give you some ideas:



var w = Ext.create('Ext.window.Window', {
bodyPadding: 5,
dockedItems: [{
xtype: 'panel',
collapsible: true,
dock: 'top',
height: 52,
items: [{
xtype: 'toolbar',
items: [{
text: 'A Button'
}]
}]
}],
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
width: 200
},{
xtype: 'textfield',
fieldLabel: 'First Name',
width: 200
}]
}],
layout: 'auto',
title: 'Collapsible Toolbar',
width: 300,
}).show();

toxkillfraex
20 Mar 2012, 4:52 AM
I'm not sure if this is what you want exactly, but it might give you some ideas:



var w = Ext.create('Ext.window.Window', {
bodyPadding: 5,
dockedItems: [{
xtype: 'panel',
collapsible: true,
dock: 'top',
height: 52,
items: [{
xtype: 'toolbar',
items: [{
text: 'A Button'
}]
}]
}],
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
width: 200
},{
xtype: 'textfield',
fieldLabel: 'First Name',
width: 200
}]
}],
layout: 'auto',
title: 'Collapsible Toolbar',
width: 300,
}).show();


I was hoping to create something like an image viewer and have the function buttons positioned over the image (with the option to collapse it). Yet docked items seem to only make the panel smaller and I'm trying to see if somebody here knows a css or ex.js way to make the toolbar float over it. The toolbar I'm using has been customized with css and a ui to be transparent.

By now, however, I'm heavily inclined to just drop the idea and go with a collapsible toolbar.