ExtJS4 LinkButton组件 [英] ExtJS4 LinkButton Component
问题描述
我的代码看起来像这样:
Ext.define('LinkButton',{
extends:'Ext.Component',
xtype:'linkbutton',
autoEl:'a',
renderTpl:'< a href = \javascript:; \> {text}< / a>',
config:{
文本:'',
处理程序:function(){}
},
initComponent:function(){
var me = this;
me。 callParent(arguments);
this.renderData = {
text:this.getText()
};
var handler = me.getHandler );
if(handler){
me.on('click',handler);
}
}
});
到目前为止这么好!我的LinkButton看起来像超链接anad我的文本内容在那里。
但是,当我点击它时,我无法让我的组件触发一个事件!
这条特定行 me.on('click',handler);
是不工作!即使将其从 更改为 addListener 也不起作用。
所以问题是:如何将DOM事件添加到我的组件?或者更好的是,我如何访问我自己的组件的DOM元素?我不能做任何的事情!
谢谢!
这是我的命题,这是基于来源于 Button
组件:
code> Ext.define('LinkButton',{
extends:'Ext.Component',
xtype:'linkbutton',
autoEl:'a',
renderTpl:'< a href = \javascript:; \id ={id} -btnEl> {text}< / a>',
config:{
text :$'
$,
initComponent:function(){
var me = this;
me.callParent(arguments) ;
this.renderData = {
text:this.getText()
};
},
onRender:function(ct,position){
变种我=此,
BTN;
me.addChildEls( 'btnEl');
me.callParent(参数);
btn = me.btnEl;
me.mon(btn,'click',me.onClick,me);
},
onClick:function(e){
var me = this;
if(me.preventDefault ||(me.disabled&& me.getHref())&& e){
e.preventDefault();
}
if(e.button!== 0){
return;
}
if(!me.disabled){
me.fireHandler(e);
}
},
fireHandler:function(e){
var me = this,
handler = me.handler;
me.fireEvent('click',me,e);
if(handler){
handler.call(me.scope || me,me,e);
}
}
});
工作示例: http://jsfiddle.net/lolo/AEwH4/1/
I'm trying to create my own LinkButton component in Ext JS 4. Nothing new, right?
My code looks like this:
Ext.define('LinkButton', {
extend: 'Ext.Component',
xtype: 'linkbutton',
autoEl: 'a',
renderTpl: '<a href=\"javascript:;\">{text}</a>',
config: {
text: '',
handler: function () { }
},
initComponent: function () {
var me = this;
me.callParent(arguments);
this.renderData = {
text: this.getText()
};
var handler = me.getHandler();
if (handler) {
me.on('click', handler);
}
}
});
So far so good! My LinkButton does look like a hyperlink anad my text content is in there. Graceful.
However, I can't get my component to fire an event when I click on it!
This particular line me.on('click', handler);
is not working! Even if I change it from on to addListener it has no effect.
So question is: How do I add DOM events to my component? Or, even better, how do I access my own component's DOM element? I haven't been able to do any of that!
Thanks!
Here is my proposition, which is basing on source from Button
component:
Ext.define('LinkButton', {
extend: 'Ext.Component',
xtype: 'linkbutton',
autoEl: 'a',
renderTpl: '<a href=\"javascript:;\" id="{id}-btnEl">{text}</a>',
config: {
text: '',
handler: function () { }
},
initComponent: function () {
var me = this;
me.callParent(arguments);
this.renderData = {
text: this.getText()
};
},
onRender: function(ct, position) {
var me = this,
btn;
me.addChildEls('btnEl');
me.callParent(arguments);
btn = me.btnEl;
me.mon(btn, 'click', me.onClick, me);
},
onClick: function(e) {
var me = this;
if (me.preventDefault || (me.disabled && me.getHref()) && e) {
e.preventDefault();
}
if (e.button !== 0) {
return;
}
if (!me.disabled) {
me.fireHandler(e);
}
},
fireHandler: function(e){
var me = this,
handler = me.handler;
me.fireEvent('click', me, e);
if (handler) {
handler.call(me.scope || me, me, e);
}
}
});
Working sample: http://jsfiddle.net/lolo/AEwH4/1/
这篇关于ExtJS4 LinkButton组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!