Create dropdown menu for UniPageControl

[artem_niko]

On 5/13/2022 at 11:59 PM, Sherzod said:

At the moment it looks like this:

Hello!

How put this button without title?

I'm mean, as on you picture...

[Sherzod]

13 hours ago, artem_niko said:

I'm mean, as on you picture...

Well, it's not a good idea if you have many tabs.

[artem_niko]

5 minutes ago, Sherzod said:

Well, it's not a good idea if you have many tabs.

Well, I will know in advance the number of tabs, it will not be large so that it would be inconvenient)
But, where there will be a lot of them, I will use the code that is now and create a menu above the tabs, and where there are 3-4 tabs, then you can save space and arrange the menu on the same level with the tabs.

How to make the second option?

[Sherzod]

9 minutes ago, artem_niko said:

How to make the second option?

Ok, I'll try to remember the code I did )

[artem_niko]

8 minutes ago, Sherzod said:

Ok, I'll try to remember the code I did )

What do you mean?

I'm using you code from your firsts posts...

[Sherzod]

1 hour ago, artem_niko said:

What do you mean?

15 hours ago, artem_niko said:

At the moment it looks like this:

 

[artem_niko]

On 5/15/2022 at 12:21 AM, 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})
    });
}

@Sherzod, this is you code with header...

How make without header?

[Sherzod]

1 minute ago, artem_niko said:

How make without header?

2 hours ago, Sherzod said:

Ok, I'll try to remember the code I did )

Try this, just did it again.

1. UniHiddenPanel1 -> UniMenuButton1

2. Form OnReady ->

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniPageControl1.JSInterface do
  begin
    JSCall('tabPanel.tabBar.add', [JSObject('xtype: "tbfill"')]);
    JSCall('tabPanel.tabBar.add', [UniMenuButton1.JSControl]);
  end;
end;

 

[artem_niko]

18 minutes ago, Sherzod said:

Try this, just did it again.

1. UniHiddenPanel1 -> UniMenuButton1

2. Form OnReady ->

procedure TMainForm.UniFormReady(Sender: TObject);
begin
 with UniPageControl1.JSInterface do
 begin
 JSCall('tabPanel.tabBar.add', [JSObject('xtype: "tbfill"')]);
    JSCall('tabPanel.tabBar.add', [UniMenuButton1.JSControl]);
 end;
end;

 

Yes, thanks, it works.
But, how can I prescribe that the menu with the names of tabs is also filled in UniMenuButton1, with the ability to navigate through them, as is done in the case of creating a button with a list with a separate title?

[Sherzod]

2 minutes ago, artem_niko said:

But, how can I prescribe that the menu with the names of tabs is also filled in UniMenuButton1, with the ability to navigate through them, as is done in the case of creating a button with a list with a separate title?

Yes, I understand you. This can be done from the above solution you say. You can try.
I will also try to analyze.

[artem_niko]

4 minutes ago, Sherzod said:

Yes, I understand you. This can be done from the above solution you say. You can try.
I will also try to analyze.

I'm deleting from code:

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

This:

    this.addTool({
        text: 'Разделы модуля', 
        xtype: 'splitbutton',      
        menu: new Ext.menu.Menu({items: tabItems})
    });

And the title with the old button disappeared.
It remains only to understand how to correct and prescribe the filling of the menu and that's it...

[Sherzod]

Done.

[Sherzod]

1. MainForm.Script ->

function _setMenu(panel, obj)
{
    var tabItems=[];
    panel.tabPanel.tabBar.getRefItems().forEach(function(item,i){
        if (item.xtype && item.xtype == "tab") {
          tabItems.push({
            icon: item.icon,
            index: i, 
            text: item.title, 
            handler: function(item){
                panel.tabPanel.setActiveItem(item.index);
                //obj.setText(item.text);
            }
          })
        }
    });
    obj.setMenu(new Ext.menu.Menu({items: tabItems}));
};

