I have a FormPanel that includes a bunch of TextField, I also add more to it dynamically using FormPanel.add(), FormPanel.doLayout(), however the height doesn't readjust itself, so extra textfields are not visible. what's going on?
thanks
Either the FormPanel (and all higher level containers) have to be auto height (autoHeight: true) so that the browser will handle sizing, or else you will need to recalculate the height after adding and set it programmatically. I've done it both ways, depending on the layout.
Related
I have grid with some textboxes and an image which goes out of grid boundaries and I add this grids dynamically in my code to another grid.
I want to have my image on top of all the rest of the grids. Unfortunately each grid I add to the root grid will hover over my previous grid image.
Could you please suggest anything?! I have tried with zindex and it did not work in my case.
What I am doing wrong?
ZIndex only works for the immediate children of a panel-derived container (Grid, Canvas, Stackpanel etc). Otherwise it is down to the order they exist in the visual tree (i.e. the last one gets displayed on top).
If you have nested objects you simply need to think about the order they are added. The simplest way to do this is have two top level grids/panels, the first contains everything else and the last containing just the dynamically added children.
This way whatever you put in the second grid will always be on top of all other items (in the first grid/container).
I am creating a FormPanel with some fields and two buttons inside it, and hosting it inside a popup modal Window. The FormPanel has a default 'form' layout, the Window has 'fit'. The panel's optimal size is unknown to me beforehand. I would like to be able to programmatically resize the containing Window enough to fully display the FormPanel. I guess it all boils down to asking the layout manager what the optimal size of the panel is, but I haven't found any way to do that. I am using ExtJS 3.4.
try resizing the window to fit the the height and width of form panel like
window.resizeTo(form.getWidth(),form.getHeight());
I want to anchor below datagridviews to top, left, right & down in a way that they don't over lap when the size of form is increased or decreased. Dock and Anchor both don't seem to provide any solution for this.
You probably need to have a TableLayoutPanel handle that. Three columns, middle column is fixed (Absolute), the outside columns would be based on percentage (50% each).
The DataGridView controls would then be dock-filled into each side column.
Or just handle the layout yourself in the form's Resize event.
I am creating a collapsible panel element, which would essentially be a panel element with a button element and a panel element below the button. Clicking the button causes the neighboring panel to have Visible = false. I would like to resize the containing panel when the child panel is set to invisible.
I have done this manually, by setting the Size property to be the sum of the widths and heights of the visible elements (either the button or the button and the child panel.)
I am curious to know though if there was a way to force the resize of the containing panel without manually calling Size.
I guess I'm looking for the inverse of the property Dock=Fill, which automatically resizes elements based on the size of their containing element.
Thanks in advance.
How about doing:
panel1.Size = new Size(0, 0);
panel1.AutoSize = true;
and then instead of changing the visibility, do this:
panel1.Controls.Remove(panel2);
and when you want to bring it back:
panel1.Controls.Add(panel2);
(panel1 is the back-panel)
I just tried the answer given by ispiro. You dont need to remove and add the control. Setting Visible can work. It depends on when you perform the layout. If panel2 performs the layout before panel1, panel2 will not resize. To make it easier, use the parents PerformLayout instead.
It's used like this:
panel1.ResumeLayout(false);
panel2.ResumeLayout(false);
this.ResumeLayout(false);
this.PerformLayout();
I am using ExtJS 3.3
I have a main panel containing another panel (containing text) and a grid containing data with a paging toolbar and footer.
There is a zoom control (a combo with values like "100%, "50%", "page width","whole page" ) on the paging toolbar.
I wish to select a zoom level from the combo and have everything on the main panel resize to that zoom level.
I need all other panels on the page to appear unchanged in size.
I have Googled around but cannot see any solutions or extensions available.
How can I do this please? Any ideas?
You should be able to do this using CSS to define the size of each element at each required zoom level. Your combo zoom control would need to have an event handler which would switch the class of the (probably) DIV element which contains the content you want to resize.
There is a StackOverflow question here which is a useful discussion about some ways to acheive the scaling; there are many ways to do it and your choice depends on what you need to acheive. If you provide sight of the display or code you're working on then I could probably make some recommendations.