How to scroll container in EXT JS but only to specific component? - extjs

Question

How to allow scrolling in extjs but only to some other component. For example, in the code below, the html component shouldn't go away from the screen.
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
scrollable: true,
items:[
{
xtype: 'datefield',
label: 'From',
},
{
xtype: 'datefield',
label: 'To',
},
{
padding: 50,
html: 'This should stick to the top',
height: 550,
},
{
xtype: 'grid',
height: 600,
scrollable: true
}
]
});

Answer 1

There is a few issues with your code. First, the container you add to the body is set to scrollable, set it to false if you don't want it scrolling.
Then you add it to the body element, even if it is not scrollable, its height will be the sum of its children, if that is taller than your body element, scrollbar will appear. But it is important to notice in this case what is scrolling is the body, not the component.
Then you said you want it to stick that html component on top, but what do you exactly mean by that? Make it appear above the two inputs? If you want that, add docked: 'top' to it.
Adding your container into a viewport instead of directly to body is a better approach, you can test this in sencha fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
const container = Ext.create('Ext.Container', {
scrollable: true,
items: [{
xtype: 'datefield',
label: 'From',
}, {
xtype: 'datefield',
label: 'To',
}, {
padding: 50,
html: 'This should stick to the top',
height: 550,
}, {
xtype: 'grid',
height: 600,
scrollable: true,
data: Array.from(Array(100).keys()).map(value=>({value})),
columns: [{text: 'value',dataIndex: 'value'}]
}]
});
Ext.Viewport.add(container);
}
});
Anyways, I don't really understand what are you trying to achieve, because if you set the outer component non-scrollable and put it into a component smaller than ~500px, how do you expect to see your grid? I suggest to take a