Achieve ext grid wide and high adaptive

Source: Internet
Author: User

I do not know whether it is an ext bug or another reason. When the grid is initialized and set the width to 100%, its width will change to pixel PX width. If the height is 100%, the grid height will be adaptive according to the grid content, instead of adapting to the container where it is located, there has been no good way to use absolute width and height, but sometimes this is inconvenient.
I have been worried about this problem. Later I finally came up with a solution that is really feasible, but it just feels a little lame.
Generally, we use render to display the grid on the layer of the specified ID. Although the grid width and height cannot be adaptive, the layer is still acceptable.
For example, the layer used here is <Div id = "orggrid"> </div>. We can set the height and width on this layer.
For example, <Div id = "orggrid" style = "width: 100%; Height: 250px"> </div>.
The width and height of the grid can be the same as the orggrid width and height when initializing the grid, and the width of the calculator can be re-calculated when the page is resize (the general height is fixed or better ).

//... First several rows Code Omitted, such as DS/colmodel
VaR orggrid = ext. Get ("orggrid"); // display the grid Women's container brands
VaR grid = new Ext. Grid. gridpanel ({
Title: "Personnel Management ",
DS: ds, // Data Source
CM: colmodel, // column Mode
SM: selmode, // select mode
Width: orggrid. getcomputedwidth (),
Height: orggrid. getcomputedheight (),
Autoexpandcolumn: "Memory", // columns that automatically expand the width
Autoscroll: True,
Loadmask: {MSG: "loading data. Please wait "}
});
DS. Load (); the trend of Java-Javascript
Grid. Render (orggrid); // store the grid in the container with the ID as grid.

window. onresize = function () {
grid. setwidth (0);
grid. setwidth (orggrid. getcomputedwidth ();
};

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.