How can we access objects of inner components?

[pm.sreejith]

Hi All,

Can you please tell me the ways to access the objects of components which placed inside of an component from a controller?. I am using sencha touch 2.0 with MVC architecture

Please go through the code below and let me know.



Controller
--------------------

Ext.define('Sencha.controller.Main', {
extend: 'Ext.app.Controller',

views: ['Home', 'Products', 'Contact', 'Article','LatestArticles','ContentList', 'ContentCarousel'],

refs: [
{
ref: 'contactForm',
selector: '#contactForm'
},
{
ref: 'homePanel',
selector: 'homepanel'
}
],

stores: [
'Mains', 'Contentlist'
],

init: function() {
this.control({
'button[action=submitContact]': {
tap: 'submitContactForm'
}
});

Ext.Msg.alert("Count->>>", this.getHomePanel().this.getArticlesPage().items.length, function(){});
},

submitContactForm: function() {
var form = this.getContactForm();

form.submit({
url: 'contact.php'
});
}
});



Home View
--------------------
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
xtype: 'homepanel',

config: {
title: 'Home',
iconCls: 'home',
cls: 'home',
items:[
{
xtype: 'container',
items: [{
xtype: 'articlespage',
flex:3
}]

},
{
xtype: 'latestarticles',
flex:1
}
]
}
});


Artcles View
---------------------
Ext.define('Sencha.view.Article', {
extend: 'Ext.Carousel',
xtype: 'articlespage',
id: 'articlespage',
config: {
title: 'Articles',
iconCls: 'star',
height: 400,
items: [
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 1</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Animator.png' border='0'/></div></div>"

},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 2</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Charts.png' border='0'/></div></div>"

},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 3</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Designer.png' border='0'/></div></div>"


},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 4</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Designer.png' border='0'/></div></div>"


},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 5</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Animator.png' border='0'/></div></div>"

},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 6</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Charts.png' border='0'/></div></div>"

},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 7</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/Designer.png' border='0'/></div></div>"

}
],
listeners:
{
afterRender: function() {
Ext.Carousel.superclass.afterRender.call(this);
this.scroller.on({
touchend: this.onTouchEnd,
scrollend: this.onScrollEnd,
scope: this
});
}
}
}
});


So in this example, I want to get the object of the view article from the controller. How it is possible?
Please let me know if anybody have any solution...:-?

Advance thanks to all....
Regards,
Sreejith

[lylepratt]

Using code tags might make it easier for people to help you.

[AndreaCammarata]

Hi,
first I agree with lylepratt: Please wrap your code inside code tags.

To reply to your question, you have several ways to do that.
The first one is to set an itemId on every sub component to be able to get those by calling



masterComponent.getComponent('your_component_itemID');


The second way, is to include your sub component as refs in your controller (exactly like in part you have already done).
Setting a component as ref, will automatically ask to the controller to create the getter and setter function, so to get the wanted component, just call the getter function.

Ask me if you need more informations about it.

Hope this helps.

[pm.sreejith]

Hi Andrea Cammarata,

Thanks for your info.

I just tried to access the object by using the reference [ref]. please go through the code given below:



Main Controller
--------------------
Ext.define('Sencha.controller.Main', {
extend: 'Ext.app.Controller',

views: ['Home', 'Products', 'Contact', 'Article','LatestArticles','ContentList', 'ContentCarousel'],

refs: [
{
ref: 'contactForm',
selector: '#contactForm'
},
{
ref: 'articlesPage',
selector: '#articlespage'
}
],

stores: [
'Mains', 'Contentlist'
],

init: function() {
this.control({
'button[action=submitContact]': {
tap: 'submitContactForm'
}
});

Ext.Msg.alert("Count->>>", this.getArticlesPage().getItems().length, function(){});
},

submitContactForm: function() {
var form = this.getContactForm();

form.submit({
url: 'contact.php'
});
}
});



here 'articlespage' page is a view for listing items inside the carousel component.

Please ask me more part of code that I developed if you need.

[AndreaCammarata]

You are welcome.
I think you are making confusion with xtype and itemId, because you are trying to set a reference to an itemId, but your are not setting the component that should contains it.

From the first code you posted in fact, I see that your ArticleView, in fact, has it's own registered xtype "articlespage" which I suggest you to set to "widget.articlespage".
In this way you will be able to create the Articles widget by its xtype calling



Ext.widget('articlespage', {

//Put here your widget configuration

});


However, if you have to set a reference to a component by its xtype, you have to remove the # placed just before it, because that is used to set reference to components by itemId.

So, just to recap, set the refs inside your controller like follows:



refs: [
{
ref: 'contactForm',
selector: 'contactForm'
},
{
ref: 'articlesPage',
selector: 'articlespage'
}
]


Hope this helps.

PS: Please post your code inside CODE tags.

[pm.sreejith]

Ok,
If you don't mine, can you please explain with an example the Ext.widget config part?