Answered: Button below Panel stays docked

Answered: Button below Panel stays docked

Hello everyone,

I have a simple problem for you today. Inside an Ext.Panel, I have an Ext.DataView and an Ext.Button. My DataView is filled by data from my server, it works fine.

My problem : the Ext.Button is at the bottom of the Panel, hidden behind my tabs. I can move the button, using CSS (position:relative;top:-30px) but it stays docked to the bottom and doesn't move while scrolling the DataView...

You are adding another item to your panel. If you want a button inside your dataview that scrolls, then you would have to create a button using CSS for example to be part of the view itself .. or did I not understand?

That would actually work yes but I want to use the power of ExtJS and use its button element...
I am adding another element to my panel yes, but why the panel does not include the button at the bottom of the DataView ?

I have a simple problem for you today. Inside an Ext.Panel, I have an Ext.DataView and an Ext.Button. My DataView is filled by data from my server, it works fine.

My problem : the Ext.Button is at the bottom of the Panel, hidden behind my tabs. I can move the button, using CSS (position:relative;top:-30px) but it stays docked to the bottom and doesn't move while scrolling the DataView...

1. You defined dataview with its height set to '100%' so it will occupy all the space of parent panel. That causes the button is hidden because it is outside of panel viewport. If you set height to less than 100%, the button will show in the space of parent panel.
2. Because the button is a sibbling but not child of dataview so when the content of dataview is scrolled the button will stand still.