Client alignment and runtime object creation

[arilotta]

Hi all,

I'm populating a panel with some components created at runtime, and I can't figure out how their placement on the panel

using client side alignment.

Let's say I have a panel with Layout HBOX, and I want to populate it with and edit on the left and a label on the right.

At design time, it is sufficient to have set the Left property value on the Edit lower than the Left property value on the Label;

but at runtime it doesn't work...

I've tried setting CreationOrder property too, but nothing changes.

This is an example:

procedure TvFrame18200.UniButton1Click(Sender: TObject);
var e: tuniedit;
    l:tunilabel;
begin
  l:=tunilabel.Create(self);
  with l do
    begin
      left:=100;
      createorder:=10;
      caption:='ciao';
      parent:=UniPanel4;

    end;

  e:=tuniedit.Create(self);
  with e do
    begin
      left:=0;
      createorder:=0;
      parent:=UniPanel4;
    end;
end;

The only way to accomplish the desired behaviour is to invert the component creation, but it would complicate coding my application;

it is a limitation to create components in the order they will be placed in a panel.

Anybody could help me ?

Thanks 

Andrea

[Sherzod]

1 hour ago, arilotta said:

Anybody could help me ?

Hi,

I will try to analyze.

[Sherzod]

17 hours ago, arilotta said:

I've tried setting CreationOrder property too, but nothing changes.

Hi,

Can you try this approach for now?

1. MainForm.Script:

function generateSortFn(props) {
    return function (a, b) {
        for (var i = 0; i < props.length; i++) {
            var prop = props[i];
            var name = prop.name;
            var reverse = prop.reverse;
            if (a[name] < b[name])
                return reverse ? 1 : -1;
            if (a[name] > b[name])
                return reverse ? -1 : 1;
        }
        return 0;
    };
};

2. UniPanel.ClientEvents.ExtEvents

function add(sender, component, index, eOpts)
{
    sender.items.items.sort(generateSortFn([{name: 'createorder', reverse: false}]))
}

3. How to use:

procedure TMainForm.UniButton1Click(Sender: TObject);
var e: tuniedit;
    l:tunilabel;
begin
  l:=tunilabel.Create(self);
  with l do
    begin
      left:=100;
      createorder:=10;
      caption:='ciao';
      parent:=UniPanel1;

      // or by some other properties
      JSInterface.JSConfig('createorder', [createorder]);
    end;

  e:=tuniedit.Create(self);
  with e do
    begin
      left:=0;
      createorder:=9;
      parent:=UniPanel1;

      // or by some other properties
      JSInterface.JSConfig('createorder', [createorder]);
    end;
end;

...

 

[arilotta]

Thank you Sherzod, it works very well !