0

Ext JSグリッド（またはそのことについては任意のExt JSウィジェット）の幅と高さを変更する方法を理解するのに苦労しています。それらは常に固定された高さと幅のままであるように見えます。誰かがこれを以前にやったことがありますか？このフレームワークを他のJavaScriptUIフレームワークと比較して評価するために構築された概念実証を取得しようとしています。

これが私が今遊んでいる例です：

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

グリッドを構成するさまざまなdivHTMLタグがありますが、残念ながら、列とデータはJavaScriptを介して動的に構築され、HTMLソースコードを表示してもマークアップを表示できません。以下のdivHTMLタグは、グリッド列とデータをラップする4つのコンポーネントです。FirebugおよびGoogleChrome開発者ツール内でスタイルを変更することはできますが、実際のCSSでは変更できません。

ExtJSグリッドを構成するDIVHTMLタグ：

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内でこれらの属性を制御しないでください。

オブジェクトをインスタンス化するときに、「幅」と「高さ」のプロパティを定義するだけです。パーセンテージを使用すると、ExtJSコードがクラッシュすることに注意してください。数値を使用する場合は、ピクセル単位であると想定されます。パーセンテージを使用してこれを行う場合は、パーセンテージを一重引用符で囲んでください。

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

Ext JSレイアウトの使用は、エンドユーザーがウィジェットを表示しているデバイス（コンピューターモニター、タブレット、スマートフォンなど）がわからず、ウィジェット/コンテナーが別のコンテナーに埋め込まれている場合に、おそらくより便利です。レイアウトは、コンテナが子コンテナのサイズを決定する方法を定義します。これはJavaSwingUIアーキテクチャと非常によく似ていることに気づきました。Ext JSフレームワークの開発者は、ユーザーインターフェイスの設計者が使用するアーキテクチャのように、Webページにあるレイアウトを要約する非常に優れた方法を実行しました。

コンテナレイアウト（別名レイアウト）：親コンテナ内の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 に答える