ext的自定义组件问题

[jazzbond]

Ext.namespace('JpkFrame.common');

JpkFrame.common.JpkImgLabel = Ext.extend(Ext.BoxComponent, {
    initComponent: function() {
        JpkFrame.common.JpkImgLabel.superclass.initComponent.call(this);
        this.addEvents('click');
    },
    onRender: function(ct, position) {   onRender是渲染,可我不知道去掉为什么不可以,而且里面还有两个参数干嘛的

        if (!this.el) {                   //this.el是表示什么啊,el是元素我知道,可this.el我不知道是他哪个元素
            this.el = document.createElement('img');
            this.el.src = this.src;                  //这句话我也不理解,为什么 this.el.src = this.src
            if (this.forId) {                       //this.forId我也不知道哪来的
                this.el.setAttribute('htmlFor', this.forId);   //这句我也不知道要干嘛
            }
        }

        JpkFrame.common.JpkImgLabel.superclass.onRender.call(this, ct, position);

        Ext.fly(this.el).on('click',function() {           //这个也希望大家解释一下
            this.fireEvent('click', this);                  //这个也希望大家解释一下
        },
        this);
    }
});

Ext.reg('JpkImgLabel', JpkFrame.common.JpkImgLabel);

[watermarkmms]

渲染方法当然不可以去掉了，如果不渲染，你的页面上根本得不到这个对象。至于两个参数，这个不需要管他，就是写死这样的。this.el表示自定义对象的节点对象，如果没有节点对象，就创造一个img节点，然后这个img的图片路径是src.如果你在当前文本里找不到对象，那么它肯定是Ext.BoxComponent本身的对象，包括下面的forid,然后为这个节点创建添加一个click事件。fireEvent不清楚，应该是空间本身的事件吧

[jazzbond]

[Quote=引用 1 楼 watermarkmms 的回复:]
渲染方法当然不可以去掉了，如果不渲染，你的页面上根本得不到这个对象。至于两个参数，这个不需要管他，就是写死这样的。this.el表示自定义对象的节点对象，如果没有节点对象，就创造一个img节点，然后这个img的图片路径是src.如果你在当前文本里找不到对象，那么它肯定是Ext.BoxComponent本身的对象，包括下面的forid,然后为这个节点创建添加一个click事件。fireEvent不清?-
[/Quote]

this.el表示自定义对象的节点对象,那 this.el.src=this.src作何理解

BoxComponent有个src吗?我查了源文件 是有这样一段

var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});

但 this.el.src=this.src还是一头雾水

假设我不用继承,然后直接 new Ext.BoxComponent(),难道BoxComponent本身就是在放图片的.....

[jazzbond]

[Quote=引用 1 楼 watermarkmms 的回复:]
渲染方法当然不可以去掉了，如果不渲染，你的页面上根本得不到这个对象。至于两个参数，这个不需要管他，就是写死这样的。this.el表示自定义对象的节点对象，如果没有节点对象，就创造一个img节点，然后这个img的图片路径是src.如果你在当前文本里找不到对象，那么它肯定是Ext.BoxComponent本身的对象，包括下面的forid,然后为这个节点创建添加一个click事件。fireEvent不清?-
[/Quote]
this.el表示自定义对象的节点对象,那 this.el.src=this.src作何理解

BoxComponent有个src吗?我查了源文件 是有这样一段

var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});

但 this.el.src=this.src还是一头雾水

假设我不用继承,然后直接 new Ext.BoxComponent(),难道BoxComponent本身就是在放图片的.....

[smnzg]

el,forId,src其实都是这个对象的属性，用"this."来调用，
if (!this.el) { //如果没有定义这个属性
this.el = document.createElement('img'); //将这个属性创建成img的html元素
this.el.src = this.src; //将这跟img元素的src的值赋成设定的src属性的值
if (this.forId) { //如果定义了forId
this.el.setAttribute('htmlFor', this.forId); //设定img元素的htmlfor属性
}
}

Ext.fly(this.el).on('click',function() { //on：监听事件，当监听到时，执行函数，这里是监听“click”事件
this.fireEvent('click', this); //fireEvent：触发事件，这里是触发“click”事件
},

这个对象的使用方法是
new JpkFrame.common.JpkImgLabel({
src : "xxx.jpg",
forId : "...." //可以不定义
})

img的html写法是
<img src="xxxx.xxx">
"htmlfor"好像是指定某个控件触发onclick事件

[curtishang]

只有执行了onRender方法 this.el才会存在 不然就是undefined
onRender：function(ct, position) ct（container）是父容器对象 position是相对父容器的位置

this.el 是EXTJS对象对应的DOM对象
this.src只是EXTJS对象自己的属性

this.el.src=this.src 把自己的SRC属性给DOM对象
你可以这样理解 EXTJS对象包装了this.el这个DOM

if (this.forId) {
this.el.setAttribute('htmlFor', this.forId);
}
this.forId是一个属性 如果该属性赋值了（没赋值就是undefined） 就给对应DOM元素的htmlFor属性附上该值

Ext.fly(this.el).on('click',function() {
this.fireEvent('click', this);
}

//给DOM元素的click事件添加函数 这个函数是匿名的 具体执行的代码就是 this.fireEvent('click', this); 这句话的意思是 触发EXTJS的click事件，this 就是EXTJS的click事件所传的参数 也就是说DOM的CLICK事件触发了EXTJS的click事件

EXTJS几乎所有的组件都是这样的设计 有机会可以研究下EXT的源码