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.
Related
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 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.
I am quite new to ASP.NET development so I am unsure of how to do this without hardcoding the value.
To make the ASPxGridView to occupy a container space by width, set the control's Width property to 100%. This trick won't work for the height. Please note, the ASPxGridView is an XHTML compatible control and this standard does not support setting the height property yo 100%. Also, I should tell you that usually the grid's height is defined by its content. I.e. if you are planning to show 10 records per page, the grid's height will be identified by the height of these 10 rows + height of the column headers pane, height of the pager and other elements (footer, group panel...). If you want to set the control's height directly, I would suggest that you activate the vertical scrollbar (Settings.ShowVerticalScrollbar = true and specify the Settings.VerticallScrollableHeight property. This property will allow you to define the height of the of the scrollable part (rows). I hope, this information will be helpful to you.
I am trying to increase the height of container with increase in the number of contents inside the container.
Like in my case i m using tileList inside tabNavigator , when I put contents inside the tileList, the height of tileList does not increase
beyond vertical height of the viewport. It puts scrollbar on the container. I want to increase the height of an flex container with increase in the contents and introduce
scrollbar on the browser with increase in contents in the flex container.
Could anybody please suggest me how I could achieve this.
Thanks in advance.
You need to write a javascript function which increases the height of embed object and you need to call this javascript method from flex while adding a new item to tile list.
This link explains how to access javascript from flex.
Have considered using javascript and resize the element directly in the source HTML?
The JS code could look something like that:
function changeSize(id) {
var flex = document.getElementById(id);
flex.setAttribute("width", "800");
flex.setAttribute("height", "600");
}
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;