ExtJS 3 - Scrollable Hbox layout

Při řešení složitějších layoutů narazíte na limity ExtJS, které jsou nepsaným pravidlem v dokumentaci. Scrolování v hbox layoutu je tedy nemožné pokud si nepomůžete sami.

Po pročtění fóra, kde pravděpodobně začnete hledat, narazíte na několik možností. Jednou z nich je přepsání funkce onLayout, která je však v ExtJS 3.4.1 úplně jiná a novou verzi overridu nikdo nevytvořil. Druhou možností je použít Animaluv Flow layout. Demo Flow layoutu používá qooxdoo ve svém demu.

Pokud se nechcete pouštět do těchto zběsilostí, můžete použít následující řešení:

Ext.override(Ext.layout.HBoxLayout, { 
    calculateChildBoxes: function(visibleItems, targetSize) {
        ... 
        var tw = nonFlexWidth + padding.left + padding.right; 
        if (width < tw) { 
           availHeight -= this.scrollOffset || 19; 
           boxes[visibleCount-1].component.el.setStyle(
               'padding-right', padding.right
           ); 
           this.innerCt.setStyle('overflow-x', 'auto'); 
        } 

        var shortfall = desiredWidth - width, 
            tooNarrow = minimumWidth > width; 
        ... 
    }
}

Tento override funguje pouze pro non flex konfiguraci, což je logické. Flex Vám v daném layoutu zajistí to, aby se elementy procentuálně rozdělily na celou šířku kontejneru na základě hodnoty flex.

Nejdříve si tedy vezmeme non flex width a odečteme od ni oba dva paddingy. Protože se však poslední viditelný element zobrazuje bez paddingu při nastaveném overflow, je potřeba k poslednímu elementu tento padding přidat. Protože nechceme mít v defaultu viditelný prostor pro scrollbar, je config scrollOffset ponechán prázdný. Pokud je tedy hodnota prázdná, odešítáme o výšky, se kterou je počítáno při vykreslování boxů, velikost scrollbaru. Scrollbar samotný se zobrazuje pouze ve chvíli, kdy se všechny boxy nezobrazují v daném kontejneru. Posledním krokem je nastavení overflow v ose x. Touto jednoduchou modifikací docílíme scrollování v Hbox layoutu.