Jump to content

Create dropdown menu for UniPageControl


artem_niko

Recommended Posts

1 minute ago, artem_niko said:

can this UniMenuButton only be embedded in a UniPageControl, or can it be embedded in the header of a UniPanel, for example?

Can you please explain in more detail (with screenshot maybe)?

Link to comment
Share on other sites

5 hours ago, Sherzod said:

How? Using ToolButtons property?

Somtimes...

Or so:

  UniPanel1.JSInterface.JSCode('var tm=new Ext.util.TextMetrics();'#1'.header.insert('+ (UniPanel1.ToolButtons.Count + 1).ToString + ', ' +
                     '{xtype:"tbspacer", width:'#1'.header.title.getWidth()-(tm.getWidth('#1'.getTitle())+100)});');
  UniPanel1.JSInterface.JSCall('header.insert', [0, UniContainerPanelTitle3.JSControl]);

More often the second option, because. there you can embed panels with buttons at once, rather than add them one by one through the title property

Link to comment
Share on other sites

How change color for this white row?

image.thumb.png.69c7572a977c0116e1a1bcc9a2713422.png

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

i was tryed write 

this.addTool({
        text: 'Меню', 
        xtype: 'splitbutton',      

        color: red,
        menu: new Ext.menu.Menu({items: tabItems})

But this is not working...

Link to comment
Share on other sites

33 minutes ago, artem_niko said:

This title row creating with this UniMenuButton)

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})
    });
    
    var header=this.getHeader();
    if (header) {
        header.setStyle('background', 'none');
        header.setStyle('background-color', 'green');
        header.setStyle('border', 'none');
    }
}

 

  • Thanks 1
Link to comment
Share on other sites

14 hours ago, Sherzod said:
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})
    });
    
    var header=this.getHeader();
    if (header) {
        header.setStyle('background', 'none');
        header.setStyle('background-color', 'green');
        header.setStyle('border', 'none');
    }
}

 

Excellent! Perferct! Thank's, @Sherzod! :)

  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

Hello,

8 hours ago, VolkovVitalD said:

And how to get exactly such a button?

On 5/13/2022 at 10:05 PM, artem_niko said:

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

Where will be this button?

Here was the issue.

 

8 hours ago, VolkovVitalD said:

I need to insert any control exactly in this place, not in the ToolPanel.

I don’t know, but purely by design it would be wrong to insert any control there.

Link to comment
Share on other sites

  • 2 weeks later...
On 5/13/2022 at 6:59 PM, Sherzod said:

At the moment it looks like this:

image.png.1ba9785c691583cf23e33e0c7d64e6eb.png

2 questions :

1- how do you do for having the menu on the same line of tabsheet

2- how can ido for having this menu that is displayed only when the arrow (arrows that appear when you have a lots of tab sheet) are displayed

3- optional : how can we do to change the font size in the tabsheet title, if i change with a simple css the font size is changed but not the size of the title tabsheet

 

Link to comment
Share on other sites

Hello Jean,

1 hour ago, delagoutte said:

1- how do you do for having the menu on the same line of tabsheet

As mentioned above, the solution that I gave has one drawback if there are a lot of TabSheets.

 

1 hour ago, delagoutte said:

2- how can ido for having this menu that is displayed only when the arrow (arrows that appear when you have a lots of tab sheet) are displayed

Don't know at the moment, need to analyze.

 

1 hour ago, delagoutte said:

3- optional : how can we do to change the font size in the tabsheet title, if i change with a simple css the font size is changed but not the size of the title tabsheet

Can you please explain in more detail? 

... There were topics on the forum, if I'm not mistaken.

Link to comment
Share on other sites

  • 3 months later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...