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'
}
]
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
},
I have a sencha touch form which has multiple combo boxes,but when i submit the formpanel the display field value is send in the request instead of the value field. I am using sencha touch 2.3.0.
this.getDetailsPanel().submit({
url: 'savedetails.php',
method: 'POST',
success: function() {
alert('form submitted successfully!');
},
failure:function(){
alert("connection error");
}
});
}
any pointers ..? combo box used in the form is given bellow
{
xtype: 'selectfield',
name: 'assignedToDepartment',
label: 'Assigned to Department',
options:[
{text:'All',value:'0'},
{text:'Daniel Craig',value:'1'},
{text:'Sean Connery',value:'2'}
]
},
Try using displayField and valueField configuration in selectfield.
Like this
{
xtype: 'selectfield',
name: 'assignedToDepartment',
label: 'Assigned to Department',
displayField : 'text',
valueField : 'value',
options:[
{text:'All',value:'0'},
{text:'Daniel Craig',value:'1'},
{text:'Sean Connery',value:'2'}
]
},
I have a ProfileView which should show some user data. This is the first time I am trying to get data from MySql and showing it on a Sencha view.
The view
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
var myStore = Ext.create("Ext.data.Store", {
model : "MyApp.model.User",
proxy : {
type : "ajax",
url : "php/get_user.php",
reader : {
type : "json"
// rootProperty : "users"
}
},
autoLoad : true
});
The data is returned correctly but nothing is shown, and this I am trying to figure out.
The Response
[{"ID":"19","USERNAME":"Annet","EMAIL":"annet#annet.nl"}]
I skipped the rootProperty because it is a single user.
The Model
Ext.define('MyApp.model.User', {
extend : 'Ext.data.Model',
config : {
fields : [{
name : 'ID',
type : 'int'
}, {
name : 'USERNAME',
type : 'string'
}, {
name : 'EMAIL',
type : 'string'
}]
}
});
So, why does the list not show anything ?
Update
I check to see it the store contains data and it does
map: Object
ext-record-1: Class
_data: Object
EMAIL: "annet#annet.nl"
ID: 19
USERNAME: "Annet"
id: "ext-record-1"
__proto__: Object
Why is it not picked up by the list? I tried DataView as well.
You need to use itemTpl, i changed code for you.
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['Ext.List', 'Ext.data.Store'],
config : {
layout: 'fit',
title : 'Profiel',
iconCls : 'user3',
cls : 'home',
scrollable : true,
styleHtmlContent : true,
html : ['<h1>Mijn Profiel</h1>'].join(""),
items : [Ext.create('Ext.List', {
title : 'Profile',
docked : 'top',
itemTpl : '<div>{ID} <span> {USERNAME} </span> <span> {EMAIL} </span> </div>',
store : myStore,
show : function(list, opts) {
alert('list === ' + list);
console.log('List Shown: ' + list);
}
})]
}
});
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.
I am new to Extjs. I am facing this problem when I am trying to use combobox with a store that is populated through an AJAX call. I want the combobox to display the item that starts with the character typed in the combo box but the combobox is always showing the 1st item in the list.Here is my code,
Ext.define('fieldModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'name'
},{
name : 'value'
}]
});
{
xtype: 'combobox',
id: 'startField',
name: 'startField',
style: 'margin-right:10px;',
width: 230,
fieldLabel: 'Field',
labelAlign: 'top',
displayField: 'name',
valueField: 'value',
triggerAction:'query',
minChars:2,
//forceSelection:true,
//enableKeyEvents:true,
minListWidth:150,
//allowBlank:false,
queryMode: 'remote',
typeAhead: true,
//hideTrigger: true,
store:new Ext.data.JsonStore({
model: 'fieldModel',
//autoLoad: true,
//sortOnLoad : true,
//sortRoot: 'data',
proxy : {
type : 'ajax',
url: requesturl + '?action=getDate&itemid='+ preItemId,
reader : {
type : 'json',
root : 'data',
}
},
listeners :{
load : function( store, records, successful, operation, eOpts){
Ext.getCmp('startField').getStore().sort('name', 'ASC');
}
}
}),
Please help.
Thanks in advance.
change your listener to keypress or keyup event
keypress( Ext.form.field.Text this, Ext.EventObject e, Object eOpts )
This event only fires if enableKeyEvents is set to true.
listeners :{
keypress : function( text, event, eOpts){
Ext.getCmp('startField').getStore().sort('name', 'ASC');
}
}