Jump to content

Accordion layout (Horizontal)


Sherzod

Recommended Posts

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

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

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

Link to comment
Share on other sites

/**
* 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
    }
}

 

  • Thanks 1
Link to comment
Share on other sites

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

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

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

Screenshot_7.jpg

  • Upvote 1
Link to comment
Share on other sites

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

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

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

image.thumb.png.95e5164ce336bdb0a27b0dd2b39d2c5a.png

Link to comment
Share on other sites

  • 1 month later...
1 hour ago, x11 said:

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

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

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

Link to comment
Share on other sites

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

 

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']);
            });
    }
);

 

Link to comment
Share on other sites

27 minutes ago, x11 said:

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

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

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

 

  • Thanks 1
Link to comment
Share on other sites

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

Screenshot_3.jpg

Screenshot_4.jpg

Link to comment
Share on other sites

45 minutes ago, x11 said:

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

 

46 minutes ago, x11 said:

Screenshot_4.jpg

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

 

  • Thanks 1
Link to comment
Share on other sites

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();
		}
	
	})

};

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

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...