Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Why is this Ext.Panel not scrollable?

  1. #1

    Default Why is this Ext.Panel not scrollable?

    I am attempting to make a window with a 2 tab TabPanel that has 1 Panel and 1 FormPanel in it. Here is the code:

    store = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
    fields: ['asset_label', 'asset_url', 'asset_id', 'asset_thumbnail'],
    root: 'assets'
    }),
    baseParams: {
    __mode: 'image_gallery_search_results',
    blog_id: extBlogId,
    search_query: ''
    },
    proxy: new Ext.data.HttpProxy({
    url: ScriptURI,
    method: 'POST'
    }),
    autoLoad: true
    });

    store2 = new Ext.data.SimpleStore({
    data: [['http://www.codemonkeyramblings.com/demotivators/freedom_of_speech_demotivator.jpeg', '1', 'Freedom of Speech']],
    fields: ['asset_url', 'asset_id', 'asset_label']
    });


    var dataview = new Ext.DataView({
    frame: true,
    autoHeight: true,
    tpl: new Ext.XTemplate(
    '<tpl for=".">',
    '<div style="float:left" id="{asset_id}">',
    '<img style="height:50px;width:50px" src="{asset_thumbnail}" title="{asset_label}"></div>',
    '</tpl>'),
    store: store,
    emptyText: 'No image assets'
    });

    imagePanel = new Ext.Panel({
    frame: true,
    autoHeight: true,
    layout: 'fit',
    title: 'Demotivators',
    items: dataview,
    autoScroll: true
    });

    igTabPane = new Ext.TabPanel({
    frame: true,
    autoHeight: true,
    autoHeight: true,
    layoutOnTabChange: true,
    activeItem: 0,
    items: [ imagePanel, searchPanel ],
    });

    extImageGalleryWindow = new Ext.Window({
    height: 500,
    width: 500,
    frame: true,
    closeable: true,
    resizable: true,
    items: [ igTabPane ],
    layout: 'fit',
    });

    I want imagePanel to be scrollable, but scrollbars only appear at all once I add autoScroll to extImageGalleryWindow. Could someone explain what I am doing wrong and/or how ExtJS determines what to make scrollable?

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    imagePanel is fitting the DataView, so the DataView does not overflow. That's what you ask for.

  3. #3

    Default

    I removed that and it's still not scrollable. Is there something that you can tell I'm missing from my code to make that panel scrollable?

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Make the DataView's style overflow:hidden;zoom:1 to force it to have layout. Then it should overflow the Panel bounds, and the autoScroll Panel should offer scrollbars.

  5. #5

    Default

    Is this what you mean?

    Code:
        var dataview = new Ext.DataView({
            frame: true,
            autoHeight: true,
            tpl: new Ext.XTemplate(
                '<tpl for=".">',
                    '<div style="float:left" id="{asset_id}">',
                    '<img style="height:50px;width:50px" src="{asset_thumbnail}" title="{asset_label}"></div>',
                '</tpl>'),
               store: store,
               emptyText: 'No image assets',
               autoScroll:true,
               style: {
                   overflow: 'hidden',
                   zoom: 1
               }
           });

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Yes. Does it work?

  7. #7

    Default

    Unfortunately, it doesn't. I've attached a screenshot to show how it behaves.
    Attached Images Attached Images

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    And the panel you put that inside is now auto layout (no layout configured), and autoScroll: true?

  9. #9

    Default

    Yes. Here's the code as it currently stands:

    Code:
    store = new Ext.data.Store({
        reader: new Ext.data.JsonReader({
            fields: ['asset_label', 'asset_url', 'asset_id', 'asset_thumbnail'],
            root: 'assets'
        }),
        baseParams: {
                        __mode: 'image_gallery_search_results',
                        blog_id: extBlogId,
                        search_query: ''    
            },
        proxy: new Ext.data.HttpProxy({
            url: ScriptURI,
            method: 'POST'
        }),
        autoLoad: true
    });
    
    var dataview = new Ext.DataView({
        frame: true,
        autoHeight: true,
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
            '<div style="float:left" id="{asset_id}">',
            '<img style="height:50px;width:50px" src="{asset_thumbnail}" title="{asset_label}"></div>',
            '</tpl>'),
        store: store,
        emptyText: 'No image assets',
        autoScroll:true,
        style: {
            overflow: 'hidden',
            zoom: 1
        }
    });
    
    imagePanel = new Ext.Panel({
        frame: true,
        autoHeight: true,
        title: 'Demotivators',
        items: dataview,
        autoScroll: true,
        style: {
            overflow: 'hidden',
            zoom: 1
        }
    });
    
    igTabPane = new Ext.TabPanel({
        frame: true,
        autoHeight: true,
        autoHeight: true,
        layoutOnTabChange: true,
        activeItem: 0,
        items: [imagePanel, searchPanel ],
    });
    
    extImageGalleryWindow = new Ext.Window({ 
        height: 500,
        width: 500,
        frame: true,
        closeable: true,
        resizable: true,
        items: [ igTabPane ]
    });

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    imagePanel may not be autoHeight: true

    That disables the TabPanel from setting its height. So it won't be hight-limited, and so won't display scrollbars.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •