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.
