04. パネルの中身をセットする

 パネルの内容を動的にセットするには，Ext.Templateを使うのがExtJS流みたいです。

参考サイト

• ExtJS入門10　Ext.XTemplateを使う
• Ext.Templateの使い方

テンプレートとなるhtml文をセットしてテンプレートオブジェクトを生成。そのhtmlは，ページ中の要素からも取り出せるし，文字列で与えても良い。

Ext.onReady(function() {
    Ext.QuickTips.init();
    var cmp1 = new MyViewport({
        renderTo: Ext.getBody()
    });
    var sTemp = "<div>{contents}</div>";
    var oTemp = new Ext.Template(sTemp);
    Ext.getCmp("btnShow").handler = 
        function() {
            oTemp.overwrite(
                Ext.getCmp("pnlCanvas").body, 
                {
                    'contents':
                    Ext.getCmp("txtHtml").getRawValue()
                }
            );
        }
    ;

    cmp1.show();
});

そのテンプレートオブジェクトのapplyメソッドでテンプレートから生成したhtmlを得ることができるし，overwriteメソッドを使うとエレメントを書き換えることができる。そのエレメントにpanelオブジェクトのbodyを渡してやれば，パネルの中身を書き換えられるということです。

1. 6行目でテンプレートの元になるhtml文を定義。
2. 7行目でTemplateオブジェクトを生成。
3. 9行目からはbtnShowというボタンのイベントハンドラで，txtHtmlというHtmlEditorコンポーネントで入力された値をpnlCanvasというパネルに表示しています。