3

I'm attaching a picture with the mock up that I'm trying to develop with Ext JS. I'm using a Border layout, and then a Dashboard for the central part, however I see some limitations on it:

  1. Panels in the dashboard don't have minimize or maximize button. How can I implement this?
  2. How can I make a panel/part to use several columns by default. Right now with the columnIndex you can only specify one of the columns, but what if I want to use several columns, or 100% width, like in the 'functional positions' panel?.

I would appreciate any suggestion, even other alternatives without using a dashboard.

Mock up

Hernan Diaz
  • 476
  • 2
  • 6
  • 20
  • What about `border` layout instead? – CD.. Jun 12 '15 at 13:05
  • Yes, I'm using border layout for the page, and then a dashboard in the 'center' to display 5 panels: Functional positions, identification, localisation, relations and 3d view. The problems are in the center. I will edit the question to clarify – Hernan Diaz Jun 12 '15 at 15:37
  • What do you want to happen with the screen space released from minimizing your panels? Should the other panels extend to take it or what? Depending on that, you may choose `hbox` layout with custom tools in the header which would resize the panels to zero (i.e. "minimize") and let the others take the space, OR just go [web desktop](http://dev.sencha.com/ext/5.1.0/examples/desktop/index.html) layout. – Greendrake Jun 13 '15 at 01:40

1 Answers1

2
  1. you can add more tools to a panel.

  2. carefully read the docs for columnWidths, for your example this could be:

    columnWidths: [ 1, 0.4, 0.6, 0.5, 0.5 ]

creating 3 diffent rows

jansepke
  • 1,933
  • 2
  • 18
  • 30
  • You are right, however I found some problems in the implementation. When you create more than one row for the columns, the attribute maxColumns does not work properly. In your example you need to set maxColumns to 5. This would allow the users to have 5 panels in the same row while I want 2 as maximun. – Hernan Diaz Jun 15 '15 at 15:45
  • 1
    The second problem is to maximize the panels. It seems that the panel cant grow more than the width of the column where it is contained. Is there any way to change dynamically one panel to another column, so I could put it in the first one and then maximize? I see that you have addView, but I want to move one existing panel, not create a new part. What I want to achieve is a layout similar to JIRA dashboard. Here is the code in fiddle https://fiddle.sencha.com/#fiddle/omf – Hernan Diaz Jun 15 '15 at 15:45
  • hm, I only did this with 4 columns... but I also noticed that reordering widgets does not work that good. but I have no idea to solve this. you could use the add method that every ext component has. I think this will move the component instead of copying it. if this does not help, you could destroy the old component after adding (if you really need that feature) – jansepke Jun 20 '15 at 15:43
  • @HernanDiaz Have you got any solution for this ? How did you solve the maximize issue ? – JChap Dec 14 '15 at 10:11
  • @JavaChap I'm not using the dashboard finally, but to maximize the panel I just hide all the other components in the screen when the maximize tool is clicked and I show them again when the restore tool is clicked. By doing this the panel is automatically resized – Hernan Diaz Dec 14 '15 at 15:07