PDA

View Full Version : Extending Touch Component



shizny
2 Jun 2011, 10:16 AM
Hello,

I'm looking for a solid example of how to Extend a touch component and it seems like there are a bunch of ways to do it and I'm a bit confused by all the variability I'm seeing. Can somebody point me to a nice tutorial on what all is required and what is not when extending a touch component?

:)

mitchellsimoens
2 Jun 2011, 3:53 PM
Ext.ns('some.namespace');

some.namespace.MyPanel = Ext.extend(Ext.Panel, {
fullscreen : true,
layout : 'card',
cardSwitchEvent : 'slide',

initComponent: function() {
var me = this;

Ext.apply(me, {
items : me.buildItems()
});

some.namespace.MyPanel.superclass.initComponent.call(me);
},

buildItems: function() {
return [
{ xtype : 'container', html : 'Card One' },
{ xtype : 'panel', html : 'Card Two' }
];
}
});

shizny
2 Jun 2011, 4:34 PM
Hi Mitchell... Thank you for the help. I have structured my extended component like you showed me but am still having issues. This is what I've got in FootMenu.js


Ext.namespace('newwidgets');
newwidgets.FootMenu = Ext.extend(Ext.TabPanel, {
dock: 'bottom',
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
initComponent: function() {
Ext.apply(this, {
items: this.buildItems()
});
newwidgets.FootMenu.superclass.initComponent.call(this);
},
buildItems: function() {
return [
{
title: 'Alerts',
html: 'Alerts Card',
iconCls: 'info',
cls: 'card card1',
badgeText: '1'
}
];
}
});

Ext.reg('footmenu', newwidgets.FootMenu);

and this is the only thing I can get working in FooterMenu.js



Ext.namespace('widgets');
widgets.FooterMenu = new Ext.TabPanel({
dock: 'bottom',
tabBar: {
dock: 'bottom',
// ui: 'light',
layout: {
pack: 'center'
}
},
items: [{
title: 'Alerts',
html: 'Alerts Card',
iconCls: 'info',
cls: 'card card1',
badgeText: '1'
}
]
});


When I use the extended component the page does not render correctly, if I use the 2nd method then everything is shown just fine, problem is that I want to be able to set specific properties so I need to get this components to work. I've tried the extended component with the {xtype: 'footmenu'} in an items array, and I just use the variable reference for the 2nd method. Any advice?

mitchellsimoens
2 Jun 2011, 4:36 PM
Using Ext.extend only creates a new Component. You still need to create that new Component. So like on your first example you still need to do:


var panel = new newwidgets.FootMenu();

shizny
2 Jun 2011, 4:46 PM
Hmm, I just can't get this to work for me. This is the file I've put the component in.



apple.views.HeaderBackButton_Html_FooterMenu_Page = Ext.extend(Ext.Panel, {
items: [{
xtype: 'panel',
//todo make this call to the store dynamic
html: "<div id='defaultText'>Select a display. Scroll for more options.</div>"
}],
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
title: 'Confirm Display',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
handler: function() {
Ext.dispatch({
controller: apple.controllers.appleController,
action: 'gotoSelectRetailer'
});
},
scope: this
}
]
},
footer
]
});
apple.views.HeaderBackButton_Html_FooterMenu_Page.superclass.initComponent.apply(this, arguments);
}
});

var footer = new newwidgets.FootMenu();

mitchellsimoens
2 Jun 2011, 4:53 PM
Ext.ns('some.namespace');

some.namespace.MyPanel = Ext.extend(Ext.Panel, {
fullscreen : true,
layout : 'card',
cardSwitchEvent : 'slide',

initComponent: function() {
var me = this;

Ext.apply(me, {
items : me.buildItems()
});

some.namespace.MyPanel.superclass.initComponent.call(me);
},

buildItems: function() {
return [
{ xtype : 'container', html : 'Card One' },
{ xtype : 'panel', html : 'Card Two' }
];
}
});

Ext.setup({
onReady: function() {
var panel = new some.namespace.MyPanel();
}
});

