ExtJSで楽しくRIA業務アプリ開発

xtypeでパネルのタイプを定義する
ViewportのitemsのようにExt.Componentのサブクラス(Ext.Panelなど)を与えるときに、インスタンスを直接渡すのではなく、オブジェクト・リテラルを記述して渡すことができます。

オブジェクトリテラルについてはこちらで詳しく解説されています。
http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/story/0,3800083428,20365303,00.htm

ECMAScriptにおける「オブジェクトリテラル」と言う書式に基づいています。「オブジェクトリテラル」は、次のように定義されています。
「{ }」（中括弧）で囲み、中にプロパティをカンマ区切りで複数記述できる。
プロパティは、「プロパティ名 : 値」と言う形式で記述する。
プロパティ名は、識別子／文字列／数値。
値は、代入式の右辺と成り得る式。

ExtJSでコードを少し書いている人にはおなじみの書式ですね。「{}」でかこって、キーと値を設定していくやり方です。

パネルをオブジェクトリテラルで作る場合の基本的な書式はExt.Panelを作るのと同じで。

{
    id:'newPanel',
    xtype:'panel',
    title:'New Panel',
    html:'<p>パラグラフ</p>',
}

上のコードで生成されるパネルは下のようにパネルを作るのとほぼ同じ結果になります。

new Ext.Panel({
    id:'newPanel',
    title:'New Panel',
    html:'<p>パラグラフ</p>',
});

xtypeに’panel’を指定しています、これでExt.Panelを生成します。
自分でつくったクラスを使う場合は、xtypeに登録してからでなければxtypeで指定できない。Ext.regを使って登録します。ただしどんな名前でも登録できるので、既にxtypeとして登録してある名前を指定しないように注意。

デフォルトで定義ずみxtypeの一覧
ExtJSのAPIリファレンスのExt.Componentのページへ行くと、定義済みのxtypeの一覧が載っています。
http://extdocs.xenophy.com/?class=Ext.Component
またExt.ComponentのサブクラスのAPIリファレンスへ行くと,そのクラスのxtypeが何か表示されています。

遅延レンダリング(Lazy-Renderer)
xtypeでコンポーネントを作りたいパネルを指定するとオブジェクトリテラルを使ってパネルが生成できました。見た目上はnew Ext.Panel({〜})とほとんどかわらないように見えます。xtypeを使う最大のメリットは遅延レンダリング(Lazy-Renderer)を使うことができるという点です。
オブジェクトリテラルがセットされた時点ではnewされません（インスタンス化されない）。描画が必要になった時に初めてインスタンス化されます。

xtypeでタブパネルを指定するサンプル。

new Ext.Viewport({
    layout:'border',
    renderTo:Ext.getBody(),
    items:[
        {
            region:'center',
            title:'Center Panel',
            html:'<p>Center Panel</p>',
            bodyStyle:'padding:100px',
            minSize:200,
        },{
            region:'west',
            xtype:'tabpanel',
            items:[
                {
                title:'tab1',
                html:'タブパネル1'
                },{
                title:'tab2',
                html:'タブパネル2'
                }
            ],
            height:90,
            width:200,
            minSize:200,
            maxSize:400,
            split:true
        }
    ]
});

ここではwestのコンポーネントにタブパネルを設定しています。タブパネルはさらに子となるパネルを必要とするので、その設定にもオブジェクトリテラルでExt.Panelを設定しています。(xtypeが省略されている場合はExt.Panelとして生成されます)。
通常タブパネルやアコーディオンレイアウトの場合はオブジェクトリテラルでxtypeを指定して、遅延レンダリングを有効にするのが常套手段です。
画面に見えていないパネルは、表示されるときに初めてレンダリングされます。簡単なアプリケーションの場合は遅延レンダリングの効果をあまり実感することはありませんが、AJAXを使ったパネルや画像、Flashを内部に読み込んでいるコンポーネントを使うようになると遅延レンダリングは必須になると思います。またidコンフィグを適切に付けておくことで、Ext.getCmpでオブジェクトリテラルを使って作ったコンポーネントを簡単に指定できますし、デバッグ時にFirebugでも分かりやすくなるので、なるべくidは付けておいたほうがいいと思います。
xtypeを適切に使って、見た目もコードもスマートなアプリを作るように心がけたいです。