PDA

View Full Version : MVC working with components



erwin85
24 Mar 2011, 6:50 AM
I read the tutorial from PhoneGab. It's hard to learn the language of Sencha Touch. I'm familiar with JavaScript, but the syntax is really different. The are not a lot step by step tutorials.

Now I have this problem.

I was able to setup the project with MVC. I can make views and interact with it. Now I'm making components within views and placing them in my panel.
My code looks like this:



var content= new Ext.Component({
title: "Title",
cls: "content",
html: ["<div>My content</div>"]
});

app.views.Home = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Portfolio Watch'
}],
items: [content],
scroll: 'vertical'
});


You can see I put the component in a variable and give its name as an item. Now I got a conflict with other view pages. I know that's because the component is not within my Home Panel but I don't know how to do that.

Maby It's a simple answer. I hope you can help me.

Thanks!

erwin85
6 Apr 2011, 4:49 AM
no one knows?

heringsfilet
6 Apr 2011, 5:56 AM
what do you mean with "I got a conflict"?

erwin85
6 Apr 2011, 9:48 AM
The components are not working well

dmillasich
6 Apr 2011, 1:50 PM
Have a look at this link: http://dev.sencha.com/deploy/touch/examples/

There are at least three MVC examples on this page that demonstrate the pattern. The ones I'm recently familiar with are:


Kiva
O'Reilly
Twitter


There may be more. Perhaps they will help.

Sencha Touch has a steep learning curve, and the documentation is sometimes difficult to navigate, but it delivers some fantastic functionality.

dbottillo
7 Apr 2011, 2:33 AM
you can do it in two different way:

first: inline method, like:


app.views.Home = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Portfolio Watch'
}],
items: [{
title: "Title",
cls: "content",
html: ["<div>My content</div>"]
}],
scroll: 'vertical'
});

with this method you dont' have to create variable content, the items is defining inline inside views.Home

the other method is using initComponent(), a function that is call before the creation of a panel, inside this function you can add a new instance of a Panel and set the items of views.Home with this new instance, something like:


app.views.Home = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Portfolio Watch'
}],
items: [],
scroll: 'vertical',
initComponent: function(){
Ext.apply(this, {
items: new Array({
xtype: 'toolbar',
title: 'Portfolio Watch'
})
});
}
});

hope i help you

Daniele