call controller function - sencha-touch-2

I have a controller defined like this:
Ext.define('MyApp.controller.TestController', {
extend: 'Ext.app.Controller',
config: {
},
showTest: function() {
alert('aaa');
}
});
How can i call the showTest() function? I tried this:
MyApp.controller.TestController.showTest();
But this doesn't work. Anyone any idea how to do this..?? Because i want to call that function from an onClick even in a div. Something like:
<div onclick="call.controller.func(1)">User 1</div>
<div onclick="call.controller.func(2)">User 2</div>
etc.

No, you are doing it wrong.
Suppose that you have a button in your view:
Ext.define('MyApp.view.Login', {
extend : 'Ext.form.Panel',
xtype : 'myapp-login',
config : {
items : [
{
xtype : 'fieldset',
name : 'login-fieldset',
title : 'Login credentials',
instructions: 'Fill in your email and password)',
items : [
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
},
{
xtype : 'button',
name : 'Login',
text : 'Login',
ui : 'confirm'
}
]
}
});
The in your controller, inside your control object:
control : {
'myapp-login button[ui=confirm]' : {
tap : 'showTest'
}
},
// function showTest
showTest: function() {
alert('aaa');
}
So in the above example: when user clicks inside the xtype called myapp-login the controller will execute the showTest() method.

Related

How to use the html id in sencha touch

I am new to sencha touch. I am creating a app in which i am using a html . When that span is clicked a function in controller should be called . I have attached the view and controller with this question.
View
Ext.define('SlideNav.view.Viewport', {
extend: 'Ext.Container',
xtype: 'app_viewport',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
layout: 'hbox',
items : [
{
docked: 'top',
xtype: 'panel',
height: 40,
style:'background:white ;height:40px;color:black',
items:[
{
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}
],
listeners: {
initialize:function(){
this.fireEvent('onPopulateDashBoardData', this);
}
/* tap: {
fn: function(event, el){ console.log("tapped!");
this.fireEvent('onPopulateDashBoardData', this);
},
element: 'element',
delegate: '#TopNews'
}*/
}
},
{
xtype : 'main',
cls: 'slide',
// Needed to fit the whole content
width: '100%'
}, {
xtype : 'navigation',
width : 250
}]
}
});
controller.js
Ext.define('SlideNav.controller.App',{
extend: 'Ext.app.Controller',
config:{
refs:{
app_viewport: 'app_viewport',
main : 'main',
navigation : 'navigation',
navBtn : 'button[name="nav_btn"]',
},
control : {
app_viewport:{
onPopulateDashBoardData:'toggleNav'
},
navBtn : {
tap : 'toggleNav'
},
navigation : {
itemtap : function(list, index, target, record){
this.toggleNav();
console.log(record);
alert(record._data.title);
}
}
}
},
/**
* Toggle the slide navogation view
*/
toggleNav : function(){
var me = this,
mainEl = me.getMain().element;
console.log('hai');
if (mainEl.hasCls('out')) {
mainEl.removeCls('out').addCls('in');
me.getMain().setMasked(false);
} else {
mainEl.removeCls('in').addCls('out');
me.getMain().setMasked(true);
}
}
});
In the above question , i want to click a text with id TopNews from and want to call a function toggleNav in controller. I tried to fire a event with the name onPopulateDashBoardData and tried to use that event in the controller. But it is also not working . What should you know.
The way you are referring the text is wrong.
Do this:-
items:[{
name: 'top_news', // add this name for referring
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}]
Controller:-
refs:{
menu: container[name='top_news']
},
control : {
menu : {
initialize: function(container) {
container.element.on({
tap: 'toggleNav',
scope: this,
delegate: '#TopNews'
});
}
}
}

retrieve sencha touch 2 fieldsetss value

