1. #1
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    16
    Answers
    11
    siebmanb will become famous soon enough

      0  

    Default 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...

    Here is a sample of the code :

    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

  2. Thanks a lot.

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

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

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    686
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  4. #3
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    16
    Answers
    11
    siebmanb will become famous soon enough

      0  

    Default


    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 ?

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Quote Originally Posted by siebmanb View Post
    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 :

    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.

  6. #5
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    16
    Answers
    11
    siebmanb will become famous soon enough

      0  

    Default


    Thanks a lot.

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

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

Thread Participants: 2