Jump to content

Hbox to Vbox when screen resize


Dao

Recommended Posts

Hello!

Is there any way to change the layout of a panel when the screen becomes smaller?

I have a panel in my form whose layout is hbox. When my window size is 800px, I'd like the layout to set to vbox.

I've tried something like:

procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth,
  AHeight: Integer);
begin
if Awidth < 800
begin
	mypanel.layout := 'vbox';
	//other layout adjustements
end;
end;

But to no success.

Do I have to do this with JS? If yes, how? I have also tried something like 
mypanel.jsInterface.jsAssign('layout', ['vbox']); //(also tried 'type' instead of 'layout')
mypanel.jsInterface.jsCall('updateLayout, []); //also tried doLayout instead of updateLayout
But it gives an error.

Visually, I'm trying to achieve a layout like this:

7kc3Y4U.png

Thanks!

Link to comment
Share on other sites

6 hours ago, Dao said:

I have a panel in my form whose layout is hbox. When my window size is 800px, I'd like the layout to set to vbox.

Hello,

In your case, try this approach:

procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth,
  AHeight: Integer);
begin
  if AWidth < 800 then
  begin
    YourContainerPanel.JSInterface.JSCall('getLayout().setVertical', [True]); //vbox
    YourContainerPanel.JSInterface.JSCallDefer('updateLayout', [], 20);
  end
  else begin
    YourContainerPanel.JSInterface.JSCall('getLayout().setVertical', [False]); //hbox
    YourContainerPanel.JSInterface.JSCallDefer('updateLayout', [], 20);
  end;

end;

 

Link to comment
Share on other sites

Thank you @Sherzod.

Tried it, but I get an Ajax error when trying to implement your code:

error.png.f6e423342a857a03257c96fdee9c116d.png

Also if I may ask: how do you know what JS action to call? I've been trying with JSAssign/JSCall, and I see that you've gone to another approach with JSCall/JSCallDefer.

 

Link to comment
Share on other sites

Hi Sherzod.
Don't what happened but the error doesn't pop up anymore. Thanks for your help!

Is there any "official" doc regarding these kind of functions, like how do you build them? I see some examples here and there on the forums but I find myself unable to customize them because I can't find it documented anywhere...

Link to comment
Share on other sites

Hello,

34 minutes ago, Dao said:

Don't what happened but the error doesn't pop up anymore.

Okay.

34 minutes ago, Dao said:

Is there any "official" doc regarding these kind of functions, like how do you build them? I see some examples here and there on the forums but I find myself unable to customize them because I can't find it documented anywhere...

On our website, the documentation section. And also https://docs.sencha.com/extjs/7.0.0/

Thanks.

Link to comment
Share on other sites

  • 6 months later...
  • 1 month later...
On 1/14/2022 at 11:09 AM, plawan001 said:

How to Press the button to change Layout hbox to vbox

Test_Layout.zip 9.89 MB · 5 downloads

 

On 1/12/2022 at 3:10 PM, Sherzod said:
On 1/12/2022 at 1:56 PM, plawan001 said:

Hbox to Vbox when screen resize

Have you tried the solution above?

You didn't use the code above.

Try:

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
   //UniContainerPanel1.Layout := 'vbox';
   UniContainerPanel1.JSInterface.JSCall('getLayout().setVertical', [True]); //vbox
   UniContainerPanel1.JSInterface.JSCallDefer('updateLayout', [], 20);
end;

 

Link to comment
Share on other sites

  • 2 weeks later...
1 minute ago, plawan001 said:

But when the screen size gets bigger again How to tune into Hbox?

 

On 6/11/2021 at 8:11 PM, Sherzod said:
procedure TMainForm.UniFormScreenResize(Sender: TObject; AWidth,
  AHeight: Integer);
begin
  if AWidth < 800 then
  begin
    YourContainerPanel.JSInterface.JSCall('getLayout().setVertical', [True]); //vbox
    YourContainerPanel.JSInterface.JSCallDefer('updateLayout', [], 20);
  end
  else begin
    YourContainerPanel.JSInterface.JSCall('getLayout().setVertical', [False]); //hbox
    YourContainerPanel.JSInterface.JSCallDefer('updateLayout', [], 20);
  end;

end;

 

  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...