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

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.

Related

Controller ref not working

In my SenchaTouch 2.3.1 app I have build a login panel for the user. It looks like this:
Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginPanel',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.Button'
],
config: {
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Business Login',
itemId: 'login',
items: [
{
xtype: 'emailfield',
itemId: 'email',
label: 'E-Mail',
name: 'email',
required: true
},
{
xtype: 'passwordfield',
itemId: 'password',
label: 'Passwort',
name: 'password',
required: true
}
]
},
{
xtype: 'button',
itemId: 'loginButton',
cls: 'button-blue',
text: 'Login'
},
{
xtype: 'panel',
itemId: 'loggedInPanel',
cls: 'logged-in-panel',
tpl: [
'Sie sind eingeloggt als {firstname} {lastname} (ID: {agentId})'
],
hidden: true,
margin: '10 0'
}
]
}
});
In my controller, I want to use a reference to this panel like this:
config: {
refs: {
loginPanel: 'loginPanel',
navigationView: '#morenavigation',
loggedInPanel: '#loggedInPanel',
loginButton: '#loginButton'
}
}
In the launch function of the controller, I want to check if the user already logged in to show his id and show a logout button. But when I try to get the panel ref, it's undefined. But why?
launch: function() {
var me = this,
sessionInfo = Ext.getStore('SessionInfo');
console.log(me.getLoginPanel()); <-- undefined
if (null !== sessionInfo.getAt(0).get('sessionId')) {
me.successfullLogin(sessionInfo.getAt(0).get('sessionId'));
}
}
Is anything actually creating an instance of your view?
Inside your application's launch method, you'll probably have to create an instance of it, and then either give your view the fullscreen: true config, or add it to the viewport. The examples on the Sencha Touch API docs for Ext.app.Application have the main view being created from the application's launch function.
The correct way of using the ref in my example would be:
refs: {
loginPanel: {
autoCreate: true,
forceCreate: true,
xtype: 'loginPanel'
}
}

Constant button linking to a page throughout the app

I have a button at the top right of every page that I want to link to a certain page within my application. Is there a way to give each instance of this button the same behaviour? and if so where would the code sit so that it affects every page? Many thanks in advance.
View:
items: [
{
title: '<span class="logo"></span>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets'
}
]
}
]
Controller (specific to one page):
config: {
refs: {
main: 'ListNav'
},
control: {
"button#buytickets": {
tap: 'buytickets'
}
}
},
buytickets: function(button, e, eOpts) {
this.getMain().push({
xtype: 'buyticketspanel'
});
},
You could just put the button at the top of your Viewport, in the app.js file:
Ext.application({
name: 'MyApp',
requires: [],
views: [/*Views*/],
controllers: [/*Controllers*/],
viewport: {
layout: 'vbox'
},
launch: function() {
var me = this;
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add([
{
title: '<span class="logo"/>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets',
handler: me.doBuyTickets
}
]
},
Ext.create('MyApp.view.Main', {flex: 1})
]);
},
doBuyTickets: function() {
//do stuff
}
});
****EDIT****:
However, you won't be able to re-purpose that bar as the title bar for a NestedView. If you need to have that, then you might be best served with a utils file that has a method to add a button to a toolbar, and just reuse that in the init function of any NestedView components.
Utils.js:
Ext.define("MyApp.util.Utils", {
singleton: true,
addBuyButton: function(toolbar)
{
toolbar.add({
text: 'Buy Tickets',
align: 'right',
handler: function() {
//do stuff
}
});
}
});
Controller:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
nestedList: 'nestedlist'
},
control: {
app-page: {
initialize: 'initAppPage'
}
}
},
initAppPage: function()
{
MyApp.utils.addBuyButton(this.getNestedList().getNavigationBar());
}
});

How to use up() in Ext.Button handler

Back Ground : I am working on an MVC application using sencha touch 2. I am working on a page which has two tabs. Inside the first tab, I have a button inside a title bar.
Issue : I am not able to call anyother function from the button handler. I think, there is an issue with the scope of the calling function.
Here is my code.
Ext.define('WUPOC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires:['Ext.TitleBar','Ext.dataview.List','Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right',
handler : function(btn){
console.log('LogOut is tapped'); // This is printed
this.up.onNewButtonTap(); // Throws error
}
}],
}],
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
onNewButtonTap: function () {
alert('newNoteCommand');
},
});
I am getting the error as below.
Uncaught TypeError: Object function (selector) {
var result = this.parent;
if (selector) {
for (; result; result = result.parent) {
if (Ext.ComponentQuery.is(result, selector)) {
return result;
}
}
}
return result;
} has no method 'onNewButtonTap'
I think there is an issue with setting the scope of a button. Kindly help.
Thank you
First, up is a function so you need to call it this way :
this.up();
Then this.up() would only bring to the container of the button, which has no method onNewButtonTap. You could just keep doing up() until you get the right component but this would me more clever to do :
Add an xtype to your view
Use this xtype as a selector in the up function : this.up('myXType').onNewButtonTap();
Example
Hope this helps

Sencha Formfields passing empty fields

I'm learning Sencha Touch. I created this app with a form before and it worked fine.
Now i'm working on a new little test app i copy the code from the other app and it only passes empty variables to the webservice.
the View:
<!-- language: lang-js -->
Ext.define('Gasoline.view.InsertTankTrip', {
requires: [
'Ext.form.FieldSet'
],
extend: 'Ext.form.Panel',
xtype: 'inserttankpanel',
id: 'insertTankForm',
config: {
title: 'Insert Tank Trip',
iconCls: 'add',
url: 'contact.php',
items:[
{
xtype: 'fieldset',
title: 'Insert Tank Trip',
instructions: '(Make sure the info is correct!)',
items:[
{
xtype: 'datepickerfield',
label: 'Date',
name: 'date',
value: new Date()
},
{
xtype: 'textfield',
label: 'Amount',
name: 'amount',
minValue:-9007199254740992,
maxValue: 9007199254740992
}
]
},{
xtype: 'button',
text: 'Send',
ui: 'confirm',
action: 'insertTankSubmit'
}
]
}
});
And in the controller :
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Gasoline.view.Main'));
this.control({
'button[action=insertTankSubmit]' : {
tap: 'insertTankForm'
}/*,
'list[itemId=kingsLeagueList]' : {
itemtap: 'onListTap'
},
'list[itemId=tournamentsList]' : {
disclose: 'showDetail'
}*/
});
},
insertTankForm : function(){
console.log('test');
var form = this.getInsertTankForm();
form.submit({
url:'contact.php'
});
},
This sends the following to the webservice (which currently doesn't exist i just check with developer tools)
date:2012-07-26T17:02:16
amount:
so the date does get sent , the number doesnt
If i fill in a standard value for the number ... that gets sent but if you type something in , it still doesn't send that
Use
xtype: 'numberfield'
instead of
xtype: 'textfield'
I had tried numerous solutions...none of them worked.
Lastly i deleted everything ... coded everything the exact same way and it started working ...

Linking to a second tabItem inside a Tab.Panel view

Is it possible to link to a tab.Panel view and have the second or third (not the first) tabItem be selected?
Currently i have a view that's linking to a tab.Panel that looks like this:
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
}
});
As of now when i load in the view, 'xtype-of-view-1' is set as the active tab.
But is it possible to load in the tab.Panel view but having one of the other tabs active and pressed?
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
},
initialize: function() {
var items = this.getItems(),
itemIdx,
Ext.each(items, function(item, idx) {
if (item.xtype == 'xtype-of-view-2') {
itemIdx = idx;
return false;
}
});
this.setActiveItem(itemIdx);
}
});
you could also watch the awesome video guide http://docs.sencha.com/touch/2-0/#!/video/tabs-toolbars
You have to add a controller to you app. in controller add a reference
refs: {
myview: 'myview',
list: 'anotherview list'
},
control : {
list: {
itemtap: 'onListItemTap'
}
},
onListItemTap: function (ct) {
var myview = this.getMyview();
myview.setActiveItem(1)
}
Please get read the sencha tutorial if you have no clue about MVC in sencha touch. Eg. http://docs.sencha.com/touch/2-0/#!/guide/controllers
you cand add bello config in to tab.panel
activeItem :2
for active third item insted of first