PDA

View Full Version : mvc cannot find contorl on undefined error



extjslikeit
28 Jan 2013, 2:44 AM
Uncaught TypeError: Cannot call method 'control' of undefined

I am concatenating the script files and am getting above message..

Attached is the file...any help is greatly appreciated...



Ext.define('registration.view.LoginPanel', {
extend: 'Ext.Panel',
alias: 'widget.loginpanel',
layout: {
type: 'border'
},
region:'north',
height: 70,
bodyStyle: {
background: '#333366'
},
border: false,
constructor: function(config) {
config = config || {};
Ext.apply(this.initialConfig, config);
Ext.apply(this, config);

this.titlePanel = new Ext.Panel({
region:'west',
width: 150,
layout: {
type: 'hbox',
align: 'middle',
pack:'end',
padding: 30
},
bodyStyle: {
background: '#333366'
},
border:false,
items: [{
xtype: 'box',
autoEl: {tag: 'label', html:'HelloWorld', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:18px; font-style:bold; font-variant:normal; font-weight:normal"}
}]
});

this.fieldPanel = new Ext.Panel({
layout:'fit',
region:'center',
layout: {
type: 'hbox',
pack: 'end',
align: 'stretch'
},
bodyStyle: {
background: '#333366'
},
border:false
});

var userIDLabel = this.userIDLabel ={
xtype: 'box',
autoEl: {tag: 'label', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'Email', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
}
var userIDField = this.userIDField = new Ext.form.TextField({
name: 'Email',
width: 100,
height: 20,
flex:1
});
var passwordLabel = this.passwordLabel = {
xtype: 'box',
autoEl: {tag: 'label', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'Password', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
}
var passwordField = this.passwordField = new Ext.form.TextField({
name: 'Password',
height:20,
flex:1
});
var emptyLabel = this.emptyLabel = new Ext.form.Label({
text:'Forgot Password?'
});
var loginButton = this.loginButton = new Ext.Button({
text: 'Sign In',
width: 45,
height: 20,
flex: 1
});
this.loginButton.on('click', this.loginClickListener.bind(this));

registration.view.LoginPanel.superclass.constructor.apply(this, arguments);

var uPanel = new Ext.Panel({
width:200,
padding:10,
layout: {
type: 'vbox',
align:'stretch',
pack:'start'
},
border: false,
items:[
userIDLabel,
userIDField
],
bodyStyle: {
background:'#333366'
}
});

var pPanel = new Ext.Panel({
width:200,
padding: 10,
layout: {
type: 'vbox',
align:'stretch',
pack:'start'
},
border: false,
bodyStyle: {
background:'#333366'
},
items:[
passwordLabel,
passwordField
]
});

var btnPanel = new Ext.Panel({
width:140,
layout: {
type: 'vbox',
align:'middle',
pack:'start',
padding: '25 25 25 5'
},
border: false,
bodyStyle: {
background:'#333366'
},
items:[loginButton]
});

var formPanel = this.formPanel = new Ext.form.FormPanel({
layout: {
type: 'hbox',
pack: 'end',
align: 'stretchmax'
},
width: 800,
padding: 10,
labelWidth:70,
labelAlign: 'top',
bodyStyle: {
background: '#333366'
},
flex: 1,
border: false,
items: [uPanel, pPanel, btnPanel],
flex:1

});

this.fieldPanel.add(formPanel);
this.add(this.titlePanel);
this.add(this.fieldPanel);
},
initComponent: function() {
this.callParent(arguments);
},
getForm: function() {
var form = this.formPanel.getForm();
return form;
},
setErrorMessage: function(message) {

},
loginClickListener: function() {
console.log('asdfa');
//this.loginController.login();
this.fireEvent('login');

},
loginFailureCallback: function(message) {

}
});








Ext.define('registration.view.RegistrationPanel', {
extend: 'Ext.Panel',
alias: 'widget.registrationpanel',
layout: {
type: 'hbox',
pack: 'end',
align: 'stretchmax',
padding: '20 20 20 250',
margins: 10
},
bodyStyle: {
background: '#ffbb11'
},
region: 'center',
border: true,
constructor : function(config) {
config = config || {};

Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

var firsNameField = this.firstNameField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'First Name',
labelAlign: 'top',
name: 'FirstName',
width: 250
});

var lastNameField = this.lastNameField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Last Name',
labelAlign: 'top',
name: 'LastName',
width: 250
});

var emailField = this.emailField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Email',
labelAlign: 'top',
name: 'Email',
width: 250
});

var passwordField = this.passwordField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Password (6 or more characters)',
labelAlign: 'top',
name: 'Password',
inputType: 'password',
width: 250
});

this.registerButton = new Ext.Button({
text: 'Submit'
});

registration.view.RegistrationPanel.superclass.constructor.apply(this, arguments);

var formPanel = this.formPanel = Ext.create('Ext.form.Panel', {
title: 'Register with HelloWorld',
labelAlign: 'top',
labelWidth:70,
height: 350,
width: 530,
bodyStyle: {
background: '#ffbb11'
},
border: false
});

formPanel.add({type:'spacer', height:15, border: false,bodyStyle: {
background: '#ffbb11'
}});
formPanel.add(this.firstNameField);
formPanel.add({type:'spacer', height:15, border: false,bodyStyle: {
background: '#ffbb11'
}});
formPanel.add(this.lastNameField);
formPanel.add({type:'spacer', height:15, border: false,bodyStyle: {
background: '#ffbb11'
}});
formPanel.add(this.emailField);
formPanel.add({type:'spacer', height:15, border: false,bodyStyle: {
background: '#ffbb11'
}});
formPanel.add(this.passwordField);
formPanel.add({type:'spacer', height:20, border: false,bodyStyle: {
background: '#ffbb11'
}});

