Ext JS 4: Change width and height of Ext-JS grid cell-editing widget example

Question

I'm struggling to figure out how to change the width and height of the Ext JS grid (or any Ext JS widget for that matter). They always seem to remain at a fixed height and width. Has anyone done this before? I'm just trying to get a proof of concept built for evaluating this framework against other JavaScript UI frameworks.

Here is the example I'm playing with now:

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.html

There are different div HTML tags that make up the grid, but unfortunately the columns and the data are built dynamically via JavaScript and you cannot see the markup by viewing the HTML source code. The div HTML tags below are the 4 components wrapping around the grid columns and data. I am able to change the styles within Firebug and Google Chrome developer tools, but not in the actual CSS.

DIV HTML tags that make up Ext JS grid:

gridpanel-1010_header
toolbar-1018
headercontainer-1011
gridpanel-1010-body

Here are the styles used in the "cell-editing.html" example. I'm guessing it must be in here somewhere.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Cell Editing Grid Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    <link rel="stylesheet" type="text/css" href="../ux/css/CheckHeader.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>

    <script type="text/javascript" src="cell-editing-keith.js"></script>
</head>
<body>
    <div id="editor-grid"></div>
</body>
</html>

What exactly are you trying to achieve? Does your ExtJs app takes whole page or no? — sha
Yep. I'd like the grid to take up the entire width (and height if possible) of the device it's being displayed on. Whether it's a browser, tablet or phone. The grid will be displaying many columns, so the wider, the better. — MacGyver
Or look here: dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout-browser/… for example — sha
An em is not the parent's size. It's in relation to the default font size of the document, each em is the width of the letter m. If you want to set it in ems, you can call something like Ext.create('Ext.panel.Panel', {width: '20em'}) — Juan Mendes

MacGyver MacGyver · Accepted Answer · 2012-04-29T05:19:36

If you have the grid by itself, it appears that you can modify the width and height with JavaScript properties. You should not control these attributes within the CSS like you are used to.

You can just define the "width" and "height" properties when you instantiate your object. Make a note that the Ext JS code will crash if you use percentages. If you use a number, it assumes it's in pixels. If you want to do this using percentages, make sure to put single quotes around the percentage.

var grid = Ext.create('Ext.grid.Panel', {
  ...
  width: '100%',
  height: 300,
  ...
});

Using Ext JS Layouts is probably more useful if you have no idea what device (computer monitor, tablet, smart phone, etc..) the end-user is viewing the widget on, and the widget/container is embedded within another container. The layout defines how the container sizes its child containers. I've noticed that this is very similar to the Java Swing UI architecture. The developers of the Ext JS framework did a very nice way of summarizing layouts that you'd find in web pages, much like the architectures that User Interface designers use.

Container Layout (aka layout): organizes the HTML elements in their parent Container and manages the size of its children items ("items is just the property name the Ext JS framework uses for the list of objects you add to a Container)

- Auto (default layout)
- Anchor
- Absolute
- Table
- Column
- Card
- Hbox
- Vbox
- Accordian
- Border
- Box
- Fit

Component Layout: organizes HTML elements for a Component

- Dock Layout
- Toolbar Layout
- Field Layout (formerly known as Form Layout in Ext JS 3)
- TriggerField Layout

Ext JS 4: Change width and height of Ext-JS grid cell-editing widget example

1 Answers