TUniPageControl отображения вкладок без кнопок прокрутки

[OlegTimkiv]

Добрый день!

Подскажите пожалуйста, есть какое-нибудь решение, для отображения вкладок - которые не помещаются, новой строкой? 

[Sherzod]

Добрый день,

Я проанализирую, но мне кажется в самой ExtJS не было такой возможности.

[Sherzod]

On 12/3/2023 at 2:11 PM, OlegTimkiv said:

Подскажите пожалуйста, есть какое-нибудь решение, для отображения вкладок - которые не помещаются, новой строкой? 

Мне кажется, что нет такой возможности на данный момент. Хотя, возможно есть решения обходными путями.

[Sherzod]

18 hours ago, Sherzod said:

Хотя, возможно есть решения обходными путями.

"Простое" использование UniPageControl...

[Sherzod]

On 12/3/2023 at 2:11 PM, OlegTimkiv said:

Подскажите пожалуйста, есть какое-нибудь решение, для отображения вкладок - которые не помещаются, новой строкой? 

 

1 hour ago, Sherzod said:

"Простое" использование UniPageControl...

 

1. UniPageControl1.ClientEvents.UniEvents ->

function beforeInit(sender, config) 
{
    config.segmentedTabs =
        Ext.create('Ext.button.Segmented', {
            layout: 'column',
            allowMultiple: false,
            id: config.id + '_segmented_tabs',
            items: [],
            listeners: {
                toggle: function(container, button, pressed) {
                    if (pressed) {
                        button._item.getEl().dom.click()
                    }
                }
            }
        });

    config.dockedItems = [{
        xtype: 'toolbar',
        dock: 'top',
        layout: 'column',
        items: [
            config.segmentedTabs
        ]
    }];
}

2. UniPageControl1.ClientEvents.ExtEvents ->

function beforerender(sender, eOpts)
{
    sender.tabPanel.tabBar.getRefItems().forEach(function(item){
        sender.segmentedTabs.add({
           text: item.text,
           _item: item,
           id: item.id + '_segment'
        });
    });
    Ext.util.CSS.updateRule('.x-segmented-button-item-horizontal.x-segmented-button-middle', 'border-left', '');
    Ext.util.CSS.updateRule('.x-segmented-button-item-horizontal.x-segmented-button-last', 'border-left', '');
    
    sender.tabPanel.on('tabchange', function(tabPanel, newCard, oldCard, eOpts) {
        Ext.getCmp(newCard.getId() + "_tab_segment").setPressed(true)}
    );
}

3. UniPageControl1.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    sender.tabPanel.tabBar.setHeight(sender.segmentedTabs.getHeight());
}

 

[Sherzod]

Но имейте в виду, что это решение требует некоторой доработки. Это решение полезно для "простого" использования UniPageControl...

[MSMK]

On 12/3/2023 at 3:11 PM, OlegTimkiv said:

Добрый день!

Подскажите пожалуйста, есть какое-нибудь решение, для отображения вкладок - которые не помещаются, новой строкой? 

Олег, ты что там изобретаешь?))

[x11]

Можно ли TUniTabControl сделать многострочньім?

[Sherzod]

3 minutes ago, x11 said:

Можно ли TUniTabControl сделать многострочньім?

Добрый день,

Рад Вас слышать!

Я проанализирую.

[x11]

я давно уже пьітался

 

[Sherzod]

Что касается PageControl, удалось ли Вам проверить приведенное выше решение?

[x11]

Нет, т.к. меня именно для TUniTabControl требуется решение.

Спасибо, если поможете найти решение.

Рад  Вас сльішать!

[Sherzod]

On 1/31/2024 at 12:10 PM, x11 said:

TUniTabControl требуется решение

Добрый день,

Попробуйте это решение:

1. UniTabControl.ClientEvents.UniEvents ->

function beforeInit(sender, config)
{
    config.segmentedTabs =
        Ext.create('Ext.button.Segmented', {
            layout: 'column',
            allowMultiple: false,
            id: config.id + '_segmented_tabs',
            items: [],
            listeners: {
                toggle: function(container, button, pressed) {
                    if (pressed) {
                        Ext.defer(function(){
                            sender.tabPanel.setActiveTab(sender.segmentedTabs.value)
                        }, 10);
                    }
                }
            }
        });
}

2. UniTabControl.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    sender.add({
        xtype: 'toolbar',
        dock: 'top',
        layout: {
            type: 'column'
        },
        items: [
            sender.segmentedTabs
        ]
    });
}

