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'}
]
},
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
},
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'
}
]
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');
}
}
I have a combo box with list a set of values,
Ext.define('loincList', {
extend: 'Ext.data.Model',
fields: [{ name: 'loincNumber', mapping: 'loincNumber' },
{ name: 'component', mapping: 'component' }
]
});
ds = Ext.create('Ext.data.Store', {
model: 'loincList',
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/LOINCData/getLOINCData',
reader: {
type: 'json',
root: 'LOINCData'
}
}
});
combo box:
{
xtype: 'combo',
fieldLabel: 'Search Loinc Code',
name: "loincId",
displayField: 'loincNumber',
valueField: 'id',
width: 400,
store: ds,
queryMode: 'local',
allowBlank:false,
listConfig: {
getInnerTpl: function() {
return '<div data-qtip="{loincNumber}.{component}">{loincNumber} {component} {status}</div>';
}
}
}
when i type a number in the combo-box it filter based on the number entered but when i type a text ,it is not filtering based on text entered.How to filter based on text entered.
When you type the data to the combobox, it will filter based on the displayField. So I think when you "type a text it is not filtering based on text entered" because no items in the combo has displayField with prefix like the text you typed.
Filtering is working on server side, if you will switch on something like Firebug, you will see special param (usually named filter) with text you typed in control, So you need to check what happen on your server-side. You need to handle with filter text and make filters as you want on server-side.