情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Ext JSでExt.Panelを使用する

★過去の記事

第1回

今回は一番基本的なコンテナであるパネルを表示してみます。

★基本

パネルを表示するにはExt.Panelを使います。他のコンポーネントも同じですが、インスタンス化の時に幾つかのオプションが入ったオブジェクト(これをコンフィグと呼ぶ)を渡します。

具体的に書くと次のようになります。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "肯定/否定/疑問",
        html: "I am Japanese.<br>我是日本人。<br>Ich bin Japaner.<br><br>I am not Japanese.<br>我不是日本人。<br>Ich bin nicht Japaner.<br><br>Are you Japanese?<br>?是日本人??<br>Sind Sie Japaner?",
        width: 800,
        height: 320,
        renderTo: "floatmenu"
    });
});
  • id・・・名前。明示的に指定しない場合は自動的に付与される。
  • title・・・パネルのタイトルバー(一番上の部分)に表示する文字列。
  • html・・・パネルの内容。HTMLを記述する。
  • width・・・パネルの幅。デフォルトでauto(自動的にサイズ調整)。
  • height・・・パネルの高さ。デフォルトでauto(自動的にサイズ調整)。
  • renderTo・・・パネルを描画する場所。idで指定する。この例の場合、floatmenu上に表示している。

実際には下のように表示されます。

★幅と高さについて

上で書いたようにwidthheightを指定しないとautoとなり、コンテンツに合わせた大きさになるようです。

Ext.onReady(function()
{
    var myPanel = new Ext.Panel(
    {
        id: "myPanel",
        title: "肯定/否定/疑問",
        html: "I am Japanese.<br>我是日本人。<br>Ich bin Japaner.<br><br>I am not Japanese.<br>我不是日本人。<br>Ich bin nicht Japaner.<br><br>Are you Japanese?<br>?是日本人??<br>Sind Sie Japaner?",
        renderTo: "floatmenu"
    });
});

また、大きさに関するプロパティはwidthheightの他にもautoWidthautoHeightがあります。

このコンフィグをtrueに指定すると、widthheightautoになります。widthheightよりプライオリティが高いので、widthautoWidth又はheightautoHeightが同時に指定されている場合は、autoWidthautoHeightが優先され幅/高さはautoに設定されます。

Ext.onReady(function()
{
    var panel = new Ext.Panel(
    {
        id: "myPanel",
        title: "肯定/否定/疑問",
        html: "I am Japanese.<br>我是日本人。<br>Ich bin Japaner.<br><br>I am not Japanese.<br>我不是日本人。<br>Ich bin nicht Japaner.<br><br>Are you Japanese?<br>?是日本人??<br>Sind Sie Japaner?",
        width: 800,
        height: 320,
        autoWidth: true,
        autoHeight: true,
        renderTo: "floatmenu"
    });
});

レンダリング結果は上の画像と全く同じになります。

★collapsible

collapsibletrueにすると折り畳みが可能になります。

Ext.onReady(function()
{
    var panel = new Ext.Panel(
    {
        id: "myPanel",
        title: "肯定/否定/疑問",
        html: "I am Japanese.<br>我是日本人。<br>Ich bin Japaner.<br><br>I am not Japanese.<br>我不是日本人。<br>Ich bin nicht Japaner.<br><br>Are you Japanese?<br>?是日本人??<br>Sind Sie Japaner?",
        width: 800,
        height: 320,
        renderTo: "floatmenu",

        collapsible: true,
        collapsed: false,
        animCollapse: true,
        titleCollapse: true
    });
});
  • collapsible・・・折り畳み可能か。デフォルトでfalsetrueの場合タイトルバーの右にボタンが表示される。
  • collapsed・・・折り畳み状態か。デフォルトでfalse
  • animCollapse・・・折り畳み/折り畳み解除時にアニメーションするか。デフォルトでtrue
  • hideCollapseTool・・・折り畳みが有効になっている時に折り畳みボタンを表示するか。
  • titleCollapse・・・タイトルバーをクリックした時に折り畳み/折り畳み解除の動作を行うか。

折り畳まれていない状態。パネルのタイトルバーの右にボタンが表示されている。

折り畳まれた状態。

今回紹介したコンフィグ項目は全体のほんの一部に過ぎません。

他のコンフィグは必要に応じて適宜紹介していこうと思います。

詳細を知りたい方はAPI Documentation(http://extjs.com/deploy/dev/docs/)を参照すると良いでしょう。

(第2回終)

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ExtJS