0

我正在努力弄清楚如何更改 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>
4

1 回答 1

0

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

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

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

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

容器布局（又名布局）：在其父容器中组织 HTML 元素并管理其子项目的大小（“项目只是 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
于 2012-04-29T05:19:36.450 回答