Jump to content

Issue with TunimScrollbox when creating objects on runtime


likemike

Recommended Posts

Hello Sherzod!

Here you helped x11 with an UnimScrollbox:

Especially this part:

function painted(sender, eOpts)
{
    sender.bodyElement.dom.setAttribute('style', 'overflow-y:auto !important'); 
    sender.bodyElement.select('.x-dock .x-dock-vertical').setStyle('overflow-y', 'auto');
    
    if (sender.floating) {
        sender.floating.element.setStyle('height', 'auto');
    }
}

I need this too, but the problem is, that I add objects on the scrollbox at runtime and the "painted" script doesn't fire. After that the problem comes back.

I've tried to call this after adding objects, 

WITH UnimScrollBox1.JSInterface DO BEGIN
  JSCode(#1'.bodyElement.dom.setAttribute("style", "overflow-y:auto !important");');
  JSCode(#1'.bodyElement.select(".x-dock .x-dock-vertical").setStyle("overflow-y", "auto"); ');
  JSCode('if ('#1'.floating) {'#1'.floating.element.setStyle("height", "auto");}');
END;

but there is a syntax-error in the 3rd line (Unexpected token '.'). 

I'm sure, you'll see my fault immediately!

Regards

Mike

Link to comment
Share on other sites

Hello,

58 minutes ago, likemike said:

I need this too, but the problem is, that I add objects on the scrollbox at runtime and the "painted" script doesn't fire. After that the problem comes back.

I've tried to call this after adding objects, 

WITH UnimScrollBox1.JSInterface DO BEGIN
  JSCode(#1'.bodyElement.dom.setAttribute("style", "overflow-y:auto !important");');
  JSCode(#1'.bodyElement.select(".x-dock .x-dock-vertical").setStyle("overflow-y", "auto"); ');
  JSCode('if ('#1'.floating) {'#1'.floating.element.setStyle("height", "auto");}');
END;

but there is a syntax-error in the 3rd line (Unexpected token '.'). 

I'm sure, you'll see my fault immediately!

Do you have a simple testcase to check?

Link to comment
Share on other sites

Here it isUnigui.rarUnigui.rar

If you start it, some panels and memos will be created. Because of the painted-function in ExtEvents the height of the scrollbox ist exactly what is necessary to fit all objects.

If you press the button, 2 more objects are added. If you scroll down, now there is a blank space at the bottom (because here the painted-function has no effect).

So I need to call the function "painted" after inserting new objects.

Link to comment
Share on other sites

3 hours ago, likemike said:

after inserting new objects.

Try this approach:

procedure TMainmForm.UnimButton1Click(Sender: TObject);
VAR
    unimPanel : TUnimPanel;
    unimmemo : TUnimMemo;
begin
     // 4. Panel with Author and date
    unimPanel:=TUnimPanel.Create(UnimScrollBox1);
    unimPanel.Parent:=UnimScrollBox1;
    unimPanel.Name:='Title'+IntToStr(counter);
    unimPanel.Align:=alTop;
    unimPanel.Height:=24;
    unimPanel.Color:=$00E8E8E8;

    // 34 Memo
    unimmemo:=TUnimMemo.Create(UnimScrollBox1);
    unimmemo.Parent:=UnimScrollBox1;
    unimmemo.Name:='Mem'+IntToStr(counter); INC(Counter);
    unimmemo.Align:=alTop;
    unimmemo.Color:=$0093F7BD;
    unimmemo.JSInterface.JSAddListener('painted', 'function(){this.inputWrapElement.setStyle("border-radius", "20px"); this.inputWrapElement.setStyle("border-color", "#BDF793");}'); // #BDF793 = $0093F7BD in Delphi
    unimmemo.Text:='Actually, does it really matter which one is the counterfeit? If you don’t expect to ever have budget enough to buy a real Rolex, a clone could be an option. An option for "poor" watch fans,but an option anyway…';
    UnimMemo.LayoutConfig.flex:=1;
    UnimMemo.LayoutConfig.Height:='200px';
    UnimMemo.LayoutConfig.Margin:='3 3 3 3';


    JSInterface.JSCallDefer('floating.element.setStyle', ['height', 'auto'], 50, UnimScrollBox1.JSControl); //<--------

// that won't work
//    WITH MainmForm.UnimScrollBox1.JSInterface DO BEGIN
//        JSCode(#1'.bodyElement.dom.setAttribute("style", "overflow-y:auto !important");');
//        JSCode(#1'.bodyElement.select(".x-dock .x-dock-vertical").setStyle("overflow-y", "auto"); ');
//        JSCode('if ('#1'.floating) {'#1'.floating.element.setStyle("height", "auto");}');
//    END;

end;

 

  • Like 1
Link to comment
Share on other sites

×
×
  • Create New...