Extjs 学習ノート 6Panel_extjs

Extjs はパネルをカプセル化しています。パネルはタイトルヘッダー、パネル本体、パネル下部が統一されており、ツールバーなどを自由に追加することもできます。さらに、extjs にはパネルのレイアウトに使用できる豊富なレイアウトがあります。この方法は Java の Swing に非常に似ています。パネルはネストでき、ページ全体のフレームとして、または小さな機能領域として使用できます。前の記事で使用した FormPanel は、Panel クラスから継承されます。

次の例は、主にツールバーを設定する比較的完全なパネルを示しています。

コードをコピー コードは次のとおりです。 : Extjs コンボボックス "text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"> Ext.onReady(function() { new Ext.Panel({ タイトル: 'パネル ヘッダー) ', tbar: ['トップツールバー', { // xtype: 'button', // ツールバーのデフォルト、'tbbutton' と同じ text: 'ボタン' }, { xtype: 'splitbutton', // 'tbsplitbutton' と同じ text: 'Split Button' }, // 右揃えのボタンコンテナの使用を開始します '-&gt ; ', // {xtype: 'tbfill'} と同じ, // Ext.Toolbar.Fill { xtype: 'textfield', name: 'field1', emptyText: ' enter検索語' }, // ツールバー項目の間に垂直区切りバーを追加します '-', // {xtype: 'tbseparator'} と同じで Ext.Toolbar.Separator ' text 1', // Ext.Toolbar.TextItem を作成する {xtype: 'tbtext', text: 'text1'} と同じ {xtype: 'tbspacer' }, // Ext.Toolbar を作成する ' ' と同じ.Spacer 'text 2', { xtype: 'tbsspacer', width: 50 }, // 50px のスペースを追加 'text 3'], bbar: ['下部ツールバー ' ]、 applyTo: 'mypanel'、 frame: true、 html: ' ここにパネルの本体があります '、 bodyStyle: 'background- color :#FFFFFF', 高さ: 300, 幅: 600, 折りたたみ可能: true, ツール: [{ id: 'toggle' }, { id: 'close' }, { id : '最大化'}]、 ボタン: [new Ext.Button({ text: 'Click Me' })] }); >

効果は次のとおりです。

次に、コンテンツをパネルにロードする方法を説明します。実際、上記の例ではhtml属性で直接指定する方法を示しましたが、この方法はあまり実用的ではないようです。パネルには、リモート ページをロードできる autoLoad プロパティがあります。次の内容を含む新しいページ RemoteContent.htm を作成します:

コードをコピーします コードは次のとおりです: /head> リスト項目 2 li>リスト項目 3 リスト項目 5 /body>

上記の例の HTML 設定項目を削除し、次のように置き換えます: autoLoad:'RemoteContent.htm' 結果は次のようになります: autoLoad 設定item が変更されます の間のコンテンツがロードされます。ロードされるファイルには を含めることはできません。そうしないと、正常にロードされないことに注意してください。また、この方法を使用して aspx ページを直接読み込むと失敗することが多いことに注意してください。たとえば、次の内容を含む新しい Default.aspx ページを作成します。 コードをコピーします コードは次のとおりです。 /title> ラベル ID="Label1" runat="server" Text="Label">

Label1.Text = "Hello Asp.net With Extjs.";

autoLoad を Default.aspx ページとして構成し、ボタンをクリックすると、パネル全体が消えて、aspx ページのコンテンツだけが残ります。したがって、autoLoad は HTML ファイル、または ashx ページを通じて出力された HTML コードを読み込むのに適しています。これらの出力コードは独自に厳密に制御されており、デフォルトの aspx ポストバック ページを使用すると確実に機能しません。 extjs と asp.net サーバー コントロールを直接組み合わせることもできません。面倒な場合は、次のメソッドを使用できます: html:' '以上です。 Panel には、このページに dom ノードをロードできる ContentEl 属性もあります。このメソッドは、Default.aspx を少し変更することで、asp.net サーバー コントロールと組み合わせて使用することもできます。

コードをコピー

コードは次のとおりです。 > ここにいくつかの修正されたコンテンツがあります

html 属性と autoLoad 属性が削除され、置き換えられることを除いて、上記の例と同じです。 with: contentEl: 'panelcontent' このパネルが、panelcontent の ID を持つ div 内のコンテンツ、つまりラベルとボタンをロードする必要があることを示します。効果は次のとおりです:

の元のコンテンツである contentEl の効果を確認できます。ここにいくつかの修正された Content があります。 ; のコンテンツがパネルの内側に移動されます。このとき、ボタンをクリックするとサーバー側のコードが正しく応答します。このメソッドはページ上の一部の DOM ノードの位置を移動するだけであり、一般的にはサーバー側のイベントには影響しませんが、このように、Panel の役割は div の役割とあまり変わりません。 最後に、項目構成項目を通じて他の Extjs コンポーネントをパネルに追加する方法を紹介します。 HTML を直接追加するだけでなく、他のコンポーネントをパネルに追加することもできます。パネル自体もコンポーネントであるため、パネルをネストすることができます。ネストされたパネルを次のセクションで紹介するレイアウトと組み合わせると、一部のレイアウト作業を簡単に完了できます。 新しいnestedPanel.htmを作成します。コードは次のとおりです。項目を使用してパネル内のコンテンツを構成します:

コードをコピーします

コードは次のとおりです: Extjs Nest Panel Ext.onReady(function() { new Ext.Panel({ title: 'Panel Header', renderTo: 'panel1', frame: true, bodyStyle: 'background-color:#FFFFFF', collapsible: true, items: new Ext.DatePicker(), width: 189 }); new Ext.Panel({ title: 'Nested Panel', renderTo: 'panel2', width: 189, frame: true, items: [{ xtype: 'panel', title: 'nested 1',html:' I am panel A ' }, { xtype: 'panel', title: 'nested 2', autoLoad:'RemoteContent.htm'}] }); }); 效果如下：

Extjs 学習ノート 6Panel_extjs

関連記事