PDA

View Full Version : How to call container's method in property class



chandlersong
30 Apr 2012, 12:51 AM
Ext.define('extjs.example.mypanel',{
extend:'Ext.panel.Panel',

layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
initComponent: function(config) {
Ext.apply(this,{
items: [
this.subpanel,
{html:'panel 2', height:150},
{html:'panel 3', height:150}
]
}
);
this.callParent(arguments);
},


subpanel:Ext.create('Ext.panel.Panel',{
html:'panel 1',
height:150,
listeners:{
click: function(){this.doSomething();},
element: 'body'
}
}),

doSomething:function(){
alert('hi');
}
}
);

Ext.onReady(function() {
Ext.create('extjs.example.mypanel', {
renderTo: Ext.getBody(),
height:500,
width: 500
});

});


here's a property subpanel, and I add one listener to monitor click event.
when the subpanel be clicked, I hope the method doSomething in extjs.example.mypanel will be called,
but i found it can't work. how can I do to make it work

evant
30 Apr 2012, 1:29 AM
Ext.define('extjs.example.mypanel', {
extend: 'Ext.panel.Panel',

layout: {
type: 'vbox',
align: 'stretch',
pack: 'start',
},

initComponent: function(config) {
this.subpanel = Ext.create('Ext.panel.Panel', {
html: 'panel 1',
height: 150,
listeners: {
scope: this,
click: function() {
this.doSomething();
},
element: 'body'
}
});
Ext.apply(this, {
items: [this.subpanel, {
html: 'panel 2',
height: 150
}, {
html: 'panel 3',
height: 150
}]
});
this.callParent(arguments);
},

doSomething: function() {
console.log('click');
}
});

Ext.onReady(function() {
Ext.create('extjs.example.mypanel', {
renderTo: Ext.getBody(),
height: 500,
width: 500
});

});

chandlersong
30 Apr 2012, 2:56 AM
thanks,evant,

it can work. :D,but I'm sorry to say it's not the answer I what.

I'm a beginner and what i want in this case is how can I call method in a property of class.
in this case, not use initComponent, just by configure.

or how can I get the object of ext.example.mypanel in subpanel?

evant
30 Apr 2012, 4:05 AM
Because you can't. "this" is meant to refer to an object instance. As such, you can't specify the scope on the listener when defining the class, you need to do it inside the instance where "this" points to the current object.

chandlersong
30 Apr 2012, 4:34 AM
thanks for your reply, I get your point.

my question is how can I get the object in the property. 'this' is wrong ,is there any other way?

vietits
30 Apr 2012, 4:55 AM
Try this


Ext.onReady(function() {

Ext.define('extjs.example.mypanel',{
extend:'Ext.panel.Panel',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
initComponent: function(config) {
Ext.apply(this,{
items: [
this.subpanel,
{html:'panel 2', height:150},
{html:'panel 3', height:150}
]
});
this.callParent(arguments);
},
subpanel: Ext.create('Ext.panel.Panel',{
html: 'panel 1',
height: 150,
listeners:{
click: function(){
var cmp = Ext.getCmp(this.id.replace('-body',''));
cmp.up('panel').doSomething();
},
element: 'body'
}
}),
doSomething:function(){
alert('hi');
}
}
);


Ext.create('extjs.example.mypanel', {
renderTo: Ext.getBody(),
height:500,
width: 500
});


});