I am new in sencha touch framework. I am trying to create user login at first. I would like to get username and password from the form and send to api for authentication. But I could not even able to get the field values. My LoginForm view looks like this:
Ext.define('NCAPP.view.tablet.LoginForm', {
extend: 'Ext.form.Panel',
xtype:'loginForm',
id:'loginForm',
config: {
items: [
{
xtype: 'image',
src:'resources/img/netcenter_logo.png',
height: 100
},
{
xtype: 'fieldset',
title: 'NCAPP LOGIN:',
items: [
{
xtype: 'textfield',
id:'fldUsername',
name:'username',
placeHolder: 'Username'
},
{
xtype: 'textfield',
id:'fldPassword',
name:'passowrd',
placeHolder: 'Password'
}
]
},
{
xtype: 'button',
id: 'btnLogin',
text: 'Login'
}
]
}
});
and my Login Controller:
Ext.define('NCAPP.controller.tablet.LoginController', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm:'#loginForm'
},
control: {
'#btnLogin':{
tap:'onLoginButtonTap'
}
}
},
onLoginButtonTap:function(){
var values=this.getLoginForm().getValues();
console.log(values.username); // want to see this output
Ext.ModelMgr.getModel('NCAPP.model.User').load(1,{
success: function(user){
//to do
},
failure: function(user){
console.log("failed");
}
});
},
init:function(application){
}
});
I am unsuccessful to get the value of username field. The shown error is:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'LoginForm'
or sometime this error:
Uncaught TypeError: Cannot call method 'getValues' of undefined
Can anybody help me please.... Thanks
Looks like you've forgotten the () at the end of this.getLoginForm in your callback. Try switching it to
success: function(user){
var values=this.getLoginForm().getValues();
//^^------these ones
console.log(values.username); // want to see this output
}

Controller cannot find view after removing from Main.js

I am very new to Sencha so this is probably a newbie error :)
I am trying to implement page navigation in Sencha. The following scenario WORKS.
I have a Main.js with a Home screen and a Login screen. When I enter credentials I am forwarded to Home.js.
However, I now want to remove the Home from the Main, because it can only be shown after a login. But, after removing the xtype home from the Main.js, it cannot be found anymore. I don't understand why.
Main.js
config : {
tabBarPosition : 'bottom',
items : [{
xtype : 'startview',
}, {
xtype : 'contactform'
}, {
xtype : 'loginform'
}, {
xtype : 'createaccountform'
}, {
xtype : 'homeview' REMOVING THIS MAKES THE HOME undefined in the controller
}]
}
My controller
Ext.define("MyApp.controller.LoginController", {
extend : "Ext.app.Controller",
xtype : 'logincontroller',
requires : ['Ext.app.Router', 'MyApp.view.Home'],
config : {
refs : {
loginForm : "#loginFormPanel",
home : 'homeview'
},
routes : {
login : 'authenticateuser'
},
control : {
'button[action=login]' : {
tap : "authenticateUser"
}
},
views : ['Login', 'Home']
},
authenticateUser : function(button) {
**// WHEN REMOVING xtype: homeview from MAIN this getter returns undefined (??)**
var activeView = this.getHome();
this.getLoginForm().submit({
url : 'php/process_login.php',
method : 'POST',
success : function(form, result) {
alert('Success and moving to home ' + activeView);
Ext.Viewport.setActiveItem(activeView);
},
failure : function(form, result) {
alert('2');
Ext.Msg.alert('Error', 'failure....' + result);
}
});
}
});
Home.js
Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
id : 'home',
xtype : 'homeview',
requires : ['Ext.TitleBar', 'Ext.Video'],
config : {
title : 'Home',
iconCls : 'home',
tabBarPosition : 'bottom',
items : [{
xtype : 'searchview',
}, {
xtype : 'profileview'
}, {
xtype : 'messagesview'
}, {
xtype : 'sensesview'
}]
}
});
app.js
views : ['Start', 'Main', 'Contact', 'Login', 'CreateAccount', 'Home', 'Messages', 'Profile', 'Search', 'Senses'],
controllers : ['LoginController'],
So, how can I make sure I still get a reference to Home in the controller (after removing from main)??
Thanks for your help,
Coen
You want to give Home an itemId instead of of an id.
Ext.define('MyApp.view.Home', {
extend : 'Ext.tab.Panel',
itemId : 'home',
xtype : 'homeview',
...
});
And now in your controller, You want to reference it like this:
...
config : {
refs : {
loginForm : "#loginFormPanel",
home : {
autoCreate: true,
selector: '#home',
xtype: 'homeview'
}
},
...

Open another view within same tabpanel after button click in first panel

I have a Main view in which i create three tabs, on click login tab a login form open
after login success, i need to load another view (landing) in same login tabpanel..I have used the following lines of code to load the view but it doesnt opening it in same tabpanel but loading as a independent view. How to open it in same tabpanel.
Main View of application
Ext.define("SenchaTest.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
html: [
'<img src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")
},
{
title: 'Log In',
iconCls: 'user',
xtype: 'formpanel',
url: 'contact.php',
layout: 'card',
id:"loginForm",
items: [
{
xtype: 'fieldset',
title: 'Log In',
id:"submitForm",
instructions: 'Enter username and password to login.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '45%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
id: 'btnSubmitLogin'
// this.up('formpanel').submit();
}]
}
]
}
]
}
});
Code for Controller
Ext.define("SenchaTest.controller.LoginForm", {
extend : "Ext.app.Controller",
config : {
refs : {
btnSubmitLogin : "#btnSubmitLogin",
LoginForm : '#loginForm'
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function(btn) {
alert("onSubmitLogin");
console.log("onSubmitLogin");
var values = this.getLoginForm().getValues();
//alert(values.username);
//alert(values.password);
Ext.util.JSONP.request({
url:'http://localhost:8092/returnjson.ashx',
params:{ callback:'callback',uname:values.username,password:values.password},
callbackKey: 'callback',
success: function (result,request)
{
if(result.status==true)
{
alert("Welcome " + result.UserName);
Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));
}
else
{
alert("Username or Password is incorrect");
return;
}
console.log(result.UserName);
console.log(result);
alert(result);
// Handle error logic
if (result.error) {
alert(response.error);
return;
}
}
});
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
Ext.Viewport.add(Ext.create('SenchaTest.view.Landing'));
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
View to load after login landing
Ext.define("SenchaTest.view.Landing", {
extend: "Ext.Container",
xtype: 'landingScreen',
requires: [
"SenchaTest.view.Main"
],
config: {
html: "Welcome to my app"
}
});
i have used...
Ext.Viewport.setActiveItem(Ext.create('SenchaTest.view.Landing'));
to load landing view but it does not load in same tab but as a independent page.
Please Help on this.
The following code allows you to extend Sencha Touch with a 'replace' function that allows you to dynamically swap two view components within the same panel (I believe that is what you are trying to do):
http://www.sencha.com/forum/showthread.php?134909-Replace-component-function&langid=4
An alternative solution (not recommended) is to create a third, but hidden, tab panel ('Landing'), then create and show it on successfully login, while simultaneously hiding the login tab panel.

Sencha Touch 2 set label in Controller

I'm new to the MVC structure with Sencha Touch 2.
In my view, I have a label as follows:
{
xtype: 'label',
itemId: 'title',
html: 'title'
}
In my controller, how do I set the value of this label?
Currently my controller (working off a tutorial sample):
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
noteView: "noteview",
noteEditorView: "noteeditorview",
notesList: "#notesList"
},
control: {
noteView: {
// The commands fired by the notes list container.
noteNextCommand: "onNoteNextCommand",
noteAnswerCommand: "onNoteAnswerCommand"
},
noteEditorView: {
// The commands fired by the note editor.
saveNoteCommand: "onSaveNoteCommand",
deleteNoteCommand: "onDeleteNoteCommand",
backToHomeCommand: "onBackToHomeCommand"
}
}
},
onNoteNextCommand: function () {
var noteView = this.getNoteView();
console.log("loaded view");
//set label here
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
var notesStore = Ext.getStore("Notes");
notesStore.load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
} });
The full View code:
Ext.define("NotesApp.view.Note", {
extend: "Ext.Container",
alias: "widget.noteview",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "toolbar",
title: "Random Question",
docked: "top",
items: [
{ xtype: 'spacer' },
{
xtype: "button",
text: 'List',
ui: 'action',
itemId: "list"
}
]
},
{
xtype: "label",
html: 'question',
itemId: "question"
},
{
xtype: "label",
html: 'answer',
itemId: "answer"
}
],
listeners: [{
delegate: "#list",
event: "tap",
fn: "onListTap"
},
{
delegate: "#question",
event: "tap",
fn: "onQuestionTap"
},
{
delegate: "#answer",
event: "tap",
fn: "onAnswerTap"
}]
},
onListTap: function () {
console.log("list");
this.fireEvent("showList", this);
},
onQuestionTap: function () {
console.log("noteAnswer");
this.fireEvent('noteAnswer', this);
},
onAnswerTap: function () {
console.log("noteNext");
this.fireEvent('noteNext', this);
} });
You need to add a reference to your label in your controller :
config: {
refs: {
yourlabel : #YOUR_LABEL_ID'
}
…
}
and then in your controller you can access the label by calling this.getYourlabel();
So, in order to change the title, you need to do (wherever you want in your controller)
this.getYourlabel().setHtml('Label');
Hope this helps
Give your label some id property value
{
xtype: "label",
html: 'answer',
id: "answerLabel"
}
and then write the following code in your controller.
.....
..... // Controller code ..
refs: {
answerLabel: '#answerLabel',
},
control: {
answerLabel: {
tap: 'answerLabelFn'
}
}
.....
.....
answerLabelFn : function() {
// Your Label tap handler code...
}