How to Hide a Panel On Resize?

[Aggie85]

Howdy Sherzod,

I have a table view setup with some 'contact' cards with an Identificaton card + Owner Information.

If the Owner Panel (card) is < 600 pixels, I would like to hide the identification card panel. If >= 600px, show it.

I tried implementing a resize event on the table panel and it didn't work very well at all.

Would it be possible to setup a config.responsive on the owner panel to do the above? If so, how?

I have attached an example showing a couple of owner panels with a resize event on the owners panel.

Any help would be appreciated.

All the best,

Aggie85

 

[Sherzod]

Hello, 

Are you using UniPanels?

[Aggie85]

Yes…just like the example above…unipanels  with child unicontainer panels.

[Sherzod]

1 hour ago, Aggie85 said:

If the Owner Panel (card) is < 600 pixels, I would like to hide the identification card panel. If >= 600px, show it.

Maybe you want something like this?

OwnerPanel_.ClientEvents.UniEvents ->

function beforeInit(sender, config)
{
    config.responsiveConfig = 
    {
      'width < 600': 
      {
        hidden: true
      },
      'width >= 600': 
      {
        hidden: false
      }
    }
}

 

[Aggie85]

No…I don’t want to hide the entire owner panel…just the image panel. Please look at example.

[Sherzod]

OwnerIdentificationImageContainerPanel_ ?

[Aggie85]

And I want to hide the image panel if the owner panel is < 600, not the viewport because there might be more than one owners panel showing.

[Aggie85]

Correct…but remember OwnersPanel_ < 600, not the viewport of the app.

[Sherzod]

Then you should use the owner panel's event, if I understand you correctly:

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
    
}

 

[Aggie85]

I tried it there and the panels got all f__ed up.

could you modify the example to do it correctly so I can see what I messed up?

[Aggie85]

Trying to add a "resize" event to each owner panel is a MESS.

So I am trying to add a "resize" event to the owner panel and I need help correcting the JS syntax / calling. 

Below is my "pseudo" "resize" event for the OwnersPanel_:

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
  var panels = sender.items.getRange();
  
  Ext.each(panels,function( panel ) 
  {
    if (panel.getSize().width < 600)
    {
      panel.items[0].getEl().hide();
    }
    else
    {
      panel.items[0].getEl().show();
    }
  }); 
  
  sender.updateLayout();
}

How to I correct the above code to hide / show the image panel in the Owner Panels? I am assuming that each panel's items property first child control is based on creation order and is the image container. 

Is there a better way of adding some kind of "class" to the OwnerImagePanel to guarantee that I reference the right panel in each owner's panel?

Thanks in advance,

Aggie85

[Sherzod]

I think you are using the wrong layouts. You have to reconsider.

[Aggie85]

I have spent hours / days trying to come up with something that looks good to my users and possibly be responsive. 

Please give me a concrete idea in a direction to go with the example I uploaded.

 

Thanks in advance, 

Aggie85 

[Sherzod]

I will try to check...

[Aggie85]

I have a new demo I am about to upload that should be easier to write a resize routine.

In an owner panel (i.e, top panel of ownerimagepanel + ownerinformationpanel), how would I change the layout from vbox / hbox? Below is my initial routine and I am getting an error message:

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
  if (width < 600)
  {
     sender.setLayout('type: "vbox"');
  }
  else
  {
   sender.setLayout('type: "hbox"');
  }
  
  sender.updateLayout();
}
 

[Sherzod]

Try like this:

setLayout({type: "hbox"});

[Aggie85]

Sherzod,

Attached is a better layout that will hopefully work.

If you compile / run the example, you will see an error message in the "resize" event in the owner panels.

Thanks in advance,

Aggie85

UniGuiResizingIFrame.zip

[Sherzod]

7 minutes ago, Aggie85 said:

If you compile / run the example, you will see an error message in the "resize" event in the owner panels.

Have you tried? 

7 minutes ago, Sherzod said:

Try like this:

setLayout({type: "hbox"});

 

[Aggie85]

I updated the OwnerPanels with the following resize function:

function resize(sender, width, height, oldWidth, oldHeight, eOpts)
{
  if (width < 600)
  {
    sender.setLayout({type: "vbox"});
  }
  else
  {
    sender.setLayout({type: "hbox"});
  }
  
  sender.updateLayout();
}

and I am getting the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'dom')
    at ctor.moveItem (ext-all.js:20:1238717)
    at ctor.renderItems (ext-all.js:20:1238043)
    at ctor.renderChildren (ext-all.js:20:1244092)
    at ctor.invalidate (ext-all.js:20:2315522)
    at ctor.invalidate (ext-all.js:20:2315615)
    at ctor.flushInvalidates (ext-all.js:20:2314129)
    at ctor.run (ext-all.js:20:2318736)
    at Function.flushLayouts (ext-all.js:20:558543)
    at Function.updateLayout (ext-all.js:20:559046)
    at ctor.updateLayout (ext-all.js:20:589121)

 

[Sherzod]

You can also adapt this code for the client side:

 

[Aggie85]

OK... how do I convert the following server side to client side:

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

[Sherzod]

For example...

sender.getLayout().setVertical(true);

[Aggie85]

Thanks! 

Now I have a starting point for a responsive "panel-card" system.

I have a few more things to try and modify on the fly, so I will probably be posting later tonight!

Again, thanks for the help.

Aggie85

[Sherzod]

Ok.

[Aggie85]

OK - I spoke to soon.

The problem with putting a "resize" event handler on each panel is the layout manager gets "trumped" if the user starts resizing the browser window (i.e. several resize calls). In Windows, I would have a "resize" event on the parent container and then reset a timer everytime the resize gets called so that the "relayout" only happens ONCE!

As  you have figured out, I know just enough JS to be dangerous.

Any example or direction on how to do the above?