artem_niko Posted May 13, 2022 Share Posted May 13, 2022 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 Hello, It can be done I think. Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 13, 2022 Author Share Posted May 13, 2022 8 minutes ago, Sherzod said: Hello, It can be done I think. How? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 22 minutes ago, artem_niko said: How? At the moment it looks like this: Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 13, 2022 Author Share Posted May 13, 2022 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 13, 2022 Share Posted May 13, 2022 Need to analyze. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 14, 2022 Share Posted May 14, 2022 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) Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 14, 2022 Author Share Posted May 14, 2022 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 14, 2022 Share Posted May 14, 2022 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. 1 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 14, 2022 Author Share Posted May 14, 2022 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 14, 2022 Share Posted May 14, 2022 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}) }); } 1 1 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 14, 2022 Author Share Posted May 14, 2022 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)? 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 14, 2022 Share Posted May 14, 2022 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}) }); } Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 15, 2022 Author Share Posted May 15, 2022 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? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 1 hour ago, artem_niko said: Are you using the paid version of FontAwesome? Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 15, 2022 Author Share Posted May 15, 2022 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 28 minutes ago, artem_niko said: So, what about using UniNativeImageList? What type of image file? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 28 minutes ago, artem_niko said: So, what about using UniNativeImageList? What type of image file? Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 15, 2022 Author Share Posted May 15, 2022 2 hours ago, Sherzod said: What type of image file? For example, let png Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 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' Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 15, 2022 Author Share Posted May 15, 2022 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... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 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... Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 15, 2022 Author Share Posted May 15, 2022 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... Quote Link to comment Share on other sites More sharing options...
Sherzod Posted May 15, 2022 Share Posted May 15, 2022 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}) }); } 1 Quote Link to comment Share on other sites More sharing options...
artem_niko Posted May 15, 2022 Author Share Posted May 15, 2022 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.