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:
Code:
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