Ext JS 4：更改 Ext-JS 网格单元格编辑小部件示例的宽度和高度答案

【问题标题】：Ext JS 4: Change width and height of Ext-JS grid cell-editing widget exampleExt JS 4：更改 Ext-JS 网格单元格编辑小部件示例的宽度和高度
【发布时间】：2012-04-27 20:21:22
【问题描述】：

我正在努力弄清楚如何更改 Ext JS 网格（或任何 Ext JS 小部件）的宽度和高度。它们似乎总是保持在固定的高度和宽度。有没有人这样做过？我只是想获得一个概念证明，用于针对其他 JavaScript UI 框架评估这个框架。

这是我现在正在玩的例子：

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

组成网格有不同的 div HTML 标签，但不幸的是，列和数据是通过 JavaScript 动态构建的，您无法通过查看 HTML 源代码看到标记。下面的 div HTML 标签是围绕网格列和数据的 4 个组件。我可以在 Firebug 和 Google Chrome 开发人员工具中更改样式，但不能在实际的 CSS 中更改。

构成 Ext JS 网格的 DIV HTML 标记：

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

以下是“cell-editing.html”示例中使用的样式。我猜它一定在这儿的某个地方。

<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>

【问题讨论】：

您到底想达到什么目的？您的 ExtJs 应用程序是否占用整个页面？
是的。我希望网格占据显示它的设备的整个宽度（如果可能，还有高度）。无论是浏览器、平板电脑还是手机。网格将显示许多列，因此越宽越好。
Ext JS 小部件的默认宽度似乎约为 600 像素
或者看这里：例如dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout-browser/…
一个 em 不是父级的大小。它与文档的默认字体大小有关，每个 em 是字母 m 的宽度。如果你想在ems中设置，你可以调用Ext.create('Ext.panel.Panel', {width: '20em'})

标签： grid height width extjs

【解决方案1】：

如果您自己拥有网格，您似乎可以使用 JavaScript 属性修改宽度和高度。您不应该像以前那样在 CSS 中控制这些属性。

您可以在实例化对象时只定义“宽度”和“高度”属性。请注意，如果使用百分比，Ext JS 代码将崩溃。如果您使用数字，则假定它以像素为单位。如果您想使用百分比来执行此操作，请确保在百分比周围加上单引号。

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

如果您不知道最终用户正在查看小部件的设备（计算机显示器、平板电脑、智能手机等），并且小部件/容器嵌入在另一个设备中，则使用 Ext JS 布局可能更有用容器。布局定义容器如何调整其子容器的大小。我注意到这与 Java Swing UI 架构非常相似。 Ext JS 框架的开发人员用一种非常好的方式来总结您在网页中发现的布局，这与用户界面设计人员使用的架构非常相似。

容器布局（又名布局）：在其父 Container 中组织 HTML 元素并管理其子项的大小（“items 只是 Ext 的属性名称JS 框架用于您添加到容器的对象列表）

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

组件布局：为组件

组织HTML元素

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

【讨论】：

你可以使用 CSS 来设置宽度和高度，通过给组件一个 id 或 cls 配置，你可以在你的选择器中使用，使用检查器来尝试一下