Button below Panel stays docked

[siebmanb]

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]

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]

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]

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]

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',
        }]
    }]
});