UNITreeMenu：How to display the total text where the mouse stay on the menu item?

[55143681]

[Sherzod]

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);
}

 

[风吹小机机]

This is that each shows hint

Is there one that displays hint only when it is too long

[Sherzod]

42 minutes ago, 风吹小机机 said:

Is there one that displays hint only when it is too long

I will try to analyze. 

[Sherzod]

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', '');
    });
}

 

[M.Ammar]

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 

[Sherzod]

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? 

[M.Ammar]

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

[Sherzod]

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', '');
    });
}

 

[M.Ammar]

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

[55143681]

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.

[风吹小机机]

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

[风吹小机机]

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

[Sherzod]

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?

[风吹小机机]

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

[Sherzod]

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.

[风吹小机机]

35 minutes ago, Sherzod said:

Hello,

I will try to analyze.

Thank you, please

[Sherzod]

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;

 

[风吹小机机]

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

 

[风吹小机机]

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

[Sherzod]

11 minutes ago, 风吹小机机 said:

node level

node.data.depth

[picyka]

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

[picyka]

if (tWidth > _this.treePanel.getWidth()) {
           _this.treePanel.getItem(node).el.dom.setAttribute('data-qtip', node.data.text);
       }

The problem is with this rule.

[picyka]

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

[picyka]

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...