2. Form OnReady ->

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniPageControl1.JSInterface do
  begin
    UniMenuButton1.Caption := 'Sheets';

    JSCall('tabPanel.tabBar.add', [JSObject('xtype: "tbfill"')]);
    JSCall('tabPanel.tabBar.add', [UniMenuButton1.JSControl]);
    JSCallGlobal('_setMenu', [UniPageControl1.JSControl, UniMenuButton1.JSMainControl]);
  end;
end;

 

[Sherzod]

Although, you can do it on the server side...

[artem_niko]

5 minutes ago, Sherzod said:

MainForm.Script

And what about if my UniPageControl1 in UniFrame?

UniFrame have't property Script...

[Sherzod]

3 minutes ago, artem_niko said:

UniFrame have't property Script...

No problem, add to MainForm.Script

[artem_niko]

48 minutes ago, Sherzod said:

No problem, add to MainForm.Script

Yes, it seems I added a script to MainForm, the button seems to be created, but it does not "fill" the menu of open tabs (see the Sheets button):

And as for the button on the green panel, I said about it that it would be made on the same level with the tabs, of which I have only 5 pieces fixed. In this button, the menu is filled in as it should, with pictures and working tab navigation...

[Sherzod]

2 hours ago, Sherzod said:

JSCallGlobal('_setMenu', [UniPageControl1.JSControl, UniMenuButton1.JSMainControl]);

Have you added this code?

[artem_niko]

On 11/23/2022 at 5:43 PM, Sherzod said:

Have you added this code?

Yes, I added this line. The button appears where I wanted it to. But when I click it, the drop-down menu is not filled with a list of open tabs. There are no errors, but the list is not filled in either.

Why?

[Sherzod]

1 hour ago, artem_niko said:

Why?

Please attach a testcase to test.

[artem_niko]

On 11/23/2022 at 2:50 PM, Sherzod said:

1. MainForm.Script ->

function _setMenu(panel, obj)
{
    var tabItems=[];
    panel.tabPanel.tabBar.getRefItems().forEach(function(item,i){
        if (item.xtype && item.xtype == "tab") {
          tabItems.push({
            icon: item.icon,
            index: i, 
            text: item.title, 
            handler: function(item){
                panel.tabPanel.setActiveItem(item.index);
                //obj.setText(item.text);
            }
          })
        }
    });
    obj.setMenu(new Ext.menu.Menu({items: tabItems}));
};

2. Form OnReady ->

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniPageControl1.JSInterface do
  begin
    UniMenuButton1.Caption := 'Sheets';

    JSCall('tabPanel.tabBar.add', [JSObject('xtype: "tbfill"')]);
    JSCall('tabPanel.tabBar.add', [UniMenuButton1.JSControl]);
    JSCallGlobal('_setMenu', [UniPageControl1.JSControl, UniMenuButton1.JSMainControl]);
  end;
end;

 

I was using you code, without changes...

[Sherzod]

Just now, artem_niko said:

I was using you code, without changes...

You understand me, it works for me, it doesn't work for you as you say.
It's easier for me to look at your test case. In many cases, when creating a test case, you can find the error yourself if you make a mistake somewhere.

[Tokay]

On 11/23/2022 at 9:54 AM, Sherzod said:

Try this, just did it again.

1. UniHiddenPanel1 -> UniMenuButton1

2. Form OnReady ->

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with UniPageControl1.JSInterface do
  begin
    JSCall('tabPanel.tabBar.add', [JSObject('xtype: "tbfill"')]);
    JSCall('tabPanel.tabBar.add', [UniMenuButton1.JSControl]);
  end;
end;

 

Hi, this is great soultion for my purpose. It's do about ideal what's needed:

I put a label to the UniPageControl1. But how to center label vertically on the corner? And a bit push label to left from right border?

[Sherzod]

@Tokay

I will try to check. 

[Sherzod]

2 hours ago, Tokay said:

But how to center label vertically on the corner? And a bit push label to left from right border?

One possible solution.

For all labels you can assign LayoutConfig.Padding = 5