How to force evaluation of responsiveConfig dynamically

[estrify]

Dear @Sherzod,

A simple project with "MainFormDisplay=mfPage", the MainForm has a simple panel that has the classic ExtJS's responsiveConfig idea:

    function beforeInit(sender, config)
    …
        config.responsiveConfig = {
            'condition 1': { hidden: true },
            'condition 2': { hidden: false, width: 45 },
            'condition 3': { hidden: false, width: 250 }
    …

This works great when the MainForm is resized, so that's fine.

But,
1. Is there a way to evaluate this "responsiveConfig" with other events, not just on resize?
2. Or, how can I simulate a resize event to force the evaluation of the corresponding "responsiveConfig"?

I've tried calling "updateLayout" for both the panel and the MainForm, but without success.

How can I do that?

Thanks in advance,

[Sherzod]

Hello @estrify

Can you please explain in more detail once again?

Or create a test case to see what doesn't work for you?

[estrify]

Hi @Sherzod,

It's probably very simple, but I can't figure it out, so I'll really appreciate your help... I attach a simple case of how is implemented the responsiveConfig feature. (Please, look into beforeInit function of the pnlLeft panel)...

If you run the test case, when you resize your browser, as usual, you can see different configurations for size 1, size 2, size 3 and go on.

Size 1 doesn't show a blue column.

Now, click over "Showing Normal" to switch to "Showing Column At Least":
(1) if you are in size 2, 3 or 4, when you resize to size 1, you will see that this size now is showing a blue column when before it did not, so everything is working ok
(2) but if you are in size 1, the column is not shown until a resize event is fired

So, how can I update the layout in (2) to force the re-evaluation of the responsiveConfig without making a resize and only with client side code?

UniGUI_MainForm_ResponsiveConfig.zip

[Sherzod]

I will try to analyze. Thanks for the testcase.

[Sherzod]

Hello @estrify

I think some logic also needs to be moved to the server side.

[estrify]

52 minutes ago, Sherzod said:

I think some logic also needs to be moved to the server side.

Hi @Sherzod,

The server side logic is in the main.pas (TMainForm.UniLabel1Click)... What has to be added to this procedure to update the layout, forcing the re-evaluation of the responsiveConfig?...

 

[Sherzod]

Just now, estrify said:

The server side logic is in the main.pas (TMainForm.UniLabel1Click)

I know. I mean part of the logic you use in responsiveConfig. I will try post a solution later today.

2 minutes ago, estrify said:

to update the layout

I couldn't...

[Stemon63]

Hello, this topic is very interesting to me;
I need to find a "CLIENT" solution for responsive logic instead of handling server side behavior, avoiding many "chatting" calls on "resize".
Especially with applications with large numbers of users.
Please update and share your progress,
Thank you
 

[Sherzod]

15 minutes ago, Stemon63 said:

I need to find a "CLIENT" solution for responsive logic instead of handling server side behavior, avoiding many "chatting" calls on "resize".

Hello,

Here, a special case. An additional variable for responsive is used. Therefore, it seems to me that for this case it is necessary to use a partially server-side solution.

[Sherzod]

Hi @estrify

Also think about this solution, whether it suits you.

1. pnlLeft -> ClientEvents -> ExtEvents ->

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    ajaxRequest(sender, '_resize', {width: width});        
}

2. 

procedure TMainForm.pnlLeftAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = '_resize' then
  begin
    (Sender as TUniPanel).Width := Params.Values['width'].ToInteger();
  end;

end;

3. 

procedure TMainForm.UniLabel1Click(Sender: TObject);
begin
  if not SameText(UniLabel1.Text, 'Showing Column At Least') then
  begin
    UniLabel1.Text:='Showing Column At Least';
    pnlLeft.JSInterface.JSCode(pnlLeft.JSId+'._showColumnAtLeast=true;');
    if pnlLeft.Width <= 500 then
      pnlLeft.Width := 45;
  end
  else
  begin
    UniLabel1.Text:='Showing Normal';
    pnlLeft.JSInterface.JSCode(pnlLeft.JSId+'._showColumnAtLeast=false;');
    if pnlLeft.Width <= 500 then
      pnlLeft.Width := 0;
  end;
end;

4. I changed the code...

function beforeInit(sender, config)
{
  sender._showColumnAtLeast=false;

  config.responsiveFormulas = {
         haveTo_showColumnAtLeast: function (context) {
            try {
                return (Ext.getElementById(sender.id)._showColumnAtLeast);
            }
            catch(err) {
               return (false);
            }
         }
     };
  
  config.responsiveConfig = {
        'width <= 500 && !haveTo_showColumnAtLeast': {
            width: 0
        },
        'width <= 500 && haveTo_showColumnAtLeast': {
            width: 45
        },
        'width > 500 && width <= 850 ': {
            width: 45
        },
        'width > 850 && width <= 1200 ': {
            width: 45
        },
        'width > 1200': {
            width: 250
        }
    }
}

 

[estrify]

Hi @Sherzod,

Thanks for answering. I'm afraid I can't adopt this solution in this project...

To give you an idea of what this new project imposes:

• The logic behind responsiveness is not considered "business logic" so it cannot be implemented on the server side. I had to do it entirely on the client side.
• The logic behind "actions", i.e. clicking on items, is considered "business logic", so this code MUST be server-side.

So if the ExtJS responsive solution can't do that, I have to solve it directly with pure JavaScript.

So thanks again for the help and if you find a way to make it work the way I need, please let me know.

Best regards,

[estrify]

Dear @Sherzod,

I think I have found a possible solution. It combines respnsiveConfig where no additional variables are needed, and old-way javascript code where they are needed. But all the responsiveness is done on the client side.

I am sure you can find a more elegant solution. Anyway, this one seems to work.

Best regards,

 

P.D. I think it's very interesting for all users to include some kind of demo like this test case inside UniGUI. Of course you can use this test case as you like if you find it interesting in any way.

UniGUI_MainForm_JavaScript.zip

[Sherzod]

Hello @estrify

If it works the way you wanted, that's good.

I'll try to look at your test case when I get a chance.