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 ();
};