EXTJS7 自定义组件 使用element和renderTpl绘制

版本

7.4.0

Modern工具包

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.

Classic工具包

Ext.define('myComponent',{
	// 继承Ext.Component
	extend: 'Ext.Component'
	// 渲染元素
	renderTpl:  [
		// {id}值为myComponent组件ID
        '<h1 id="{id}-title" data-ref="title">{title}</h1>',
        '<p>{msg}</p>',
    ],
    // 用于渲染的额外属性值
    renderData: {
        title: "Error",
        msg: "Something went wrong"
    },
    // 子元素选择器
    childEls: ["title"],
    listeners: {
        afterrender: function(cmp){
            // 渲染完成后可以从组件的属性获取到对应子元素对象
            cmp.title.setStyle({color: "red"});
        }
    }
});

注：子元素必须指定id属性和data-ref属性，并通过childEls属性暴露，才可以通过组件的对应属性获取到对象引用。