PDA

View Full Version : Finding a component?



alejandroNNU
17 Dec 2013, 12:53 PM
Hello,

I am trying to find a component, a panel to be specific, using componentquery and it's not working out which I'm guessing is because it's in another container. Up until now I've always been working with components which are all inside one 'main' container, which I call mainPanel (it's itemId). So for example if I wanted to reference testPanel I would do:


var testPanel = Ext.ComponentQuery.query('#testPanel')[0];

but this time testPanel is it's own top-level view/component, it's not within mainPanel, which is why I assume it's not working, I get back undefined. So my question is, from mainPanel, how do I reference testPanel? I hope I'm explaining myself properly, I'd really appreciate some help with this.

scottmartin
17 Dec 2013, 1:09 PM
Here are several approaches:



Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.panel.Panel', {
itemId: 'main-panel',
title: 'Hello',
width: 200,
html: '<p>World!</p>',
items: [{
xtype: 'panel',
itemId: 'inside-panel',
html: 'Inside Panel'
}],
renderTo: Ext.getBody()
});

var panel1 = Ext.ComponentQuery.query('#main-panel')[0];
console.log(panel1);

var panel2 = Ext.ComponentQuery.query('panel[itemId=main-panel]')[0];
console.log(panel2);

var ipanel1 = panel1.query('#inside-panel')[0];
console.log(ipanel1);

var ipanel2 = panel2.down('#inside-panel');
console.log(ipanel2);

}
});

alejandroNNU
17 Dec 2013, 1:24 PM
I think you misunderstand me, testPanel and mainPanel are two separate, top-level views, one is not within the other which is why your approaches do not work (I think, unless I am doing something wrong), if you look at my example that's pretty much what I tried but it's not finding the testPanel. Basically I can use that line to find any component within mainPanel, but I can't find testPanel because it's not inside mainPanel, it is its own top level component.

scottmartin
17 Dec 2013, 1:37 PM
I guess I do not understand .. forget the inside panel for the moment, the code was locating the main panel. I also added another panel



Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.panel.Panel', {
itemId: 'main-panel',
title: 'Hello',
width: 200,
html: '<p>World!</p>',
items: [{
xtype: 'panel',
itemId: 'inside-panel',
html: 'Inside Panel'
}],
renderTo: Ext.getBody()
});

Ext.create('Ext.panel.Panel', {
itemId: 'other-panel',
title: 'Hello',
width: 200,
html: '<p>Other</p>',
renderTo: Ext.getBody()
});

var panel1 = Ext.ComponentQuery.query('#main-panel')[0];
console.log(panel1);

var oPanel = Ext.ComponentQuery.query('#other-panel')[0];
console.log(oPanel);

}
});


Perhaps you can create a small test case of what you are trying to do:
https://fiddle.sencha.com/#home

alejandroNNU
17 Dec 2013, 2:21 PM
I'm using Architect so I'm going to try to illustrate the issue:

47262

As you can see above, testPanel is inside LoginPanel and the code in the function works perfectly.

47263

Here however, testPanel is not inside LoginPanel and when I run it I get back the following error:

"Uncaught TypeError: Cannot call method 'setTitle' of undefined."

alejandroNNU
17 Dec 2013, 2:29 PM
not sure why the images look so bad, attaching them here as zip file.

scottmartin
17 Dec 2013, 2:32 PM
OK..

The 1st screen has testPanel inside login
Since this is on the login button, it is safe to say that the login view has been created (and testPanel).

On the 2nd image, the testPanel is outside, so has an instance of testPanel been created at this time?

Scott.

alejandroNNU
17 Dec 2013, 2:40 PM
Ah, well I'm guessing it hasn't... that would be the problem then right? So how would I create an instance of testPanel first? lets say in that same function, when I click on the login button, I'd like to create an instance of testPanel, what would be the code for that? I apologize, since I've only been used architect I'm used to just dragging and dropping new components in, I've never had to "create" a component using code.

scottmartin
17 Dec 2013, 2:46 PM
Have a look at Ext.create or Ext.widget