PDA

View Full Version : HELP!!!! OMG, HELP!!! I need a code example!!



allynchristopher
8 Sep 2012, 2:18 PM
:((:((Okay, I need some help PLEASE. What I am trying to do seems like it should be elementary but I can't seem to find a way to make it work.

Let me start by saying that I have googled, searched all the doc's etc. and still can't find a solution.If you do respond, please assume that I know absolutely nothing and describe/write as though I am a 3rd grader.:)

This issue: I have a top level container "MyContainer" that is the initial view. It has a button called "MyButton." I have another view called "Login". All I want the app to do is this: when MyButton is clicked (or tapped), show the Login view.

PLEASE help me figure out how to accomplish this... I am beginning to loose hair. Thanks!

The container:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',


config: {
items: [
{
xtype: 'button',
itemId: 'mybutton2',
text: 'MyButton2'
}
]
}


});

The Login view:
Ext.define('MyApp.view.LoginCard', {
extend: 'Ext.form.Panel',
alias: 'widget.loginCardView',


config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'emailfield',
label: 'Username',
labelWidth: '35%',
name: 'username',
placeHolder: 'email@example.com'
},
{
xtype: 'passwordfield',
label: 'Password',
labelWidth: '35%',
name: 'password'
}
]
},
{
xtype: 'button',
height: 29,
itemId: 'loginButton',
ui: 'confirm',
text: 'Log In'
}
],
listeners: [
{
fn: 'onLoginButtonTap',
event: 'tap',
delegate: '#loginButton'
}
]
},


onLoginButtonTap: function(button, e, options) {
var values = this.getValues();
if (values.username && values.password) {
this.submit({
url: 'login.php',
method: 'POST',
success: function(form, result) {
Ext.Msg.alert('', 'Login Successful!');
},
failure: function(form, result) {
Ext.Msg.alert('', 'Login Failed!');
}
});
} else {
Ext.Msg.alert('Error', 'Both username and password are required.');
}
}


});

sword-it
9 Sep 2012, 10:57 PM
HI!


HELP!!!! OMG, HELP!!! I need a code example!!

firstly, please use meaningful title for your thread which contains short information of your problem.

You may use Ext.Viewport.setActiveItem and can pass either an index or the component instance to make an item active


Ext.Viewport.setActiveItem(1) // index
Ext.Viewport.setActiveItem('your component instance')



For more info, check this thread:-
http://www.sencha.com/forum/showthread.php?219663-How-to-move-from-one-view-to-another-using-sencha-touch-when-clicking-button

allynchristopher
10 Sep 2012, 6:20 AM
Hey thanks for the help (and sorry for the title!). I still can't get it to work. Read the other thread and your reply and trying several code configurations. Here is my controller code. When I click the button, there is no response in terms of changing to the Login View. I have tried putting in the alias, calling the fieldset "loginCardView", Ext.create, etc, etc, etc. Any help would be great. I have figured out an whole lot on ExtJS but for some reason, I just can't seem to make this happen.

Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',


config: {
views: [
'LoginCard'
],


refs: {
LoginCard: '#LoginCard'
},


control: {
"button#mybutton2": {
tap: 'onMybutton2Tap'
}
}
},


onMybutton2Tap: function(button, e, options) {
Ext.Viewport.setActiveItem(Ext.Viewport.down('LoginCard'));
}


});

allynchristopher
10 Sep 2012, 2:27 PM
Well, after fooling around with this all day I finally got it to work. It seems that I was missing a crucial step but it is clear to me now;

Sencha does not automatically "create" a view instance by calling the class name. The view for my "LoginCard" was defined in my file "MyApp.view.LoginCard". However, the way I had the code written, it wasn't displaying in the viewport when MyButton2 fired because I never called for it to be "created"!! I was assuming that the framework would automatically create an instance of "LoginCard" when MyButton2 fired, whereby I would only have to call for it to be displayed (Ext.Viewport.setActiveItem('LoginCard'). Apparently, this is not the case. The view instance must be "created" before it can be displayed. In my case I accomplished it with the following simple code:

onMybutton2Tap: function(button, e, options) {
var loginPanel = Ext.create('MyApp.view.LoginCard');
Ext.Viewport.setActiveItem(loginPanel);
}