ExtJs4のHelloWorld - 技術をかじる猫

ExtJs 1.1 だかの頃から一切触ってなかったので、忘れたなんてもんじゃない。
別物にもなってるだろうし、初学者同然なので、初心者らしく、HelloWorld叩いてみる。

まずはSencha(何で煎茶なのかは不明)から、Ext.JS落として来る。
ライセンスとか勉強で気にする必要はないので、迷わずGPLのものを選択。

ファイルをダウンロード後に、ファイルを以下のように配置した。

ProjectDir
  |--ext
      |--ext-all.js
      |--....

必要な最小セットは、ext-all-debug.js(or ext-all.js)と、resources(ext直下)だけど、まぁ面倒なので放置。

<!DOCTYPE html>
<html>
<head>
    <title>PanelSample</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    
    <script type="text/javascript">
        Ext.onReady(
            function() {
                var panel = new Ext.Panel({
                    renderTo: 'panel',
                    title: 'SamplePanel',
                    html: "Help me to tell about Ext.<br />I was forgotten....|||orz",
                    buttons: [{ text: "Button", handler: function() { Ext.Msg.alert("sample", "click"); } }],
                    width: 320,
                    height: 200,
                    padding: 10,
                    frame: true
                });
            }
        );
    </script>
</head>

<body>
<div id="panel" ></div>
</body>
</html>

ネスト深くなってやーねとか思うけど、気にしてもしょうが無いので気にしない。

ボーダーで配置も試してみる。

<!DOCTYPE html>
<html>
<head>
    <title>PanelSample</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    
    <script type="text/javascript">
        Ext.onReady(
            function() {
                var panel = new Ext.Panel({
                    renderTo: 'panel',
                    title: 'Border sample',
                    layout: 'border',
                    items: [
                        { xtype: 'panel',
                          frame: true,
                          region: "west",
                          title: "Left panel",
                          html: "This is message of left panel.",
                          width:90},
                        { xtype: 'panel',
                          frame: true,
                          region: "center",
                          title: "Center panel",
                          html: "Center panel message."}
                    ],
                    width: 320,
                    height: 200,
                    padding: 10,
                    style: 'margin: 40px',
                    frame: true
                });
            }
        );
    </script>
</head>

<body>
<div id="panel" ></div>
</body>
</html>