PDA

View Full Version : Buffered Grid Example - question



radutoev
22 Nov 2011, 6:29 AM
Hello, I am trying to use the example at http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/buffer-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
22 Nov 2011, 8:52 AM
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
22 Nov 2011, 11:12 PM
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?