this.registerButton.on('click', this.registrationClickListener.bind(this));

this.formPanel.add(this.registerButton);

this.add(this.formPanel);
},
setController: function (controller) {
this.controller = controller;
},
getForm: function () {
var form = this.formPanel.getForm();
return form;
},
registrationClickListener: function () {
//this.controller.register();
this.fireEvent('register');
}


});






Ext.define('registration.view.FooterPanel', {
extend: 'Ext.Panel',
alias: 'widget.footerpanel',
region: 'south',
height: 20,
layout: {
type: 'hbox',
pack: 'center',
align: 'stretchmax'
},
bodyStyle: {
background: '#333366'
},
border: false,

constructor: function(config) {
config = config || {};

Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

registration.view.FooterPanel.superclass.constructor.apply(this, arguments);

this.add({
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'About', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
});
this.add({type:'spacer', width:15, border: false,bodyStyle: {
background: '#333366'
}});
this.add({
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'Help', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
});
this.add({type:'spacer', width:15, border: false,bodyStyle: {
background: '#333366'
}});
this.add({
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'User Agreement', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
});
this.add({type:'spacer', width:15, border: false,bodyStyle: {
background: '#333366'
}});
this.add({
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'Privacy', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
});
this.add({type:'spacer', width:15, border: false,bodyStyle: {
background: '#333366'
}});
this.add({
xtype: 'box',
autoEl: {tag: 'a', href: 'javascript: registration.views.FooterPanel.showAbout()', html:'Copyright', style:"color:white;background-color:#333366;font-family:tahoma, arial, helvetica, sans-serif; font-size:12px; font-style:normal; font-variant:normal; font-weight:normal"}
});
this.add({type:'spacer', width:15, border: false,bodyStyle: {
background: '#333366'
}});
},
initComponent: function() {
registration.view.FooterPanel.superclass.initComponent.call(this, arguments);
},
showAbout: function () {
alert('About');
}
});


/**
* The main application viewport, which displays the whole application
* @extends Ext.Viewport
*/
Ext.define('registration.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'border',

requires: [
'registration.view.LoginPanel',
'registration.view.RegistrationPanel',
'registration.view.FooterPanel'
],

initComponent: function() {
var loginPanel = {xtype: 'loginpanel'};//Ext.create('registration.view.LoginPanel');
var registrationPanel = {xtype:'registrationpanel'};// Ext.create('registration.view.RegistrationPanel');
var footerPanel = {xtype:'footerpanel'};//Ext.create('registration.view.FooterPanel');

var me = this;

Ext.apply(me, {
items: [loginPanel, registrationPanel, footerPanel]
});

me.callParent(arguments);
}
});


Ext.define('registration.controller.LoginController', {
extend: 'Ext.app.Controller',

views: ['LoginPanel'],

refs: [
{ ref: 'loginPanel', selector: 'loginpanel'}
],

constructor: function() {

},

init: function () {
var me = this;
console.log('halsl');
},

onLaunch: function () {
console.log('test');
var me = this;

me.control('loginPanel', {
login: function() { console.log('test12');}
});
},

login: function() {
console.log('asdfasdf');
var form = this.getLoginPanel().getForm();

form.submit({
url:'/DataServer/jsp/login.action',
success: function(form, action) {
try {
var response = Ext.util.JSON.decode(action.response.responseText);

if (!response['loginSuccess']) {
if (response['errorMessage']) {
Ext.Msg.alert(response['errorMessage']);
}
else {
Ext.Msg.alert('Error signing in');
}
}
else {
var userConsoleURL = window.location.protocol+'//'+window.location.host+'/ps/jsp/userConsole.jsp';
window.location.replace(userConsoleURL);
}

} catch (e) {}
//var userConsoleURL = window.location.protocol+'//'+window.location.host+'/ps/jsp/userConsole.jsp';
//window.location = userConsoleURL;
},
failure: function(form, action) {
switch(action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
}
}
});
},
register: function() {
var form = this.getRegistrationPanel().getForm();


form.submit({
url:'/DataServer/jsp/register.action',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.message);
},
failure: function(form, action) {
switch(action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.message);
}
}
});
}
});




Ext.application({
name: 'registration',

/*requires: ['Ext.container.Viewport'],

models: ['Credentials'],

views: ['LoginPanel', 'RegistrationPanel'],*/

controllers: ['LoginController'],

autoCreateViewport: true

/*launch: function () {
var loginPanel = {xtype: 'loginpanel'};//Ext.create('registration.view.LoginPanel');
var registrationPanel = {xtype:'registrationpanel'};// Ext.create('registration.view.RegistrationPanel');
var footerPanel = {xtype:'footerpanel'};//Ext.create('registration.view.FooterPanel');

//var loginController = this.loginController = new registration.controllers.LoginController(loginPanel, registrationPanel);

Ext.create('Ext.container.Viewport',{
layout: 'border',
items:[loginPanel, registrationPanel, footerPanel],
border: false
});
}*/
});

extjslikeit
28 Jan 2013, 1:30 PM
controller was overriding constructor (leftover from 3.x ; had created classes similar to 4.0)