We Keep Coding

Button tap in sencha Controller file is not working

Main view file
Ext.define('DemoApp1.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Email',
'Ext.field.Password',
'Ext.field.DatePicker',
'Ext.TitleBar',
'Ext.Button'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'container',
title: 'Login',
autoDestroy: false,
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
iconCls: 'user',
items: [
// login user
{
xtype: 'fieldset',
id: 'login-user-field-set',
width: 500,
title: 'Login Here!',
items: [
{
xtype: 'emailfield',
label: 'Email',
name: 'user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password'
}
]
},
{
xtype: 'button',
id: 'login-button',
text: 'Login',
ui: 'confirm',
width: 150
}
]
},
{
autoDestroy: false,
xtype: 'container',
title: 'Register',
layout: 'vbox',
scrollable: true,
iconCls: 'add',
items: [
{
xtype: 'titlebar',
title: 'Register New User',
docked: 'top'
},
{
// register new user
xtype: 'fieldset',
id: 'reg-items-field-set',
items: [
{
xtype: 'textfield',
label: 'Email',
allowBlank: false,
name: 'reg_user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'reg_password'
},
{
xtype: 'passwordfield',
label: 'Confirm Password',
name: 'reg_cpassword'
},
{
xtype: 'textfield',
label: 'User Name',
name: 'reg_user_name'
},
{
xtype: 'datepickerfield',
picker: {
yearFrom: 1975,
yearTo: 2005
},
label: 'DOB',
name: 'reg_dob'
},
{
xtype: 'selectfield',
label: 'Gender',
name: 'reg_gender',
options: [
{text: 'Male', value: 'male'},
{text: 'Female', value: 'female'}
]
}
]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'button',
id: 'register-button',
text: 'Register',
ui: 'confirm',
width: 200
},
{
xtype: 'spacer',
width: 50
},
{
xtype: 'button',
id: 'reset-button',
text: 'Reset',
ui: 'decline',
width: 200
}
]
}
]
}
]
}
});
Controller file
Ext.define('DemoApp1.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.form.FieldSet',
'Ext.Button'
],
config: {
refs: {
loginButton: '#login-button',
regFieldSet: '#reg-items-field-set',
regNewUserButton: '#register-button',
regFormResetButton: '#reset-button',
loginUserFieldSet: '#login-user-field-set'
},
control: {
loginButton: {
tap: 'loginButtonTapped'
},
regFormResetButton: {
tap: 'regFormResetButtonTapped'
},
regNewUserButton: {
tap: 'regNewUserButtonTapped'
}
},
loginButtonTapped: function(self, e) {
console.log('loginButtonTapped');
},
regFormResetButtonTapped: function(self, e) {
console.log('regFormResetButtonTapped');
},
regNewUserButtonTapped: function(self, e) {
console.log('regNewUserButtonTapped');
}
}
});
on click on any button it logging the below
Uncaught TypeError: Cannot read property 'apply' of undefined
what wrong in it???
thanks in advance...

Your methods should not go in the config block. loginButtonTapped, regFormResetButtonTapped and regNewUserButtonTapped. They should come out one level into the class definition, because they are class methods, not configurations.

Losing scope in combobox ExtJS 4.2

I have a popup window with a combobox and a few buttons. The idea is to make a selection in the combobox and then either save the selection to a store or cancel. I have done this before and never had any problems, but with this code I get Uncaught TypeError: Cannot call method 'apply' of undefined whenever I try to interact with the combo. It seems to me like ExtJS is trying to run code meant for the store on the combobox.
I load the popup window with Ext.create('Account.Window.Reuse');
The definitions:
Ext.define('SimpleAccount', {
extend: 'Ext.data.Model',
idProperty: 'AccountID',
fields: [ {
name: 'AccountID',
type: 'int',
useNull: true
}, 'Name']
});
var userAccountReuseStore = Ext.create('Ext.data.Store', {
model: 'SimpleAccount',
storeId: 'userAccountReuseStore',
data: [{"AccountID":"1", "Name":"FirstAccount"},
{"AccountID":"2", "Name":"SecondAccount"},
{"AccountID":"3", "Name":"ThirdAccount"}]
});
Ext.define('Account.Reuse.ComboBox', {
extend: 'Ext.form.ComboBox',
alias: 'widget.accountReuseComboBox',
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
})
}
});
Ext.define('Account.Reuse.Fieldset', {
extend: 'Ext.form.FieldSet',
alias: 'widget.accountReuseFieldset',
initComponent: function(){
Ext.apply(this, {
items: [
{
xtype: 'label',
cls: 'text-important',
margin: '0 0 10 0',
style: 'display: block',
text: 'Only attach an account you have permission to use. After attaching the account you will not be able to use, remove, or edit it until approved by SCSAM'
},
{
xtype: 'accountReuseComboBox',
store: userAccountReuseStore
}
]
});
this.callParent();
}
});
Ext.define('Account.Reuse.Details', {
extend: 'Ext.form.Panel',
alias: 'widget.accountReuseDetails',
initComponent: function(){
Ext.apply(this, {
plain: true,
border: 0,
bodyPadding: 5,
fieldDefaults: {
labelWidth: 55,
anchor: '100%'
},
layout: {
type: 'vbox',
align: 'stretch',
flex: 1
},
items: [
{
xtype: 'accountReuseFieldset',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'vbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0},
align: 'stretch'
}
},
title: 'Details',
collapsible: false
}]
});
this.callParent();
}
});
Ext.define('Account.Window.Reuse', {
extend: 'Ext.window.Window',
alias: 'widget.accountWindowReuse',
initComponent: function(){
Ext.apply(this, {
title: 'Account Details',
width: 400,
autoShow: true,
modal: true,
layout: {
type: 'fit',
align: 'stretch' // Child items are stretched to full width
},
items: [{
xtype: 'accountReuseDetails',
id: 'attachAccountReuseForm'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Attach',
id: 'saveButton',
handler: function(){
var rec = this.up('accountWindowReuse').down('accountReuseDetails').getValues();
var store = Ext.getStore('userAccountReuseAttachStore');
store.add(rec);
this.up('window').close();
}
},{
minWidth: 80,
text: 'Cancel',
handler: function(){
this.up('window').close();
}
}]
}]
});
this.callParent();
}
});

It looks like you forget call parent in your Account.Reuse.ComboBox initComponent function so combobox is not initialized properly.
Your Account.Reuse.ComboBox initComponent function should look like this:
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
});
this.callParent();
}

EXTJS4: App is not loading when TreeView is embed

My App works fine, if the TreeView "TreeCreateMenu" is not embed. Since it is embed, the app stocks at the Browser-Web-Console at the Point from the extjs-directory "Trigger.js". But no error is displayed!
Here are my files:
The Viewport:
Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'App.view.Settings',
'App.view.Footer',
'App.view.TreeMenu',
'App.view.tree.TreeCreateMenu',
],
layout: 'border',
items: [
{
region: 'north',
border: false,
margin: '0 0 1 0',
split: true,
items: [{xtype: 'settings'}]
}, {
region: 'west',
collapsible: true,
title: 'Menu',
width: 250,
layout: 'vbox',
items: [
{
xtype: 'treemenu',
height: 600,
minSize: 600,
maxSize: 600,
layout: 'fit',
flex: 1
},
{
title: 'Create',
layout: 'fit',
border: '1 0 0 0',
width: 250,
height: 100,
items: [{xtype: 'treecreatemenu'}]
}
]
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
layout: 'fit',
height: 20,
items: [{xtype: 'footertoolbar'}]
}, {
region: 'center',
id:'region_center',
layout: 'fit',
border: '1 0 0 0',
items: []
}
],
initComponent: function() {
this.callParent();
}
});
The Controller of TreeCreateMenu
Ext.define('App.controller.tree.TreeCreateMenu', {
extend: 'Ext.app.Controller',
views: ['tree.TreeCreateMenu'],
models: ['tree.TreeCreateMenu'],
stores: ['tree.TreeCreateMenu'],
onLaunch: function() {},
refs: [{
selector: 'tree',
ref: 'treecreatemenu'
}],
init: function() {
this.control({
'treecreatemenu': {
itemclick: function(view, node, rec, item, index, e ) {}
}
});
}
});
The model:
Ext.define('App.model.tree.TreeCreateMenu', {
extend: 'Ext.data.Model',
displayField: 'text',
fields: [
{name: 'text', type: 'string', leaf:false},
{name: 'value', type: 'string', leaf:false},
]
});
The store: (Response is correct, because i displayed it at the TreeMenu.js in the Viwport)
Ext.define('App.store.tree.TreeCreateMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.tree.TreeCreateMenu',
model: 'App.model.tree.TreeCreateMenu',
AutoLoad: false,
nodeParam: 'value',
proxy: {
type: 'ajax',
url: 'bin/app/ajax.php',
extraParams: {
action:'getTreeCreateMenu'
},
reader: {
type: 'json',
root: 'children'
},
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
}
}
});
And my View:
Ext.define('App.view.tree.TreeCreateMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treecreatemenu',
//store: 'tree.TreeCreateMenu',
rootVisible: false,
bodyStyle: 'border:none;',
padding:'5,0,0,0'
});
So nothing special...but it doesn't work and I have absolutely no idea! Someone can help me with this please? THANKS!!

Sencha Touch 2 dynamic button on Navigation View

I'm trying to initialize() and destroy() dynamically a button on Navigation View's bar from another view. Button is created fine, but I can't remove it... Tried also hide(), but it's being called twice and isn't helpful. So I'm officially stuck, please help! :-)
My Controller:
Ext.define('MyApp.controller.Application', {
extend: 'Ext.app.Controller',
config: {
refs: {
buttonNew1: '#btn-new1',
buttonNew2: '#btn-new2',
buttonNew3: '#btn-new3',
buttonNew4: '#btn-new4',
buttonDataNew: '#btn-data-new'
},
control: {
buttonNew1: { tap: 'onNewButtonTap' },
buttonNew2: { tap: 'onNewButtonTap' },
buttonNew3: { tap: 'onNewButtonTap' },
buttonNew4: { tap: 'onNewButtonTap' },
buttonDataNew: { tap: 'onDataNewButtonTap' },
}
},
onNewButtonTap: function(button) {
console.log(button);
},
onDataNewButtonTap: function(button) {
console.log(button);
}
});
My Navigation View:
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'view-main',
config: {
autoDestroy: false,
items: [
{
xtype: 'container',
layout : { type: 'vbox', pack: 'top', align: 'middle' },
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
id: 'btn-new1',
text: 'New1'
},
{
xtype: 'button',
id: 'btn-new2',
text: 'New2'
}
]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
id: 'btn-new3',
text: 'New3'
},
{
xtype: 'button',
id: 'btn-new4',
text: 'New4'
}
]
}
]
}
]
}
});
My Data View:
Ext.define("MyApp.view.Data", {
extend: 'Ext.dataview.DataView',
xtype: 'view-data',
config: {
useComponents: true,
layout: { type: 'fit', align: 'center' },
defaultType: 'view-data-item',
store: 'MyStore'
},
initialize: function() {
this.callParent();
Ext.Viewport.getActiveItem().getNavigationBar().add(Ext.create('Ext.Button', {
id: 'btn-data-new',
ui: 'normal',
iconCls: 'add1',
align: 'right',
iconMask: true,
hideAnimation: Ext.os.is.Android
? false : { type: 'fadeOut', duration: 200 },
showAnimation: Ext.os.is.Android
? false : { type: 'fadeIn', duration: 200 }
}));
},
destroy: function() {
this.callParent();
var button = Ext.getCmp('btn-data-new');
if (button) {
Ext.Viewport.getActiveItem().getNavigationBar().remove(button);
}
}
});

Well, I figured it out finally... The problem was with autoDestroy: false in the Navigation View!

how to update form panel record in controller in sencha touch 2 using mvc?

I have a sample login form. In that there is a controller, view and a model.I would like to validate the form. my Form panel id is 'formPanelLogin' and have to update the form record in the controller. but this code "formPanelLogin.updateRecord (teamModel);" can't work and error message like "updateRecord is not define".
Please give me an answer for this problem. my code will following..
//Controller
Ext.define('MyApp.controller.mvcController', {
extend: 'Ext.app.Controller',
config: {
refs: {
BtnSubmit: "#btnSubmit",
BtnCancel:"#btnCancel",
BtnPromoHome:"#PromotionsBtnHome",
BtnThirdBack:"#thirdBtnBack",
BtnSecondBack:"#btnUnderHoodService",
},
control: {
BtnSubmit:
{
tap: "onBtnSubmitTap"
},
BtnCancel:
{
tap: "onBtnCancelTap"
},
BtnPromoHome:
{
tap: "onBtnPromoHomeTap"
},
BtnSecondBack:
{
tap: "onBtnSecondBackTap"
},
BtnThirdBack:
{
tap: "onBtnThirdBackTap"
}
}
},
onBtnCancelTap: function (options)
{
//formPanelLogin.reset();
var teamModel = Ext.create('MyApp.model.MyModel'),
errors, errorMessage = '';
formPanelLogin.updateRecord (teamModel);
errors = teamModel.validate();
if (!errors.isValid()) {
errors.each(function (err) {
errorMessage += err.getMessage() + '<br/>';
}); // each()
Ext.Msg.alert('Form is invalid!', errorMessage);
} else {
Ext.Msg.alert('Form is valid!', '');
} // if
console.log("Cancel");
},
});
//view
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
layout:
{
type: 'card'
},
items: [
{
xtype: 'panel',
id: 'panelOuter',
layout:
{
type: 'card',
animation:
{
type: 'slide'
}
},
items: [
{
xtype: 'panel',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'MVC',
items: [
{
xtype: 'button',
docked: 'left',
id: 'btnBack'
},
{
xtype: 'button',
docked: 'right',
id: 'btnHome'
}
]
},
{
xtype: 'formpanel',
docked: 'top',
height: 117,
id: 'formPanelLogin',
scrollable: true,
items: [
{
xtype: 'fieldset',
id: 'loginform',
items: [
{
xtype: 'textfield',
label: 'UserName',
name: 'userName',
labelWidth: '40%',
name: 'usernameField',
placeHolder: '...... Type here .......',
required: true
},
{
xtype: 'passwordfield',
label: 'Password',
labelWidth: '40%',
required: true
}
]
}
]
},
{
xtype: 'panel',
height: 45,
id: 'btnPanel',
items: [
{
xtype: 'button',
docked: 'right',
id: 'btnSubmit',
ui: 'action-small',
width: 85,
text: 'Submit'
},
{
xtype: 'button',
docked: 'right',
id: 'btnCancel',
ui: 'decline-small',
width: 85,
text: 'Cancel'
}
]
}
]}
]
},
});
//model
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields : [
{
name: 'userName',
type: 'string'
},
{
name: 'password',
type: 'string'
}
],
validations: [
{
field: 'userName',
type: 'presence',
message: 'User Name is required.'
}
]
}
});