Some experiments and thoughts on all things from Mitchell Simoens

List and the scrollDock config

1 min read

With Ext JS 6 modern toolkit and Sencha Touch 2, you can have docked items on an Ext.dataview.List without wrapping the List in a Container or Panel like this:

Notice the docked config on the toolbar and notice in the preview this adds the toolbar to the bottom of the list and does not take part in the scrolling of the list. What if you wanted to add a component to be beginning or end of the list and take part in the scrolling of the list? For this, Sencha Touch 2 has had the scrollDock config since 2.4.0 I believe, not sure exactly when this was first introduced and of course in the merge of Ext JS and Sencha Touch into Ext JS 6, this config still exists. You use it just like the docked config:

Now the toolbar isn't just docked to the bottom but is at the end of the list and will scroll with the list.

Written by Mitchell Simoens who is a long time nerd developing software and building computers and gadgets. Anything expressed on this website are Mitchell Simoens's alone and do not represent his employer.
© Copyright 2023 Mitchell Simoens Site