PDA

View Full Version : Button below Panel stays docked



siebmanb
25 Apr 2012, 4:49 AM
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...

Here is a sample of the code :


app.views.MBProjetPresentationView = Ext.extend(Ext.Panel, {
items: [{
xtype: 'dataview',
scroll: 'vertical',
height: '100%',
},
{
ui: 'bouton',
xtype: 'button',
}],
});

Any idea why the button stays docked ?

Thanks you all

scottmartin
25 Apr 2012, 10:40 AM
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?

Regards,
Scott.

siebmanb
25 Apr 2012, 10:46 AM
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 ?

vietits
25 Apr 2012, 4:44 PM
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...

Here is a sample of the code :


app.views.MBProjetPresentationView = Ext.extend(Ext.Panel, {
items: [{
xtype: 'dataview',
scroll: 'vertical',
height: '100%',
},
{
ui: 'bouton',
xtype: 'button',
}],
});

Any idea why the button stays docked ?

Thanks you all
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.

siebmanb
4 May 2012, 12:32 AM
Thanks a lot.

I changed my layout a bit, works fine now. Here is the new layout :



app.views.MyView = Ext.extend(Ext.Panel, {
scroll: 'vertical',
height: '100%',


items: [{
items: [{
xtype: 'dataview',
},
{
xtype: 'button',
}]
}]
});