PDA

View Full Version : Getting Form data



ChillsNL
28 Apr 2011, 12:00 AM
Hello people,

After creating my new application wich already has an login form, starting list, an sub list and some more things, times to makes some functions has come.


var formBase =
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'FreightWare Mobile Login',
instructions : 'Log hier in met uw FWMobile account.',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout :
{
pack: 'center'
},
items:
[{
text : 'Login to FreightWare Mobile',
ui : 'action',
handler : function (record)
{

form.hide();
GW.List.show();
GW.TabPanel.show();

}
}]
}]
};

if (Ext.is.Phone)
{
formBase.fullscreen = true;
}
else
{
Ext.apply(formBase,
{
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}

form = new Ext.form.FormPanel(formBase);
form.show();

I need the username and the password to make a request with the service. The username and password are sended by a Ext.data.JsonStore wich gives me the answer, login true or false.

How do i get the username and password filled in the form?
I need them when i press the button so it uses the handler ;).

Thnx!

realjax
28 Apr 2011, 12:32 AM
Tried form.getValues().password ?

ChillsNL
28 Apr 2011, 12:39 AM
Dutch
Ja had ik gedaan maar ik kreeg er geen resultaat van. Op een of andere manier slaat hij de gegevens niet op. Heb jij een oplossing? Lullige van al mijn code is, dat het in 1 bestand staat dus het spelen met variabele gaat aanzienlijk lastiger.

Wil je alle code even doorzien?

English
I've done that but it didn't get the result I was hoping for. It doesn't saves the data. Do you have an solution for that? The point is that all my data is being placed in 1 document, index.js, so playing with some vars is a kind of a trick..


/************************ Index.JS *************************
* Created on 14 - 03 - '11 | 15:43 by JR. *
* This is the main JavaScript file of FWM *
***********************************************************/
Ext.ns('FWM', 'GW');

Ext.setup
({
tabletStartupScreen: 'resources/img/tablet_startup.png',
phoneStartupScreen: 'resources/img/phone_startup.png',
icon: 'resources/img/icon.png',
glossOnIcon: false,

onReady: function()
{
GW.TabPanel = new Ext.TabPanel
({
fullscreen : true,
tabBar :
{
dock : 'bottom',
scroll : 'vertical',
sortable : true,
layout :
{
pack: 'center'
}
},
items:
[{
iconCls : 'user',
title : 'User'
},{
iconCls :'arrow_left',
title : 'Back',
handler : function()
{
form.hide();
GW.List.show();
GW.TabPanel.show();
}
}],
dockedItems:
[{
scroll : 'horizontal',
layout :
{
pack: 'center'
},
defaults:
{
iconMask : true,
ui : 'plain'
},
items:
[{

}]
}]

});

GW.TabPanel.hide();

Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'password', type: 'password'}
]
});

var formBase =
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'FreightWare Mobile Login',
instructions : 'Log hier in met uw FWMobile account.',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout :
{
pack: 'center'
},
items:
[{
text : 'Login to FreightWare Mobile',
ui : 'action',
handler : function (record)
{

form.hide();
GW.List.show();
GW.TabPanel.show();

}
}]
}]
};

if (Ext.is.Phone)
{
formBase.fullscreen = true;
}
else
{
Ext.apply(formBase,
{
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}

form = new Ext.form.FormPanel(formBase);
form.show();
Ext.regModel('Contact',
{
fields: ['firstName', 'lastName']
});

GW.Store = new Ext.data.JsonStore
({
model: 'Contact',
proxy:
{
type : 'ajax',
url : 'GWService.svc/GWEndPoint/getPersons',
reader :
{
type: 'json',
root: 'getPersonsResult'
},
actionMethods:
{
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
}
},
autoLoad: true
});

GW.List = new Ext.List
({
width : 200,
fullscreen : true,
itemTpl : '{firstName} {lastName}',
store : GW.Store,
multiSelect : true,

itemtap: function()
{

},
onItemDisclosure: function(record)
{
GW.SelectedItem = record.get('lastName');
GW.List.hide();
GW.Listt.show();
}
});
GW.List.hide();
GW.Test = new Ext.data.JsonStore
({
model : 'Contact',
sorters: 'lastName',
data:
[{
firstName : 'Tommy',
lastName : 'Maintz'
},{
firstName : 'Rob',
lastName : 'Dougan'
},{
firstName : 'Ed',
lastName : 'Spencer'
},{
firstName : 'Jamie',
lastName : 'Avins'
},{
firstName : 'Aaron',
lastName : 'Conran'
},{
firstName : 'Dave',
lastName : 'Kaneda'
},{
firstName : 'Michael',
lastName : 'Mullany'
},{
firstName : 'Abraham',
lastName : 'Elias'
},{
firstName : 'Jay',
lastName : 'Robinson'
}]
});

GW.Listt = new Ext.List
({
fullscreen : true,
itemTpl : '{firstName} {lastName}',
indexBar : true,
store : GW.Test
});

GW.Listt.hide();

}
});
Ext.ns('GW', 'GW.Data');