3. UniTabControl.ClientEvents.ExtEvents -> Ext.tab.Panel [tabPanel]

function tabPanel.tabchange(tabPanel, newCard, oldCard, eOpts)
{
    var tabControl = this.up('panel');
    var refItems = this.tabBar.getRefItems();
    
    if (tabControl.segmentedTabs.getRefItems().length == 0) {
        refItems.forEach(function(item){
          tabControl.segmentedTabs.add({
              text: item.text,
              _item: item,
              id: item.id + '_segment'
          })
        });            
      Ext.getCmp(this.tabBar.activeTab.getId() + "_segment").setPressed(true);
    } else {
        Ext.getCmp(this.tabBar.activeTab.getId() + "_segment").setPressed(true);
    }
}

 

[x11]

Спасибо. Почти работает.

Проблема в том, что если внутрь положить обьект, например, dbGrid, то сетка перекрьівает второй (нижний) ряд кнопок.

[Sherzod]

Я проверю.

[Sherzod]

3 hours ago, x11 said:

Проблема в том, что если внутрь положить обьект, например, dbGrid, то сетка перекрьівает второй (нижний) ряд кнопок.

Попробуйте:

function afterrender(sender, eOpts)
{
    sender.add({
        xtype: 'toolbar',
        dock: 'top',
        layout: {
            type: 'column'
        },
        items: [
            sender.segmentedTabs
        ],
        listeners: {
            resize: function() {
                var _sHeight = sender.segmentedTabs.getHeight();
                var _dHeight = _sHeight - sender.tabPanel.tabBar.getHeight();
                var _innerPanel = sender.innerPanel;
                _innerPanel.setBodyStyle('top', _dHeight + 'px');
                _innerPanel.setBodyStyle('height', (_innerPanel.getHeight() - _dHeight) + 'px');
            }
        }
    });
}

 

[x11]

Спасибо большое.

Вроде работает.

[x11]

 

On 2/2/2024 at 12:35 PM, Sherzod said:

Попробуйте:

В общем, оказалось, что работает частично.

1. Нижний ряд вкладок закрьівает сетка uniDBGrid - видно на картинке 1. Попробуйте изменть ширину окна браузера, вот тогда проблема уходит.

2. Нижняя часть сетки uniDBGrid вьілазит - видно на картинке 2. Попробуйте изменить вьісоту

окна браузера, вот тогда проблема уходит.

 

Я прикрепил тестовьій проект.

uniGUI_uniTabControl.rar

[Sherzod]

Простите за поспешные решения, я попробую проанализировать. 

[Sherzod]

13 hours ago, x11 said:

В общем, оказалось, что работает частично.

1. Нижний ряд вкладок закрьівает сетка uniDBGrid - видно на картинке 1. Попробуйте изменть ширину окна браузера, вот тогда проблема уходит.

2. Нижняя часть сетки uniDBGrid вьілазит - видно на картинке 2. Попробуйте изменить вьісоту

окна браузера, вот тогда проблема уходит.

Ok, попробуйте также это решение, оно должно сработать:

function afterrender(sender, eOpts)
{
    sender.add({
        xtype: 'toolbar',
        dock: 'top',
        layout: {
            type: 'column'
        },
        items: [
            sender.segmentedTabs
        ],
        listeners: {
            resize: function() {
                var _sHeight = sender.segmentedTabs.getHeight();
                //var _dHeight = _sHeight - sender.tabPanel.tabBar.getHeight();
                var _dHeight = _sHeight + sender.tabPanel.tabBar.getHeight();
                var _innerPanel = sender.innerPanel;
                //_innerPanel.setBodyStyle('top', _dHeight + 'px');
                //_innerPanel.setBodyStyle('height', (_innerPanel.getHeight() - _dHeight) + 'px');
                _innerPanel.setY(_dHeight + 10);
                sender.updateLayout();
            }
        }
    });
}

 

[x11]

4 hours ago, Sherzod said:

попробуйте также это решение, оно должно сработать

На простом примере работает.

К сожалению, я не думал, что все так сложно. У меня приложение на базе UniPageControl. Я добавил в тестовьій пример и опять не работает (см. картинку).

Надо бьіло мне сразу добавить UniPageControl.

Посмотрите, пожалуйста еще раз, что можно исправить. Спасибо.

uniGUI_uniTabControl1.rar

[Sherzod]

Я проверю.

[Sherzod]

[x11]

странно, у меня так

разрешение 1920х1080

[x11]

вот еще - проблема есть, не все вкладки видньі