Create dropdown menu for UniPageControl

[artem_niko]

Hello!

Is it possible create UniButton with dropdown menu in header UniPageControl?

For example:

I'm about, that all tabsheet's will be in dropdown menu and then I go to selected tabsheet.

[Sherzod]

Hello, 

It can be done I think. 

[artem_niko]

8 minutes ago, Sherzod said:

Hello, 

It can be done I think. 

How?

[Sherzod]

22 minutes ago, artem_niko said:

How?

At the moment it looks like this:

[artem_niko]

4 minutes ago, Sherzod said:

At the moment it looks like this:

This is standard UniMenuButton?

How about if tablets will be 10, 20 or more?

Where will be this button?

[Sherzod]

Need to analyze.

[Sherzod]

16 hours ago, artem_niko said:

This is standard UniMenuButton?

Yes.

16 hours ago, artem_niko said:

How about if tablets will be 10, 20 or more?

Where will be this button?

Then like this I think (with header)

[artem_niko]

2 hours ago, Sherzod said:

Yes.

Then like this I think (with header)

What propertys of UniMenuButton? Some JS? Anchors?

How you create top line in UniPageControl with this UniMenuButton?

[Sherzod]

5 hours ago, artem_niko said:

How you create top line in UniPageControl with this UniMenuButton?

I'll try to complete the working code and let you know.

[artem_niko]

1 minute ago, Sherzod said:

I'll try to complete the working code and let you know.

Ok, I'm will be waiting answer from you.

[Sherzod]

28 minutes ago, artem_niko said:

I'm will be waiting answer from you.

Made the following:

1. UniMenuButton1
2. UniPageControl1.ClientEvents.ExtEvents -> function tabPanel.afterrender(sender, eOpts)

function tabPanel.afterrender(sender, eOpts)
{
    var tabItems=[];
    this.tabBar.getRefItems().forEach(function(item,i){
        tabItems.push({
            index: i, 
            text: 
            item.title, 
            handler: function(item){
                sender.setActiveItem(item.index)
            }
        })
    });
    this.addTool({
        text: 'Sheets', 
        xtype: 'splitbutton',  
        menu: new Ext.menu.Menu({items: tabItems})
    });
}

[artem_niko]

44 minutes ago, Sherzod said:

Made the following:

1. UniMenuButton1
2. UniPageControl1.ClientEvents.ExtEvents -> function tabPanel.afterrender(sender, eOpts)

function tabPanel.afterrender(sender, eOpts)
{
    var tabItems=[];
    this.tabBar.getRefItems().forEach(function(item,i){
        tabItems.push({
            index: i, 
            text: 
            item.title, 
            handler: function(item){
                sender.setActiveItem(item.index)
            }
        })
    });
    this.addTool({
        text: 'Sheets', 
        xtype: 'splitbutton',  
        menu: new Ext.menu.Menu({items: tabItems})
    });
}

Incredible! Excellent! Thank's, @Sherzod!

One small question: how add icon (icon as in all tab sheets in ImageIndex)?

[Sherzod]

Thanks.

12 minutes ago, artem_niko said:

One small question: how add icon (icon as in all tab sheets in ImageIndex)?

I think you can simply use fontawesome icon:

function tabPanel.afterrender(sender, eOpts)
{
    var tabItems=[];
    this.tabBar.getRefItems().forEach(function(item,i){
        tabItems.push({
            iconCls: 'x-fa fa-columns',
            index: i, 
            text: 
            item.title, 
            handler: function(item){
                sender.setActiveItem(item.index)
            }
        })
    });
    this.addTool({
        text: 'Sheets', 
        xtype: 'splitbutton',  
        menu: new Ext.menu.Menu({items: tabItems})
    });
}

 

[artem_niko]

7 hours ago, Sherzod said:

Thanks.

I think you can simply use fontawesome icon:

function tabPanel.afterrender(sender, eOpts)
{
    var tabItems=[];
    this.tabBar.getRefItems().forEach(function(item,i){
        tabItems.push({
            iconCls: 'x-fa fa-columns',
            index: i, 
            text: 
            item.title, 
            handler: function(item){
                sender.setActiveItem(item.index)
            }
        })
    });
    this.addTool({
        text: 'Sheets', 
        xtype: 'splitbutton',  
        menu: new Ext.menu.Menu({items: tabItems})
    });
}

 

How use this?

 

So, I can't use UniNativeImageIndex? Why? May be this JS code possible write in OnCreate and set imageindex from UniNativeImageIndex?

[Sherzod]

1 hour ago, artem_niko said:

Are you using the paid version of FontAwesome?

[artem_niko]

11 minutes ago, Sherzod said:

Are you using the paid version of FontAwesome?

I'm don't know)

I'm using 1555 professional.

So, what about using UniNativeImageList?

I want use my icon, not FontAwesome.

[Sherzod]

28 minutes ago, artem_niko said:

So, what about using UniNativeImageList?

What type of image file?

[Sherzod]

28 minutes ago, artem_niko said:

So, what about using UniNativeImageList?

What type of image file?

[artem_niko]

2 hours ago, Sherzod said:

What type of image file?

For example, let png

[Sherzod]

6 hours ago, artem_niko said:

For example, let png

Okay then try to use icon config instead of iconCls, for example:

icon: 'files/icon.png'

[artem_niko]

1 minute ago, Sherzod said:

Okay then try to use icon config instead of iconCls, for example:

icon: 'files/icon.png'

Ok. 

And how about UniNativeImageList?

I'm using different icons for tab sheet's...

[Sherzod]

4 minutes ago, artem_niko said:

And how about UniNativeImageList?

You can use UniNativeImageList1.GetImagePngUrl(0) property, the argument is the index of the icon, zero based...

[artem_niko]

2 minutes ago, Sherzod said:

You can use UniNativeImageList1.GetImagePngUrl(0) property

How write this code in some event OnCreate, for example, of form? Using UniNativeImageList...

[Sherzod]

1 hour ago, artem_niko said:

I'm using different icons for tab sheet's...

Okay, then just use this modified code:

function tabPanel.afterrender(sender, eOpts)
{
    var tabItems=[];
    this.tabBar.getRefItems().forEach(function(item,i){
        tabItems.push({
            //iconCls: 'x-fad fa-diagram-project',
            icon: item.icon,
            index: i, 
            text: item.title, 
            handler: function(item){
                sender.setActiveItem(item.index)
            }
        })
    });
    this.addTool({
        text: 'Sheets', 
        xtype: 'splitbutton',  
        menu: new Ext.menu.Menu({items: tabItems})
    });
}

[artem_niko]

3 hours ago, Sherzod said:

Okay, then just use this modified code:

function tabPanel.afterrender(sender, eOpts)
{
    var tabItems=[];
    this.tabBar.getRefItems().forEach(function(item,i){
        tabItems.push({
            //iconCls: 'x-fad fa-diagram-project',
            icon: item.icon,
            index: i, 
            text: item.title, 
            handler: function(item){
                sender.setActiveItem(item.index)
            }
        })
    });
    this.addTool({
        text: 'Sheets', 
        xtype: 'splitbutton',  
        menu: new Ext.menu.Menu({items: tabItems})
    });
}

Excellent!
Everything I need.
One last question: can this UniMenuButton only be embedded in a UniPageControl, or can it be embedded in the header of a UniPanel, for example? Simply, in the case of the UniPageControl, a white bar appears that takes up space. If you embed a UniMenuButton in the header of a UniPanel, then you can additionally place buttons there, for example, later.