Panelなどのtitleをhtmlで設定する (ExtJS)

Panelとその拡張のコンポーネントはheader、headerCfgオプションを使用してタイトルを設定できます。titleオプションでタイトルを設定する場合はテキストしか使えませんが、headerをtrueにしてheaderCfgを有効にすれば、DOM要素でタイトルを設定することができます。このときtitleオプションは指定しないようにします。
headerCfgの書式はExt.DomHelperと同じです。

もともとfieldsetのtitleにcollapse/expandの動きと関係ないチェックボックスを付ける方法を探していたんで、その例をおいておきます。

上段のfieldsetはタイトルをheaderCfgオプションで設定したもの、下段はタイトルをtitleオプションで設定し、checkboxToggleをtrueに設定したものです。チェックボックスを外したときの動きが違います（checkboxToggleはfieldsetのcollapse / expandのためのオプションなので）。

 checked

unchecked

javascriptソースは以下の通りです。

javascript:

Ext.onReady(function(){
    var panal = new Ext.Panel({
        title: 'Sample panel',
        height: 250,
        width: 300,
        bodyStyle: 'padding: 15px',
        renderTo: 'panel',
        layout: 'form',
        items: [{
            xtype: 'fieldset',
            header: true,
            headerCfg: {
                tag: 'legend',
                cls: 'x-fieldset-header x-unselectable',
                cn: [{
                    tag: 'input',
                    type: 'checkbox'
                }, {
                    tag: 'span',
                    cls: 'x-fieldset-header-text',
                    html: 'header config'
                }]
            },
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Field 1'
            }, {
                fieldLabel: 'Field 2'
            }]
        }, {
            xtype: 'fieldset',
            checkboxToggle: true,
            collapsed: true,
            title: 'Title',
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Field 3'
            }, {
                fieldLabel: 'Field 4'
            }]
        }]
    });
});

headerCfgでは次の4つの以外は、DOM要素の属性と判断されます。

• tag: 要素のタグ名
• children or cn: 子要素の配列
• cls: 要素のclass属性
• html: innerHTML