0

1 つのページにグリッドを配置する方法を提案してください。各グリッド間に適切なスペースを確保して、3 つのグリッド パネルを 2 行に配置しようとしています。DB からのデータが入力された 3 つの CRUD グリッドがあります (それは store です):

var UserGrid = Ext.create('Ext.grid.Panel', { ... });

var RoleGrid = Ext.create('Ext.grid.Panel', { ... });

var Map = Ext.create('Ext.grid.Panel', { ... });

先に述べたように、それらをさまざまな位置に配置したいと思います。したがって、ビューポートなどで既存のグリッドを参照できるようにしたいと考えています。

それは私の質問の一部です。また、Sencha の ExtJS ドキュメントには本当にイライラしています。多くの人がそれが精巧だと言うことを私は知っています。各 Ext JS オブジェクトで使用する構成、プロパティ、またはメソッドについて非常に混乱しています。ドキュメントにはそれらの詳細が記載されていますが、いつ何を使用すればよいかわかりません。「config」で指定されたオプションはいつ使用しますか? 「プロパティ」で指定されたオプションをいつ使用しますか。「イベント」で指定されたオプションはいつ使用しますか? さらに重要なのは、それらをどのように使用するかです!!

4

2 に答える 2

1

ExtJs でレイアウト システムがどのように機能するかを確認する必要があります: http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers

borderあなたの特定のケースでは、ビューポートをレイアウトで構成し、最初のグリッドをcenterリージョンに配置し、リージョン内の他の 2 つのグリッドのコンテナを作成する必要があると思いますsouth。

また、使用している ExtJ のバージョンを指定することをお勧めします。

アップデート：

したがって、通常、ビューポート定義のどこかに次のように記述します。

layout: 'border'
items: [{
   xtype: 'panel', // This your UserGrid
   region: 'center',
   ... 
}, {
   xtype: 'container',
   region: 'south',
   layout: 'vbox',
   items: [{
      xtype: 'panel', // This your RoleGrid
      flex: 1
      ...
   }, {
      xtype: 'panel', // This your Map
      flex: 1
      ...
   }]
   ... 
}]

これは、グリッド用の特別な変数がない場合 (つまり、手動で作成せず、ExtJ に作成させる場合) に当てはまります。

これらのグリッド内に特別なロジックまたは構成がある場合は、独自のクラスを定義して、標準のパネル/グリッドから継承することができます。この場合xtype: 'panel'、上記のコードをxtypeクラスに合わせて変更することは明らかです。

事前にグリッドを作成したい場合 (何らかの理由があるかもしれませんが、私はめったにそうしません) region、作成時に最初のグリッドに構成を渡す必要があります。

var UserGrid =  Ext.create('Ext.grid.Panel', {
   region: 'center',
   ... 
});

次に、ビューポート コードを次のように変更します。

layout: 'border'
items: [userGrid, {
   xtype: 'container',
   region: 'south',
   layout: 'vbox',
   items: [RoleGrid, Map]
   ... 
}]
于 2013-06-05T21:33:19.263 に答える
1

すでに述べたように、さまざまなレイアウトの使い方を学ぶ必要があります。このデモを見て、何が利用できるかを理解してください。

さて、ドキュメントの構造に関して、「configs」、「methods」、「properties」、および「events」は実際には 3 つの異なる概念ですが、config だけが Ext に固有です。その他は、一般的なオブジェクト指向の概念です。

手短に：

  • プロパティは、オブジェクトにバインドされている変数です。Ext のコンテキストでは、ほとんど常に読み取り専用です。これは、それらの値を変更できない (Javascript では防止できない) という意味ではありませんが、変更 すべきではないということです。そのため、既存のオブジェクトから情報を読み取るために poperties を使用します。例えば：

    if (checkbox.checked) { ... }

  • 構成オプションは、オブジェクトを作成するときに使用できるオプションです。Ext のほとんどすべてのコンストラクターは、単一の引数 (config オブジェクトと呼ばれるオブジェクト) を受け入れます。したがって、オブジェクトを作成するときに構成オプションを使用します。

    Ext.create('Ext.window.Window', {
    width: 200,
    height: 200,
    ...
});

  • メソッドは、オブジェクトに属する関数に付けられた名前です。プロパティとは異なり、メソッドを使用するときはコードが実行されているため、それを使用して処理を行います。

    window.show();
// using the animate parameter
window.show(true);

  • イベントは、アプリケーションで発生するものです。リスナー(コールバック関数とも呼ばれます) をそれらにアタッチすることで、それらに対応できます。ドキュメント内のイベントに指定されたパラメーターは、コールバック メソッドに渡されるパラメーターです。

    // E.g. displaying an alert when a button is clicked
button.addListener(
    // name of the event
    'click',
    // the callback function
    function() {
        alert('Clicked!');
    }
)
于 2013-06-05T22:26:12.797 に答える