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'
}
}
Related
I'm very new to sencha touch and ive having difficulty in moving in moving from one view to another when i click the add button in my mainview in my practice application.ive tried searching for errors in my console panel but Chrome just shows and empty console. I'm sorry if this seems like a noob query but any help is gratefully accepted.
MainView.js
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
requires: [
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
itemId: 'MainView',
navigationBar: {
docked: 'top',
itemId: 'navbar',
items: [
{
xtype: 'button',
align: 'right',
itemId: 'addButton',
iconAlign: 'center',
iconCls: 'add'
}
]
}
}
});
AddForm.js
Ext.define('MyApp.view.AddForm', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
'Ext.field.DatePicker',
'Ext.picker.Date',
'Ext.Button'
],
config: {
items: [
{
xtype: 'fieldset',
itemId: 'myForm',
title: 'Insert Data',
items: [
{
xtype: 'textfield',
label: 'ID',
name: 'id',
required: true
},
{
xtype: 'textfield',
label: 'Name',
name: 'username',
required: true,
autoCapitalize: true
},
{
xtype: 'datepickerfield',
label: 'Date Of Birth',
labelWrap: true,
placeHolder: 'mm/dd/yyyy'
}
]
},
{
xtype: 'button',
itemId: 'saveButton',
margin: 10,
ui: 'confirm',
text: 'SAVE'
},
{
xtype: 'button',
itemId: 'declineButton',
margin: 10,
ui: 'decline',
text: 'DELETE'
}
]
}
});
FirstControl.js(Controller)
Ext.define('MyApp.controller.FirstControl', {
extend: 'Ext.app.Controller',
config: {
refs: {
MainView: 'mainview',
addButton: 'mainview #addButton'
},
control: {
"mainview #addButton": {
tap: 'add'
}
}
},
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push({
xtype:'AddForm',
title:'Insert'
});
}
});
forgot to add the alias:'field'
Change your add function in FirstControl.js(Controller file) file to below.
add: function(button, e, eOpts) {
console.log('inside the add function');
this.getMainView().push(Ext.create('MyApp.view.AddForm'));
}
It should work.
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.
I am new to sencha touch and I am having trouble loading a form into a view.
In my app.js I am loading the main view as such
Ext.Viewport.add(Ext.create('app.view.Main'));
My full app.js is as follows
Ext.application({
name: 'app',
requires: [
'Ext.MessageBox',
'Ext.form.FieldSet',
],
views: ['Main'],
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
},
});
My main view is:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
form
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
I took the form from the official documentation and the form doesn't load for some reason. So how can I add the form to my main view?
First let it solve by your approach. Make the following changes & it should work in your system (Running on mine):-
1.) In app.js
Ext.Viewport.add(Ext.create('app.view.Main'));
2). In Main.js
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype: form
}
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
But i will not prefer to call the formpanel in the way you are doing. Rather you can follow ARolek answer OR follow this approach :-
1) app.js
Ext.application({
name: "app",
views: ["Main","second"],
launch: function () {
Ext.Viewport.add(Ext.create('app.view.Main'));
}
});
2) Main.js
Ext.define("app.view.Main", {
extend: "Ext.Container",
requires:["app.view.second"],
config:{
fullscreen: true,
layout:
{
type: 'fit'
},
items:[
{
xtype: "form"
}
]
}
});
3) second.js
Ext.define("app.view.second", {
extend: "Ext.form.Panel",
requires:['Ext.form.FieldSet','Ext.Toolbar'],
alias: "widget.form",
config:
{
items:
[
{
xtype: 'fieldset',
title: 'About You',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
If you want the form to always be in app.view.Main, then simply do:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
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 ...
The controller function
startpage:function(a){
var model1 = this.store.getAt(a.index);
App.views.start.load(model1);
App.views.viewport.reveal('start');
},
how to get the loaded model1 values in the start page
how can i able to pass parameter from controller to a page
App.views.start = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){}
}
As your extending the FormPanel, I believe Sencha will pre-populate your fields.
Your code will looking something similar to this:
App.views.start = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){
var fields = {
xtype: 'fieldset',
id: 'a-form',
title: 'A Form',
instructions: 'Some instructions',
defaults: {
xtype: 'textfield',
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
name : 'title',
label: 'title',
xtype: 'textfield'
},
{
name: 'email',
label: 'email',
xtype: 'emailfield'
}
]
};
Ext.apply(this, {
scroll: 'vertical',
items: [ fields ]
});
App.views.start.superclass.initComponent.call(this);
}
}
Ext.reg('App.views.start', App.views.start);
Note that you will have to substitute in your actual fields and you'll probably need to customise the form somewhat.