Anyone has an idea about this? Is there a way to place my models and stores in different Javascript files and call that with a source and card param? What does it takes to make that kind of application or what is the best way to make an application wich solves ALOT of dynamic loading and dynamic creating of forms?

realjax
28 Apr 2011, 1:01 AM
I quicky ran your code and form.getValues().name works just fine..

try this


text : 'Login to FreightWare Mobile',
ui : 'action',
handler : function (record)
{

alert(form.getValues().name);


}

ChillsNL
28 Apr 2011, 1:23 AM
Strange that it works, tried it several times and it didn't seem to get it working, thanks!

Now I have an another question, i've having a hard times with coding Sencha on the best way. I've got the login form als startup item and when i press the button, the handler needs to hide the form(.hide function) and makes an request with that param. The problem I'm having now, after storing the vars, i cant use them in an Ext.data.JsonStore request as an param.

Feeling like a noob, never worked with Javascript ..

realjax
28 Apr 2011, 1:46 AM
The best advice I can give you is to study some of the more in-depth Touch examples and how they are set up. If you continue coding the way you are doing now, you'll soon hit a dead end. Also, make sure you understand the basic concepts of Javascript scoping and really important, get a solid grip on javascript closures. It will save you from a lot of headaches.

ChillsNL
28 Apr 2011, 1:52 AM
I've noticed that all this coding is giving me alot of headaches and I got 6 weeks left ..

Worked and readed the KitchenSink examples where it makes a good use of cards and other JS files, do you have an tutorial for that? I really need to split my coding and place my lists and models in different .js files and use cards for them ..

Headache #2 is coming for today ..

Edit: Stripped my coding, this is only needed for Startup
/************************ Index.JS *************************
* Created on 14 - 03 - '11 | 15:43 by JR. *
* This is the main JavaScript file of FWM *
***********************************************************/
Ext.ns('FWM', 'GW');

Ext.setup
({
tabletStartupScreen: 'resources/img/tablet_startup.png',
phoneStartupScreen: 'resources/img/phone_startup.png',
icon: 'resources/img/icon.png',
glossOnIcon: false,

onReady: function()
{
this.LoginForm=
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'FreightWare Mobile Login',
instructions : 'Log hier in met uw FWMobile account.',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout : 'card',
items:
[{
text : 'Login to FreightWare Mobile',
ui : 'action',
handler : function (record)
{
LoginUserName = form.getValues().name;
LoginPassWord = form.getValues().password;
console.log(LoginUserName);
console.log(LoginPassWord);
CheckLogin = new Ext.data.JsonStore
({

});
}
}]
}]
};

if (Ext.is.Phone)
{
this.LoginForm.fullscreen = true;
}
else
{
Ext.apply(this.LoginForm,
{
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}

form = new Ext.form.FormPanel(this.LoginForm);
form.show();

}
});
Ext.ns('GW', 'GW.Data');

realjax
28 Apr 2011, 2:04 AM
I'm not entirely sure, but I think there are some tutorials/workshop thingies available for Extjs re developing larger Extjs applications. The basic concepts also apply for Touch.

As an example: Recently I released a large Extjs based application for one of our clients. Over a hunderd javascript source files ( excluding the Extjs library) which are built into 2 js source files when deployed.
You simply can not develop an application of this size without thinking about a good structure first.
Nevertheless I still had to refactor once or twice ;)

ChillsNL
28 Apr 2011, 2:09 AM
Well, i'm almost sure about the items I need for my application. The only problem is making a good structure for this all, as i'm working with Javascript for almost half a year on school(im a 18 year old student). The problem I have is how to implement the items I need to make it a good working application.

Where do you start, what is usefull and what not, how do I use this Ext.data.JsonStore with a webservice connection, using the params i've have from the from on startup. That's the problem i'm facing. I'm working hard to make everything work but i'm really having a hard time with it.

Back to our tip about watching some coding of applications, noticed that alot of people extending the panel en use InitializeComponent and calling a supercall event, is it usefull?

realjax
28 Apr 2011, 2:17 AM
I admit that setting out a development path or even good 'getting started' tutorials have never been Sencha's strongest point. To put it mildly. I can fully understand why new users quickly turn away from Sencha's products.

Extending a class is a whole different ballgame. Basically you only want to do so if the super lacks some sort of functionaility you need in the class. If I where you, I'd forget about extending for now.

ChillsNL
28 Apr 2011, 2:23 AM
Ok, i'll try to make something else work with different .js files, it's really a hard time ..

And indeed, Sencha is a hell for beginners but i'm never planning to give up. Every way of making a program has it ups and downs, and this is an big down for me.