Buffered Grid Example - question

[radutoev]

Hello, I am trying to use the example at http://dev.sencha.com/deploy/ext-4.0...ffer-grid.html but I'm having difficulties with it. What I am trying to do is add a gridpanel inside a panel:

Ext.define('FR.view.widgets.BufferedTest',{	extend  : 'Ext.panel.Panel',
	alias   : 'widget.bufferedTest',
	height : 300,
	items   : [{
		id : 'machinesList',
		xtype : 'gridpanel',
		store  : 'Machines',
		width  : '100%',
		height : '100%',
		columnsLines : true,
		stripeRows  : true,
		
	    verticalScrollerType: 'paginggridscroller',
	    invalidateScrollerOnRefresh: false,
	    disableSelection: true,
        
		columns : [{header: 's',  dataIndex: 's', flex : 1},
		           {header: 'm',  dataIndex: 'm', width : 100},
		           {header: 'S',  dataIndex: 's', width : 75},
		           {header: 'G',  dataIndex: 'g', width : 50}
        ]
	}],
	initComponent : function(){
		this.callParent();
	}
});

I've setup the store, model and controller so as to retrieve data from a java server side app.
I define a component that extends Viewport and on Ext.apply function I add multiple items including the component specified earlier. On Ext.ready I run Ext.create(ExtendedViewport). Everything works ok, including retrieving data on the mouse scroll action

he problem is that the actual scrollbar is rendered really weird. When I inspect the generated html I see that there are three scroller divs of width 1px. Also, everytime I resize the browser another three scroller divs are added.

Any suggestions?
Thanks

[tobiu]

your container has no layout specified (for example 'fit').

i would also recommend to add non primitive configs inside of the initComponent, but this may be the cause since i have used ext 3 way too long.

[radutoev]

But in what way would the layout influence anything?
Doesn't the component have a default layout if none is specified. And if the default layout is absolute and there is only one child with width and height set to 100% I imagine that the child will get rendered to have the size of its parent's body. Correct?(I'm not sure since I've started using ExtJS a week ago .

Why do you recommend ading non primitive configs in initComponent?