ExtJS 6: Responsive HBox vs. VBox

A basic ExtJS6 Classic Toolkit responsive technique for going from vertical to horizontal based on tall/wide screen, is by using responsiveConfig on a Viewport running Border layout, and change desired child’s regions from i.e. South to West. However, what if you want to do the same, but using an HBox vs. VBox layout, to get that additional flex functionality? Turns out it’s not as straightforward, however still pretty simple. You just need to use Box layout (ancestor of HBox and VBox) with “vertical” boolean config changing inside the responsiveConfig of the viewport. Here is the sample source code from Sencha Fiddle; click the link below to experiment with it in different window sizes:

https://fiddle.sencha.com/fiddle/sls/preview



VN:F [1.9.22_1171]
Rating: 6.9/10 (7 votes cast)
ExtJS 6: Responsive HBox vs. VBox, 6.9 out of 10 based on 7 ratings

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *