I have a sencha touch password field like below:
xtype : 'passwordfield',
id : 'password',
name: 'password',
label : 'Password',
labelWidth : '40%',
I want to get the value of this field. I tried using getValue() method. But it is returning me null value.
In controller:
merchantPwd : '#password',
And then like this:
var pwd = this.getMerchantPwd().getValue();
alert("password:" +pwd);
Please help..
The only different between passwordfield and other input fields is its value is hidden by showing just meaningless characters, e.g dots or stars. Except this, it's just like other input field.
For example, try this in the Sencha Touch documentation code editor & live preview, it works.
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Register',
items: [
{
xtype: 'emailfield',
label: 'Email',
name: 'email'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password',
id: 'abc',
value: 'abc',
}
]
}
]
});
Ext.Msg.alert(Ext.getCmp('abc').getValue());
So I think there might be some issues such as:
The password field is blank (actually in this case it shows nothing but not null value)
There're some problems with your controller code. Pay attention to this pointer.
Related
I want to send post request in sencha touch and the arguments I want to post are dynamic i.e. I want to take the textField values as a parameters to post. Please help me
proxy: {
type: "ajax",
url:'http://anotherserver.com/query.php',
method:'post',
extraParams: {
val: "TextField1.Text" // **here I want to provide the value of the textField help me plz**
},
reader: {
type: "json",
rootProperty: "notes",
totalProperty: "total"
}
},
Look first for Sencha Touch model concept because your can tag along your model into your Form (Ext.FormPanel) and treat it as one.
var model = Ext.create('Ext.data.Model',{
fields: ['name', 'email', 'password'],
proxy: [] //your proxy settings here,
customFunctionWithAjax: function(){
}
});
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'
}
]
});
//after filling up your form you can get all textfields value
//with .getValues() and set it to your model
model.setData(form.getValues);
//then you can do anything you want like SAVE, or update
model.save();
//or call your custom function with your customised ajax request
model.customFunctionWithAjax();
// you can also check if your data are correct before sending it using .validate();
model.validate();
Usually you want to wrap the text field inside a form (formpanel).
Then you can use
var form = Ext.Viewport.down('.formpanel'),
values = form.getValues(),
textfieldValue = values.textfield_name;
...
extraParams: {
val: textfieldValue
},
Hi my selectfield structure is as follow :
{
xtype: 'selectfield',
label: 'Name :',
name: 'description',
displayField: 'description',
valueField: '_description',
store: 'ABC',
autoSelect: true,
labelWidth:'35%',
readOnly:true
}
How I can set Default value as --select--
Is this possible.
Please guide me or provide working code thanks In Advance.
I think you're looking for placeholder:
{
xtype: 'selectfield',
placeholder: '--select--',
...
}
See docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.field.Input-cfg-placeHolder
If you want an actual value to be set in the field, i.e. 'default value' as you ask, you can set the default value on the model, e.g.
Ext.define('Core.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'description', type: 'string', defaultValue: '--select--' }
]
}
});
Then on your store 'ABC' make sure the model is set correctly i.e. model: 'Core.model.MyModel.
If you just want a placeholder label to appear saying '--select--' - purely for decorative/aesthetic purposes, not an actual value that would then be used, then kevhender's answer is correct, i.e. the placeholder property.
I've noticed a problem with ST2 and selectfield pickers. I'm testing this on Desktop browser and tablet and both seem to show the same problem.
The problem seems to stem from having form data that is empty or uninitialised.
My example is a user logs into their account and needs to set their marital status. As this has never been set before the backing store model is actually 'null' for their marital status. When they click the picker, the pick for some reason picks the first item in the checklist automatically. This is evident by the check-mark on the right side of the item. The 2nd side-effect of this is, if you then select the first item, ST2 doesn't see this as an item change and so doesn't then propagate the selection change back to the form.
Is this is a bug? How do I get round this problem?
Ext.define('Gender', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Id', type: 'int'},
{name: 'ItemName', type: 'string'}
]
}
});
Ext.define('Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Gender', type: 'int'}
]
}
});
var myGenderStore = Ext.create('Ext.data.Store', {
model: 'Gender',
data : [
{Id: 1, ItemName: 'Male'},
{Id: 2, ItemName: 'Female'}
]
});
var myDetailsStore = Ext.create('Ext.data.Store', {
model: 'Details',
data : [
{ Gender: null }
]
});
var p = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender'
}
]
}
]
});
p.setRecord(myDetailsStore.getAt(0))
Ext.Viewport.setActiveItem(p);
// notice the picker has 'Male' selected even though the backing store for the Gender field is null
// also, we want to select Male from the list, but this isn't reflected on the form
// run below command in console window after selecting 'Male' even though it is selected and it shows null
// It only seems to like changes to the value as selecting female works. If then select Male from Female this also works.
p.getValues().Gender;
you can set value for the select field
p.down('selectfield[name=Gender]').setValue(myGenderStore.getAt(0).get('Id'))
see example: http://www.senchafiddle.com/#OuCtQ#GQJ2C
thanks
Just set the autoSelect config property to false,to prevent default selection like this:
{
xtype: 'selectfield',
label: 'Choose one',
displayField: 'ItemName',
valueField: 'Id',
store: myGenderStore,
name: 'Gender',
autoSelect:false
}
I have a numberfield like below
{
xtype: 'numberfield',
name: 'phoneNumber',
label: 'Phonenumber',
required: false
}
When a user inserts a value like 3832, it will be saved right but when the user sets a value with 0 at the begin of a sequence like 0123, the zero will be removed and only 123 will be saved.
In my case I want to store some phonenumbers which have a 0 value at the begin.
PS. the phoneNumber in the model is a string, so it will be saved as a string
{ name: 'phoneNumber', type: 'string' }
How could I resolve this?
Thanks in advance.
You should using a textfield and in controller to checking Ext.isNumeric(phoneNumberValue)
I have worked on your problem. Use your model like this. Also use textfield instead of a numberfield.
{
xtype: 'textfield',
name: 'phoneNumber',
label: 'Phonenumber',
required: false
}
mymodel.js
Ext.define("Stackoverflow.model.mymodel", {
extend: "Ext.data.Model",
config: {
fields: [
{ name: 'phoneNumber', type: 'string' },
],
validations: [
{ type: 'presence', field: 'phoneNumber', message: 'Enter a Phone number.' },
{ type: 'format', field: 'phoneNumber', matcher: /[0-9]{1,20}/}
]
}
});
And then validate this inside your controller. I hope you have code for model validation.( If not leave a comment)
For some reason my form keeps on doing a GET instead of posting the data to the URL I configured.
My form looks like this:
Ext.define('App.view.LoginFormPanel', {
extend : 'Ext.form.Panel',
xtype : 'loginForm',
id : 'loginForm',
config : {
title : 'Login',
iconCls : 'user',
ui : 'light',
items : [
{
xtype : 'fieldset',
title : 'Login',
items : [
{
xtype : 'textfield',
label : 'Login',
name : 'j_username',
required : true,
readOnly : false
}, {
xtype : 'passwordfield',
label : 'Password',
name : 'j_password',
required : true,
readOnly : false
}
]
}, {
xtype : 'button',
ui : 'confirm',
text : 'Login',
action : 'login'
}
]
}
});
And my controller that submits the form looks like this:
......
login : function() {
loginForm.submit({
url : 'j_spring_security_check',
method : 'POST'
});
},
......
I tried to put the url and method on the form too put no luck either :(.
Does anybody know what I am doing wrong?
Try to set standardSubmit to true. By default Touch forms are submitted via ajax GET method, but standardSubmit will send POST. Note that parameters will be encoded in http payload, not in the url params.
Cheers, Oleg
My answer is for those who have a problem with submitting a form with POST method.
If you are new to Sencha and you have a form which is submitting nothing, you probably followed this tutorial Building your first app
It has a problem. Form items MUST HAVE NAME which is missing in the example.
Items should look something like the following:
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]