EXTJS7 自定义组件 使用element和renderTpl绘制
小编:管理员 504阅读 2022.09.07
版本
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属性根元素引用必须存在,否则报错
Classic工具包[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属性暴露,才可以通过组件的对应属性获取到对象引用。
相关推荐
- ExtJs七(ExtJs Mvc创建ViewPort) 前言在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。调用application方法,其参数是一个配置对象,主要配置项有以下三个:name:用来…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…