Question

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

Answer 1

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

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

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

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

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

- 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

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

1 个答案: