55143681 Posted July 26, 2021 Share Posted July 26, 2021 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 26, 2021 Share Posted July 26, 2021 4 hours ago, 55143681 said: Hello, One possible solution I think. function store.nodeappend(sender, node, index, eOpts) { this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 26, 2021 Share Posted July 26, 2021 This is that each shows hint Is there one that displays hint only when it is too long 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 26, 2021 Share Posted July 26, 2021 42 minutes ago, 风吹小机机 said: Is there one that displays hint only when it is too long I will try to analyze. 1 Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 26, 2021 Share Posted July 26, 2021 9 hours ago, 风吹小机机 said: Is there one that displays hint only when it is too long Can you try this approach? function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } Quote Link to comment Share on other sites More sharing options...
M.Ammar Posted July 27, 2021 Share Posted July 27, 2021 13 hours ago, Sherzod said: Can you try this approach? function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } Hi I have tested this and I didn't Work. regards Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 27, 2021 Share Posted July 27, 2021 58 minutes ago, M.Ammar said: I have tested this and I didn't Work. Hi, Works for me. Could you please make a simple testcase to check? Quote Link to comment Share on other sites More sharing options...
M.Ammar Posted July 27, 2021 Share Posted July 27, 2021 17 minutes ago, Sherzod said: Hi, Works for me. Could you please make a simple testcase to check? Hi I Edited One Of the Demos added TuniTreeMenu added one Item Added store.nodeappend GridFiltering-2.rar Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 27, 2021 Share Posted July 27, 2021 21 minutes ago, M.Ammar said: GridFiltering-2.rar 1.54 MB · 0 downloads Thanks for the testcase. Yes you are right. Okay. Let's take into account the width of the icon. tWidth += 30; function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); tWidth += 30; if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } 1 Quote Link to comment Share on other sites More sharing options...
M.Ammar Posted July 27, 2021 Share Posted July 27, 2021 19 minutes ago, Sherzod said: Thanks for the testcase. Yes you are right. Okay. Let's take into account the width of the icon. tWidth += 30; function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); tWidth += 30; if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } Thanks Sherzod Working Perfect for English, Note: For Arabic I had to add 130 not 30. Regards 1 Quote Link to comment Share on other sites More sharing options...
55143681 Posted July 27, 2021 Author Share Posted July 27, 2021 11 minutes ago, M.Ammar said: Thanks Sherzod Working Perfect for English, Note: For Arabic I had to add 130 not 30. Regards 130 works good. Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 27, 2021 Share Posted July 27, 2021 17 hours ago, Sherzod said: Can you try this approach? function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } Useful, But there is still a small problem. When I blur the search menu, it fails Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 27, 2021 Share Posted July 27, 2021 14 minutes ago, 风吹小机机 said: Useful, But there is still a small problem. When I blur the search menu, it fails As shown in the figure Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 27, 2021 Share Posted July 27, 2021 20 minutes ago, 风吹小机机 said: But there is still a small problem. When I blur the search menu, it fails Can you make a simple testcase to reproduce? Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 27, 2021 Share Posted July 27, 2021 4 hours ago, Sherzod said: Can you make a simple testcase to reproduce? Once opened, it is valid But it is invalid after the node is recreated Treememu_Demo.rar Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 28, 2021 Share Posted July 28, 2021 16 hours ago, 风吹小机机 said: But it is invalid after the node is recreated Treememu_Demo.rar 77.29 kB · 5 downloads Hello, I will try to analyze. Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 28, 2021 Share Posted July 28, 2021 35 minutes ago, Sherzod said: Hello, I will try to analyze. Thank you, please Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 28, 2021 Share Posted July 28, 2021 4 hours ago, 风吹小机机 said: Thank you, please Can you try this approach? pROCEDURE TMainForm.cREATEnODE; var I: Integer; BEGIN //UniTreeMenu1.Items.Clear; for I := UniTreeMenu1.Items.Count-1 downto 0 do UniTreeMenu1.Items.Delete(UniTreeMenu1.Items[I]); UniTreeMenu1.ClientEvents.ExtEvents.Values['store.nodeappend'] := 'function store.nodeappend(sender, node, index, eOpts)'+ '{ '+ ' var _this=this; '+ ' this.treePanel.getItem(node).el.on("mouseover", function() {'+ ' textMetrics = new Ext.util.TextMetrics(); '+ ' tWidth = textMetrics.getWidth(node.data.text); '+ ' tWidth += 30; '+ //130 ' if (tWidth > _this.treePanel.getWidth()) { '+ ' _this.treePanel.getItem(node).el.dom.setAttribute("data-qtip", node.data.text);'+ ' } '+ ' }); '+ ' '+ ' this.treePanel.getItem(node).el.on("mouseout", function() { '+ ' _this.treePanel.getItem(node).el.dom.setAttribute("data-qtip", "");'+ ' }); '+ '} '; UniTreeMenu1.Items.Add(nil,'AAAAAAAAAAAAAAAAAAAAAAAAAA'); UniTreeMenu1.Items.Add(nil,'BBBBBBBBBBBBBBBBBBBBBBBBBB'); UniTreeMenu1.Items.Add(nil,'CCCCCCCCCCCCCCCCCCCCCCCCCC'); END; Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 28, 2021 Share Posted July 28, 2021 2 hours ago, Sherzod said: Can you try this approach? pROCEDURE TMainForm.cREATEnODE; var I: Integer; BEGIN //UniTreeMenu1.Items.Clear; for I := UniTreeMenu1.Items.Count-1 downto 0 do UniTreeMenu1.Items.Delete(UniTreeMenu1.Items[I]); UniTreeMenu1.ClientEvents.ExtEvents.Values['store.nodeappend'] := 'function store.nodeappend(sender, node, index, eOpts)'+ '{ '+ ' var _this=this; '+ ' this.treePanel.getItem(node).el.on("mouseover", function() {'+ ' textMetrics = new Ext.util.TextMetrics(); '+ ' tWidth = textMetrics.getWidth(node.data.text); '+ ' tWidth += 30; '+ //130 ' if (tWidth > _this.treePanel.getWidth()) { '+ ' _this.treePanel.getItem(node).el.dom.setAttribute("data-qtip", node.data.text);'+ ' } '+ ' }); '+ ' '+ ' this.treePanel.getItem(node).el.on("mouseout", function() { '+ ' _this.treePanel.getItem(node).el.dom.setAttribute("data-qtip", "");'+ ' }); '+ '} '; UniTreeMenu1.Items.Add(nil,'AAAAAAAAAAAAAAAAAAAAAAAAAA'); UniTreeMenu1.Items.Add(nil,'BBBBBBBBBBBBBBBBBBBBBBBBBB'); UniTreeMenu1.Items.Add(nil,'CCCCCCCCCCCCCCCCCCCCCCCCCC'); END; Thank you very very much. It works Unitreemen1.items.clear cannot be used; It must be deleted from the lowest level node upward Quote Link to comment Share on other sites More sharing options...
风吹小机机 Posted July 29, 2021 Share Posted July 29, 2021 15 hours ago, 风吹小机机 said: But there's still a little problem, Can I get the number of nodes and the width of icons So I can Twidth + = node level * width of Icon It doesn't matter if you can't get it, Make do with Quote Link to comment Share on other sites More sharing options...
Sherzod Posted July 29, 2021 Share Posted July 29, 2021 11 minutes ago, 风吹小机机 said: node level node.data.depth Quote Link to comment Share on other sites More sharing options...
picyka Posted August 30, 2022 Share Posted August 30, 2022 Em 27/7/2021 às 4:46 am, Sherzod disse: Obrigado pela prova. Sim, você está certo. Ok. Vamos levar em conta a largura do ícone. tWidth += 30; function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); tWidth += 30; if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } I have some rules there that prevent it from working, can you help me? Demo.zip Quote Link to comment Share on other sites More sharing options...
picyka Posted August 30, 2022 Share Posted August 30, 2022 if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } The problem is with this rule. Quote Link to comment Share on other sites More sharing options...
picyka Posted August 30, 2022 Share Posted August 30, 2022 19 minutes ago, picyka said: if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } The problem is with this rule. function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); tWidth += (50 * node.data.depth); if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } Sorted out Quote Link to comment Share on other sites More sharing options...
picyka Posted August 30, 2022 Share Posted August 30, 2022 2 minutes ago, picyka said: function store.nodeappend(sender, node, index, eOpts) { var _this=this; this.treePanel.getItem(node).el.on('mouseover', function() { textMetrics = new Ext.util.TextMetrics(); tWidth = textMetrics.getWidth(node.data.text); tWidth += (50 * node.data.depth); if (tWidth > _this.treePanel.getWidth()) { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text); } }); this.treePanel.getItem(node).el.on('mouseout', function() { _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', ''); }); } Sorted out Testing better here, it doesn't work as expected, it would be nice if you know that the menu has... 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.