PDA

View Full Version : PR3 verses PR4 ref problem (I think)



pkellner
25 Jan 2012, 8:33 AM
somehow, my Getters are not being defined for the code below when I try to access them in the function onTapCompanyButton. I attached 2 screen shots of the debugger showing this. One linking to pr3 lib's and one linking to pr4s.

thanks



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


views: [
'Viewport',
'Welcomescreen',
'Sectionslist',
'RecipientListTabs'
],


models: [
'Sections'
],


stores: ['Sections'],


refs: {
ref: 'recipientListTabs',
selector: 'recipientlisttabs',
xtype: 'recipientlisttabs',
autoCreate: true
},


init: function () {
this.control({
'button[action=CompanyButton]': {
tap: 'onTapCompanyButton'
},
'button[action=ADButton]': {
tap: this.onTapADButton
}
})
},


onTapCompanyButton: function () {
debugger;
console.log('onTapCompanyButton');
var tabPanel = this.getRecipientListTabs();
tabPanel.setActiveItem(1);
},




onTapADButton: function () {
console.log('onTapADButton');
var tabPanel = this.getRecipientListTabs();
tabPanel.setActiveItem(2);
},
onLaunch: function () {
console.log('onLaunch');
var tabPanel = this.getRecipientListTabs();
tabPanel.getTabBar().hide();
}


});

Perdiga
25 Jan 2012, 10:05 AM
refs should be inside config

bweiler
25 Jan 2012, 10:43 AM
Refs changed significantly from PR3 to PR4. You are using the old approach.



refs: {
infoButton: 'mainview #infobutton',
settings: 'mainview settingsview'
}


This will result in getInfoButton() and getSettings() being defined. More complex examples are specified in the documentation.

rdougan
25 Jan 2012, 10:44 AM
Yeah, everything needs to be inside the config: {} block, including control.


Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',

config: {
control: {
'button': {
tap: 'foo'
}
}
},

foo: function() {
console.log('foo');
}
});

pkellner
26 Jan 2012, 7:55 AM
does everything mean views, models, functions, etc.?



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


config: {
views: [
'Viewport',
'Welcomescreen',
'Sectionslist',
'RecipientListTabs'
],


models: [
'Sections'
],


stores: ['Sections'],


refs: {
ref: 'recipientListTabs',
selector: 'recipientlisttabs',
xtype: 'recipientlisttabs',
autoCreate: true
},


init: function () {
this.control({
'button[action=CompanyButton]': {
tap: 'onTapCompanyButton'
},
'button[action=ADButton]': {
tap: this.onTapADButton
}
})
},


onTapCompanyButton: function () {
debugger;
console.log('onTapCompanyButton');
var tabPanel = this.getRecipientListTabs();
tabPanel.setActiveItem(1);
},




onTapADButton: function () {
console.log('onTapADButton');
var tabPanel = this.getRecipientListTabs();
tabPanel.setActiveItem(2);
},
onLaunch: function () {
console.log('onLaunch');
var tabPanel = this.getRecipientListTabs();
tabPanel.getTabBar().hide();
}
}


});

bweiler
26 Jan 2012, 8:26 AM
If you want to get your app up and running, move the models, stores, and views arrays outside of config, but still in the controller.

I read the new guides and the examples in the guides show that these arrays should be in the app configuration and not the controller configuration. However, when I tried that, I lost the get[ViewName]View() methods.

My guess is that this is still being sorted out for final release.

pkellner
26 Jan 2012, 8:34 AM
wouldnt that make multiple controllers bulky.

pkellner
26 Jan 2012, 10:34 AM
So here is what finally works. I tested and you can put views,models and stores in either the controller or he app file. I prefer the controller so your app file does not get too bloated (assuming you have multiple controllers per app).

Here is my final controller file that works in PR4: (with one button)



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


views: [
'Viewport',
'Welcomescreen',
'Sectionslist',
'RecipientListTabs'
],


models: [
'Sections'
],


stores: ['Sections'],


config: {
control: {
companyTabButton: {
tap: 'onTapCompanyButton'
}
},


refs: {
companyTabButton: 'button[action=CompanyButton]',
recipientlisttabs: 'recipientlisttabs'
}
},


onTapCompanyButton: function () {
var tabPanel = this.getRecipientlisttabs();
tabPanel.setActiveItem(1);
}


});

edspencer
26 Jan 2012, 3:35 PM
The reason for this split is that defining models, views and stores inside a Controller is deprecated as a bad approach. There is no real mapping between controllers and any of those things - what 1.x did was a mishmash of dependency specification and dubious convenience functions.

To keep that behavior I added backwards compatibility logic for the models, views and stores as specified in 1.x (e.g. outside the config block), and have it throwing warnings that it's not a good approach.

Rather than this.getSomeStore() we recommend simply Ext.getStore('SomeId'), rather than this.getUserModel() just reference the model name (e.g. MyApp.model.User), same with views. Aside from the file size and performance penalties, these functions were confusing to many and simply didn't add enough value to justify bringing them across to Touch 2.

If you look in the docs you'll see those old configs aren't actually there any more :)