Accordion layout (Horizontal)

[Sherzod]

Soon...

[x11]

Сделайте заодно и пример, как программно листать внутренние панели вперед-назад.

Чтобы на главной панели было 2 кнопки (вперед-назад) и пользователь листает внутренние панели этими двумя кнопками.

Это будет полезно для организации галереи, т.к. в uniGUI пока что отсутствует компонента-галерея.

[Sherzod]

 

[Sherzod]

/**
* A version of Accordion layout, than is horizontal rather than vertical.
* @author Westy
* https://fiddle.sencha.com/#fiddle/297&view/editor
*/
Ext.define('Ext.ux.layout.container.HorizontalAccordion', {
        extend: 'Ext.layout.container.Accordion',

        alias: ['layout.horizontal-accordion'],

        vertical: false,

        defaultAnimatePolicy: {
            x: true,
            width: true
        }
    },

    function() {
        Ext.require(['Ext.layout.container.HBox'],

            function() {
                Ext.ux.layout.container.HorizontalAccordion.borrow(
                    Ext.layout.container.HBox, ['type', 'direction', 'horizontal', 'names', 'sizePolicy']);
            });
    }
);

function beforeInit(sender, config)
{
    config.layout = {
        type: 'horizontal-accordion',
        titleCollapse: false,
        animate: true
    };
    
    config.defaults = {
        bodyStyle: 'padding: 15px',
        headerPosition: 'left',
        titleRotation: 2, //0,1,2
        titleAlign: 'right',
        titlePosition: 1
    }
}

 

[x11]

@Sherzod неудобство в том, что кнопки ооочень маленькие и расположены между собой далеко.

Было бы значительно удобнее вот так: с большими кнопками, которые расположены рядом.

Юзабилити же!

[Sherzod]

On 11/19/2021 at 6:49 PM, x11 said:

Чтобы на главной панели было 2 кнопки (вперед-назад) и пользователь листает внутренние панели этими двумя кнопками.

Еще не успел проверить. Выложу чуть позже.

[Sherzod]

36 minutes ago, x11 said:

Было бы значительно удобнее вот так: с большими кнопками, которые расположены рядом.

[Sherzod]

52 minutes ago, x11 said:

Было бы значительно удобнее вот так: с большими кнопками, которые расположены рядом.

Можно и с кнопками.

[x11]

я верю, а почему вы не хотите показать как?

на примере

[Sherzod]

Ещё не подготовил, и не сделано до конца 😐

[Franco Grech]

Hello Sherzod,

I'd like to ask you something,

Regarding this thread, how did you do that the other panels collapsed by automatically?

I  try to find out but I couldn't.

Thank you for your help!
Franco

 

[x11]

On 11/26/2021 at 8:39 AM, Sherzod said:

Ext.define('Ext.ux.layout.container.HorizontalAccordion', {

а где скачать примеры, а куда вставлять код?

[Sherzod]

1 hour ago, x11 said:

а где скачать примеры, а куда вставлять код?

Ну, на данный момент нет готового примера. 

Но, выше, дана последовательность, что и куда вставлять и как собрать работающий пример. 

[x11]

так в том-то и дело, что непонятно, куда вставлять это

 

On 11/26/2021 at 8:39 AM, Sherzod said:

Ext.define('Ext.ux.layout.container.HorizontalAccordion', {
        extend: 'Ext.layout.container.Accordion',

        alias: ['layout.horizontal-accordion'],

        vertical: false,

        defaultAnimatePolicy: {
            x: true,
            width: true
        }
    },

    function() {
        Ext.require(['Ext.layout.container.HBox'],

            function() {
                Ext.ux.layout.container.HorizontalAccordion.borrow(
                    Ext.layout.container.HBox, ['type', 'direction', 'horizontal', 'names', 'sizePolicy']);
            });
    }
);

 

[Sherzod]

27 minutes ago, x11 said:

так в том-то и дело, что непонятно, куда вставлять это

Okay. (Не обещаю, но постараюсь сделать тестовые примеры...)

Наверное, Вы не до конца смотрели видео:

 

[x11]

Как я уже писал ранее, проблема в том, что ОЧЕНЬ неудобно, что нужно нажимать только на эти маленькие кнопки.

[Sherzod]

45 minutes ago, x11 said:

Как я уже писал ранее, проблема в том, что ОЧЕНЬ неудобно, что нужно нажимать только на эти маленькие кнопки.

 

46 minutes ago, x11 said:

Здесь все показано:

 

[x11]

...

 

[x11]

config.expandPrevItem = function() {
	var _break = false;
	sender.layout.getLayoutItems().forEach(function(pnl, i) {
		if (!pnl.collapsed && i > 0 && _break == false) {
		  _break = true;
		  sender.layout.getLayoutItems()[i - 1].expand();
		}
	
	})

};

config.expandNextItem = function() {
	var _break = false;
	sender.layout.getLayoutItems().forEach(function(pnl, i) {
		if (!pnl.collapsed && sender.layout.activeItemCount - 1 && _break == false) {
		  _break = true;
		  sender.layout.getLayoutItems()[i + 1].expand();
		}
	
	})

};

надеюсь правильно набрал текст кода

[x11]

On 11/26/2021 at 8:39 AM, Sherzod said:

extend: 'Ext.layout.container.Accordion',

Посмотрите, пожалуйста ошибку:

http://forums.unigui.com/index.php?/topic/18637-ошибка-not-found-extlayoutcontaineraccordionjs/