PDA

View Full Version : Panel method missing?



redmagic
21 Dec 2011, 4:10 AM
Hi,

I have created a view as follows:



Ext.define('Importer.view.mmbase.UserControls', {
extend: 'Ext.Panel',
alias: 'widget.mmbase-usercontrols',

title: 'Gegevens importeren',
bodyStyle: 'padding:20px',

layout: {
align: 'stretch'
},

items: [{
xtype: 'panel',
border:false,
defaults: {
xtype: 'panel',
flex: 1,
layout: 'anchor',
border: false,
margin: '0 0 10px 0'
},
items: [{
items: [{
xtype: 'numberfield',
id: 'key',
fieldLabel: 'MMBase key',
labelAlign: 'top',
emptyText: 'Node nummer',
hideTrigger:true,
keyNavEnabled: false,
mouseWheelEnabled: false,
anchor: '100%'
}]
}, {
items: [{
xtype: 'button',
id: 'preview',
text: 'Toon',
anchor: '50%'
},{
xtype: 'button',
id: 'import',
text: 'Importeer',
anchor: '50%'
}]
}, {
border: false,
id: 'feedback',
cls: 'feedback',
html: '<p>message</p>'
}]
}],

setFeedBack: function (msg) {

var feedback = Ext.ComponentQuery.query('#feedback', this);
console.log(feedback);// Logs the correct x-panel
console.log(feedback.getEl());//TypeError: 'undefined' is not a function (evaluating 'feedback.getEl()')
}

});


From the controller I call the setFeedback method, in which I use the componentquery to get a reference to one of the view's panels.

However, the method getEl() does not seem to exist on the object that is returned. If I inspect the object in the console, I can seen it is the correct panel that is found.

Any thoughts?

Thanks,

Arjen

redmagic
21 Dec 2011, 4:40 AM
Update: got it working by replacing


var feedback = Ext.ComponentQuery.query('#feedback', this);

with


var feedback = this.down('#feedback');


If anybody knows why, feel free to comment!

skirtle
22 Dec 2011, 11:22 PM
The query method returns an array of components. You were then invoking getEl on the array, not the component.

redmagic
23 Dec 2011, 1:00 AM
That was enlightening, thank you.