I am new to extjs layouts.
I have a Form panel with default layout.I am adding a fieldset which contains a grid and two buttons. I am rendering a form Panel to div.
Div in JSP
<div id="mydiv"></div>
FormPanel in JS
var fp = new Ext.FormPanel(
{
standardSubmit :true,
id :'panel',
autoHeight :true,
layout: 'border',
bodyCfg: { cls: 'template' },
bodyPadding :10,
margin :'0 0 20',
frame :'true',
renderTo :'mydiv',
buttonAlign:'right',
items : [topPanel , fieldset ]
});
I want the form and grid to be resized as per window size (resizing of the window shold resize the element) Right now If try I to resize the window, fieldset is getting resized as per window but grid is not.
I have given a fixed height and width to grid for now. As without that grid just expand horizontally.
I dont want to give any height width to panel , grid. How can it be achieved? As I searched if we render panel to viewport , it will take care of resizing. If this is so , then should I create a viewport in extjs and reneder that to div? If yes then how to do that?
Edit: Or I have to use css with div?
Any pointers are appreciated.
Thanks
You can create a viewport and this will as you say, take care of the resizing.
Within the viewport, you can then add your panel the 'items' collection. If you want the panel to fit the viewport, you should use the 'fit' layout.
Something along these lines would be the right type of idea:
var viewPort = new Ext.Viewport({
id: "blaa",
items: [fp],
layout: "fit"
)};
I've not checked the syntax here, but you get the idea.
Use anchor property. E.g.: anchor: '-10'on whichever components you want this feature on. This will automatically adjust the width of the component according to it's parents width.
So if your formpanel is of width 100px, any child component which has anchor : '-10px' set, will have width widthOfParent - anchorWidth
You can also set the layout to fit. This will automatically expand all child components to width of their parents.
Related
Alloy UI's DataTable provides a scrollable attribute to define x or y scrolling. This has to be used with a combination of a set height or width.
How can I have a table that will adjust to whatever the height/width of the window along with maintaining the scrollable feature?
Alloy UI API allows you to specify height & width in the px or round number.
If you want to specify in the percentage, set the CSS property "width: 100%" for either the DataTable's table tag, or the div that contains the DataTable.
Example,
First, create a datatable.
Add the CSS attribute for width in percentage
*
var dataTable = new Y.DataTable({
id: 'mydata-table',
footerView: Y.FooterView,
scrollable: "xy",
height:'300px').render();
$('#mydata-table').css('width', '80%');
$('#mydata-table').css('height', '40%');
Please refer the link for detail.
Try this code,
it worked for me in mobile as well as desktop.
container.find(".dataTables_scrollBody").css('height', container.height() - 20);
here the container is a <div> where the datatable is placed.
According to documentation:
https://github.com/oria/gridx/wiki/Create-the-Simplest-Gridx
Never forget to call grid.startup(), since the column width
calculation and layout rendering need to access the geometry
information of grid DOM nodes.
If I have the grid with columns, that have no width specified, and autoWidth is set to false, startup() calculates the size of columns so, that they fill the whole viewport horizontally. However, if viewport is expanded, and extra empty space is inserted after the last column. If the viewport is narrowed, the last columns are not more visible (and no scroll is rendered).
So I think the best workaround is to launch the recalculation of columns sizes manually, after the viewport was resized. But I can't find an API method to do that.
How to call column width recalculation and layout rendering on existing grid?
What I've done for this situation is setup an event handler to watch for window resize events, then set the width to the current grid width. When creating the grid:
function _resizeToWindow(grid, gridId) {
grid.resize({w: dom.byId(gridId).offsetWidth, h: undefined});
}
on(window, "resize", function() {
_resizeToWindow(grid, gridId);
});
It looks a little odd to resize the grid to the current width of the grid, but calling that function will cause the grid to be rendered again with appropriate column widths for the new grid width.
I have a datagrid that is updated periodically and the number of rows inside it grows steadily over time. It is inside of a parent div with a height of 60% of the screen.
If I set autoheight to, say, 5 rows, the table works properly. When a sixth row is added, a scrollbar appears within the datagrid and I can scroll up/down and the headers remain fixed at the top and visible. Unfortunately, once I have a lot of data, this is a waste of space -- I have 60% of the screen's height to work with, but only 5 rows are being shown at a time.
If I set autoheight to false, the scrollbar that appears is attached to the parent div. Scrolling up/down allows me to see the data, but the headers at the top of the grid scroll out of view.
Is there a way to ask the datagrid to show as many rows as it can fit and provide a scrollbar for the rest?
---- EDIT ----
Setting autoheight to false would be exactly what I want if the datagrid would resize itself along with the parent when I resize my browser. Is there a good way to achieve that?
I think you're looking for grid.resize(); If you look at the file "Grid.js.uncompressed.js" in the dojox nightly files here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/ You can see exactly what it does. The dataGrid should inherit this method, if you're using it. One way to use it is to resize the containing div based on the window's height, and then resize the grid inside:
function changeHeight() {
document.getElementById("div Id in which the dojo grid is there").style.height ="your desired height";
dijit.byId('Id of the dojo grid').resize();
dijit.byId('Id of the dojo grid').update();
}
Another option method is do do something like this:
function resizeGrid() {
// do whatever you need here, e.g.:
myGrid.resize();
myGrid.update();
}
dojo.addOnLoad(function() {
dojo.connect(window, "onresize", resizeGrid);
});
I have an application control bar at the bottom of my Flex application (with attributes width="100%", dock="false", left="0", bottom="0", height="50"). It contains a lot of elements (like buttons and labels). The width of the SWF is the width of the browser.
When the user makes the width of the browser window smaller, after a certain point, the components on the application control bar gets "squished": they are forced on top of each other. And so, it becomes confusing and ugly. To ensure that that doesn't happen, I've set the minWidth attribute to a value so that it'll always display the components without them overlapping each other.
But then, a horizontal scrollbar appears and hides the bottom half of the application control bar.
I've googled and I found this article: flex verticalscrollpolicy bug (referenced by this SO question: Flex: Prevent scrollbar from covering content when automatically displayed).
But that seems to apply only to a fixed size component. My component's width is a percentage. Any ideas on how to have the horizontal scrollbar appear and have it not cover up the application control bar?
Thanks!
See if adding the following code to the overriden validateSize method (as in the scrollpolicy bug page you linked to) solves the problem.
if (width < measuredWidth)
{
height = normal-height + height-of-the-horizontal-scrollbar;
}
else
height = normal-height;
(Find the normal height of the application control bar and the scroll bar (trace them out) and use those values).
So this happens when the ApplicationControlBar is fixed at the bottom: bottom=0 and left=0. The easiest solution is to make the bar a lot taller (that'll push the content way higher than the scrollbar height). But that makes it kinda ugly.
So another solution: in the MXML file, I capture the Resize event. And in that function, I do this:
if (width < bar.minWidth) // width is the width of the SWF
{
bar.height = ORIGINAL_SIZE + 10;
hbox.setStyle("verticalAlign", "top");
hbox.setStyle("verticalCenter", -10);
} else {
// normal case
box.height = ORIGINAL_SIZE;
hbox.setStyle("verticalAlign", "middle");
hbox.setStyle("verticalCenter", 0);
}
And the horizontal scrollbar doesn't hide the content anymore! Also, the Resize event doesn't get triggered when the bar has a minWidth & the width of the stage is less than that.
I had this come up today and I slightly tweaked sri's if statement like this:
if (buttonContainer.horizontalScrollbar)
{
// Change height & style properties
}
else
{
// Return to original properties.
}
I have use the mx:Grid layout component to layout some form elements in a manner very similar to an HTML table. However, the result does not stretch out horizontally when you resize the app like an HTML table would. How can I make it do that?
Try setting the width and height of the Grid element to a percentage value.
I'm using a Grid on one of my main applications, and I've set the width/height to 100% and it resizes just fine.
You'll likely need to set the width and height of the rows and items (GridRow and GridItem) as well, depending on how you want the rows/columns to resize.
Edit if you're creating the Grid programmatically (e.g. in a .as file), you'll need to set these values as percentages as follows:
var grid:Grid = new Grid();
grid.percentWidth = 100;
grid.percentHeight = 100;