shizny
2 Jun 2011, 5:36 PM
So, I'm using the "recommended" Touch MVC pattern that is described in some of the tutorials on this site. I'm trying to put that extended tabpanel component in one of the views. Do I need to instantiate that component in the ViewPort.js file or the app.js file or something?



apple.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(apple.views, {
loginPage: new apple.views.LoginPage(),
selectRetailerPage: new apple.views.SelectRetailerPage(),
selectStorePage: new apple.views.SelectStorePage(),
instructionsPage: new apple.views.HeaderBackButton_Text_Button_FooterMenu_Page(),
firstQuestionPage: new apple.views.HeaderBackButton_Text_SingleChooser_Button_FooterMenu_Page(),
displayConfirmPage: new apple.views.HeaderBackButton_Html_FooterMenu_Page() /*,
appleMenu: new apple.views.AppleMenu()
,appleList: new apple.views.AppleList()
,appleMap: new apple.views.AppleMap()*/
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
apple.views.loginPage,
apple.views.selectRetailerPage,
apple.views.selectStorePage,
apple.views.instructionsPage,
apple.views.firstQuestionPage,
apple.views.displayConfirmPage /*,
apple.views.appleMenu
,apple.views.appleList
,apple.views.appleMap*/
]
});
apple.views.Viewport.superclass.initComponent.apply(this, arguments);
},
layoutOrientation : function(orientation, w, h) {
apple.views.Viewport.superclass.layoutOrientation.call(this, orientation, w, h);
}
});

shizny
2 Jun 2011, 5:49 PM
It seems against the whole MVC deal to have to instantiate all your modules on Ext.setup and make them global... is that what I have to do?

mitchellsimoens
2 Jun 2011, 5:53 PM
It seems against the whole MVC deal to have to instantiate all your modules on Ext.setup and make them global... is that what I have to do?

Yes but seems like you need to learn how to extend classes and instantiate them first.

shizny
2 Jun 2011, 6:05 PM
Yeah, I'm trying and thanks for all your help so far. I get the feeling I'm annoying you here but I've got another question 'cause it's still not working.

So, In my app.js file I now have..



Ext.regApplication({
name: "apple",

launch: function() {
this.views.viewport = new this.views.Viewport();
newwidgets.footmenu = new newwidgets.FootMenu();
}
});


and then in one of my view files I have



// JavaScript Document
apple.views.HeaderBackButton_Html_FooterMenu_Page = Ext.extend(Ext.Panel, {
items: [{
xtype: 'panel',
//todo make this call to the store dynamic
html: "<div id='defaultText'>Select a display. Scroll for more options.</div>"
}],
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
title: 'Confirm Display',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
handler: function() {
Ext.dispatch({
controller: apple.controllers.appleController,
action: 'gotoSelectRetailer'
});
},
scope: this
}
]
},
newwidgets.footmenu
]
});
apple.views.HeaderBackButton_Html_FooterMenu_Page.superclass.initComponent.apply(this, arguments);
}
});


What is wrong with that?

mitchellsimoens
2 Jun 2011, 6:08 PM
You're not annoying me and forgive me, have been working for 14 hours. James Pearce did a great tutorial for build MVC applications with PhoneGap here: http://www.sencha.com/learn/Tutorial:A_Sencha_Touch_MVC_application_with_PhoneGap

Of course you can forget the PhoneGap but he has a good beginner explanation of build a MVC app.

shizny
2 Jun 2011, 6:12 PM
Wow, long day... sorry man. The Phone Gap deal, that's how I got started on this whole MVC action, but I didn't see where he was doing what I'm trying to do and I'm just about to lose it wasting so much time on a should be simple thing, ya know?

Is what I did with instantiating the component in the app.js file correct, and if so why isn't it working?

shizny
2 Jun 2011, 6:24 PM
Oh, shatsky, talk about a focking no-brainer. In my escalating exacerbation I forgot to include the new js file I was working on in the index.html file! Got it working and instantiated in the view... .Thanks for all the help.

:)