Large pop up window is not fully shown.

Hi everybody:

I am testing ExtJS 4 and I am very happy with it, everything was working as expected until now.
I have acontroller action that creates a new window, and passes a view (defined as a container) as an item and then shows the created window as a pop up.

The problem is that this view is very large, and it is not fully shown, I mean it is cutted, splitted, I don't know how to explain. I need this window to be shown completelly as a pop up.

This is how it looks:

Attachment 41139



As you can see, the top part of the pop up is splitted and cant be moved because the title is not shown.

This is my code:


Controller function:

Code:

---

onNewQuoteButtonClick: function(button, e, options) {
        var win = Ext.create('Ext.window.Window', {
            title: 'New Whatever',
            modal: true,
            closable: true,
            items: [
            {
                xtype: 'anotherviewcontainer'
            }
            ]     
        });


        win.show();
    },

---

AnotherViewContainer,js:

Code:

---

Ext.define('App.view.AnotherViewContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.anotherviewcontainer',


    requires: [
        'App.view.anotherview01',
        'App.view.anotherview02',
        'App.view.anotherview03',
        'App.view.anotherview04',
        'App.view.anotherview05',
        'App.view.anotherview06',
        'App.view.anotherview07',
        'App.view.anotherview08',
        'App.view.anotherview09',
        'App.view.anotherview10'
    ],


    width: 1000,


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'toolbar',
                    height: 40,
                    width: 1000,
                    autoScroll: false,
                    vertical: false,
                    items: [
                        {
                            xtype: 'container',
                            height: 30,
                            width: 1000,
                            layout: {
                                type: 'absolute'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    x: 20,
                                    y: 10,
                                    height: 20,
                                    width: 270,
                                    text: 'something'
                                },
                                {
                                    xtype: 'button',
                                    x: 240,
                                    y: 0,
                                    border: 2,
                                    height: 30,
                                    width: 100,
                                    text: 'Cancel'
                                },
                                {
                                    xtype: 'button',
                                    x: 360,
                                    y: 0,
                                    height: 30,
                                    width: 100,
                                    text: 'Save & New'
                                },
                                {
                                    xtype: 'button',
                                    x: 480,
                                    y: 0,
                                    height: 30,
                                    width: 100,
                                    text: 'Save'
                                },
                                {
                                    xtype: 'button',
                                    x: 600,
                                    y: 0,
                                    height: 30,
                                    width: 100,
                                    text: 'Order Now'
                                },
                                {
                                    xtype: 'button',
                                    x: 720,
                                    y: 0,
                                    height: 30,
                                    width: 100,
                                    text: 'Generate Quote'
                                },
                                {
                                    xtype: 'button',
                                    x: 840,
                                    y: 0,
                                    height: 30,
                                    width: 100,
                                    text: 'Post to Invoice'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'anotherview01'
                },
                {
                    xtype: 'anotherview02'
                },
                {
                    xtype: 'anotherview03'
                },
                {
                    xtype: 'anotherview04'
                },
                {
                    xtype: 'anotherview05'
                },
                {
                    xtype: 'anotherview06'
                },
                {
                    xtype: 'anotherview07'
                },
                {
                    xtype: 'anotherview08'
                },
                {
                    xtype: 'anotherview09'
                },
                {
                    xtype: 'anotherview10'
                }
            ]
        });


        me.callParent(arguments);
    }


});

---

If I put a fixed height to the pop up window it is shown correctly, i can see the title bar and click onn the "X" close button.

Can someone tell me what I'm missing?

You put too much on the screen to fit your screen size .. what are you wanting to happen?
Scrolling?

Scott.

Hi Scott:

Yeah, a scroll bar is a good option.
The above capture does not show the scrollbar for the parent view, but there is a scrollbar there. The problem is that scrollbar is only for the background view.

Just set scroller for your parent container:

Code:

---

Ext.create('Ext.window.Window', {
  title: 'Hello',
  height: 200,
  width: 400,
  layout: {
    type: 'vbox',
    align: 'stretch'
  },
  autoScroll: true,
  items: [
  {
    xtype: 'panel',
    height: 150,
    html: 'panel'
  },
  {
    xtype: 'panel',
    height: 150,
    html: 'panel'
  }
  ]
}).show();

---

Scott

Thanks Scott.
I've tried autoScroll property before asking here but didn't work.
Your code helped me a lot. I've noticed that in my code, large views with autoscroll property did not work properly if height value is greater than the visible are of the browser. So I set a small value for height property, in this case 500 px and set autoScroll to true and now everythong is working well.

Thanks a lot!

Glad you got it working ..

Scott.