7.4.0

Ext.define('myComponent',{
	// 繼承Ext.Component
	extend: 'Ext.Component'
	// 渲染元素
	element: {
		// 根元素引用
		reference: 'element',
		children:[{
			// 自定義HTML對象引用
			reference: 'myObj',
			// HTML標簽
			tag: 'img',
			// 綁定事件
            listeners: {
              click: 'onInnerClick'
            }
		}]
	},
	onInnerClick:function(){}
});

注：element屬性根元素引用必須存在，否則報錯

[E] Ext.Widget.initElement(): No ‘element’ reference found in ‘myComponent’ template.

Ext.define('myComponent',{
	// 繼承Ext.Component
	extend: 'Ext.Component'
	// 渲染元素
	renderTpl:  [
		// {id}值為myComponent組件ID
        '
{title}
',
        '
{msg}
',
    ],
    // 用于渲染的額外屬性值
    renderData: {
        title: "Error",
        msg: "Something went wrong"
    },
    // 子元素選擇器
    childEls: ["title"],
    listeners: {
        afterrender: function(cmp){
            // 渲染完成后可以從組件的屬性獲取到對應子元素對象
            cmp.title.setStyle({color: "red"});
        }
    }
});

注：子元素必須指定id屬性和data-ref屬性，并通過childEls屬性暴露，才可以通過組件的對應屬性獲取到對象引用。