I am using a BorderLayout and trying to resize the center region when the left side panel is collapsed. My center region is a tab panel. One of my tabs contains a grid panel. I want to resize any panel that is in the center region tab panel on collapse.
App.centerTabPanel is a reference to the tab panel in the center region.
App.mainPanel is just one of the tabs I am testing the resize with.
Nothing gets resized, I have my tabs with layout "fit". The tabs with a gridpanel do get resized only when I reload the store.
Here is my code:
Ext.override(Ext.layout.BorderLayout.Region, {
onCollapse : Ext.layout.BorderLayout.Region.prototype.onCollapse.createSequence(function() {
//App.centerTabPanel.doLayout(); //doesn't work
//App.centerTabPanel.getActiveTab().doLayout() // doesn't work
//App.centerTabPanel.syncSize(); // doesn't work
App.mainPanel.getStore().reload(); // this works, when the store reloads it resizes the grid
})
});
Try to add config option split : true to all items(regions) within border layout
Related
I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.
To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.
My questions:
Is there a way to make the tabs wrap rather than having the scrolling effect?
Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?
Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.
Thank you
Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.
There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:
tabBar: {
layout: {
overflowHandler: 'menu'
}
}
I have a button and I want it to be always at the same location on my form (top-left corner of visible part of the form).
Here is the example:
So when I scroll vertically or horizontally, the button should always be at the top-left corner and it should be visible.
What should I do to make it fixed?
I guess you are using Form's AutoScroll feature.
What about placing Panel with AutoScroll = true on the form and use its scrolling instead? Then you will be able to place a button on a form but over this scrollable panel. So, the scroll rulers will scroll the view panel contents, but the button will stay pinned to the form.
If you don't want to add another container component, then you can add a handler on Scroll event and adjust the button position in response to form scrolling. The ScrollEventArgs argument has ScrollOrientation, NewValue and OldValue to calculate new X/Y position of the control.
On the form, you place a Panel and set: its Dock property to Fill, and AutoScroll property to True.
You place all the other controls inside this panel, but not the button you want to keep visible.
Right-click on the panel->Send-to-Back.
The Panel will adjust the size to match the form; the scrolling will only happen in the panel, so the button will always stay visible(you can set Anchor:Left,Top on it)
In order to be able to scroll(with the mouse wheel), the focus must be on a control inside the scrollable area(inside the Panel), NOT on the button. To prevent the button from getting focus: set TabStop to false on it; also, when it is clicked, you must also set the focus on an other control, by calling:
this.SelectNextControl(the_button, true, true, true, true);
I have an extjs panel. This panel has dynamic contents added into it every time I press a button. This dynamic content gets added to the end of the panel, which is not visible until I do a manual horizontal scroll.
I want to scroll to the right most side everytime a new content is added and user see that content immediately (without manually having to scroll right)
Is there any way, I can automatically horizontally scroll the panel towards the end of the panel in the right
Thx
I have a Silverlight application, containing a scrollviewer in a grid layout.
When I move the scroller down and close this grid with the close button, the scroller remains at the bottom whenever I reopen the grid.
Is there a way I can reset the scroller to the top position?
Hello supriya khamesra,
Please Try this.
Please Put your grid inside scroll viewer and then write your bellow code after grid selection change.
grdDetail.ScrollToVerticalOffset(0d);
OR
grdDetail.ScrollToTop();
Hi i have a viewport with two region west and center west holds panel for tree and center is a tabpanel iam usin the applyTo:div to render the panels but the problem is the jsp page im rendering to already has a header and footer when i render the viewport it goes out of the browser view and also iam not able scroll down to see all the contents..is some one has any idea about this please help...
As the ExtJS docs state:
The Viewport renders itself to the
document body, and automatically sizes
itself to the size of the browser
viewport and manages window resizing
So you don't need a viewport in this case: just render a panel with a border layout into the same div as you were rendering the viewport. Size the div with CSS so it takes up the area between the header and footer.