djkraz
10 Sep 2010, 2:31 PM
I am trying to create something very similar to what happens when you click in the "What's on your mind?" textbox on facebooks newsfeed page. For anyone that's not familiar with it, I want to have an omnipresent toolbar with a single line textbox in it that when focused on will expand to 2 lines and provide ancillary options.
I tried a bunch of things but no matter what I do, after calling removeDocked or setHeight on docked panel, doComponentLayout doesn't do anything (no errors either). With removedDocked I end up with white space where the panel was and with setHeight, the panel changes size but the non docked panels or docked toolbars below the item get covered up. Is this a bug or do I need to call a different routine?
Here is a stripped down runnable example:
Ext.setup({
fullscreen: true,
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Test',
centered: true,
items: [
{
text: 'removeDocked',
handler: function() {
panel.removeDocked(form, false);
panel.doComponentLayout();
}
}, {
text: 'setHeight',
handler: function() {
form.setHeight(80);
panel.doComponentLayout();
}
}
]
});
var form = new Ext.form.FormPanel({
dock: 'top',
items: [
{
xtype: 'textfield',
name: 'status',
placeHolder: 'What\'s on your mind?'
}
]
});
var panel = new Ext.Panel({
dockedItems: [form, toolbar],
fullscreen: true,
items: [{ html: 'test<br />test 2<br />test3'}]
});
}
});
I tried a bunch of things but no matter what I do, after calling removeDocked or setHeight on docked panel, doComponentLayout doesn't do anything (no errors either). With removedDocked I end up with white space where the panel was and with setHeight, the panel changes size but the non docked panels or docked toolbars below the item get covered up. Is this a bug or do I need to call a different routine?
Here is a stripped down runnable example:
Ext.setup({
fullscreen: true,
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var toolbar = new Ext.Toolbar({
dock: 'top',
title: 'Test',
centered: true,
items: [
{
text: 'removeDocked',
handler: function() {
panel.removeDocked(form, false);
panel.doComponentLayout();
}
}, {
text: 'setHeight',
handler: function() {
form.setHeight(80);
panel.doComponentLayout();
}
}
]
});
var form = new Ext.form.FormPanel({
dock: 'top',
items: [
{
xtype: 'textfield',
name: 'status',
placeHolder: 'What\'s on your mind?'
}
]
});
var panel = new Ext.Panel({
dockedItems: [form, toolbar],
fullscreen: true,
items: [{ html: 'test<br />test 2<br />test3'}]
});
}
});