I have created a form and am trying to send its contents to a server. I used the forms example from sensa.com as a template. The form sends a message to my server, but only with my the disable caching value and not any of the form values, for example [url]/register?_dc=1829384859324 . I also modified the example to use my server url and my server received the same type of request with only _dc=... from the example.
Is there some explicit way I have to list the fields I want sent to the server?
My form code is listed below. When I call submit, I use form.submit({method: 'get'});
var formBase = {
scroll: 'vertical',
url : 'MYURL/register',
standardSubmit : false,
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {required: true,labelAlign: 'left',labelWidth: '40%'},
items: [
{ xtype: 'textfield',name : 'first',label: 'First Name',useClearIcon: true,autoCapitalize : false
}, { xtype: 'textfield',name : 'last',label: 'Last Name',useClearIcon: true,autoCapitalize : false
}, { xtype: 'passwordfield',name : 'password',label: 'Password',useClearIcon: false
}, {xtype: 'textfield',name : 'phone',label: 'Phone Number',
}, {xtype: 'emailfield', name : 'email',label: 'Email',placeHolder: 'you#email.com',useClearIcon: true
}]
}],
listeners : {
submit : function(form, result){
console.log('success',Ext.toArray(arguments));
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
}
I've just started using Sencha Touch myself, but I'm posting my form a bit different. I've created a submit button, and given that button a handler. The code that gets executed is the following:
this.loginView.submit({
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function(form, result) {
Ext.Msg.alert('Login succeeded!', result.response.reason);
},
failure: function(form, result){
Ext.Msg.alert('Login Failed!', result.response.reason);
}
});
In which this.loginView refers to an Ext.form.FormPanel object (I'm separating controller-code and view-code, which I highly recommend!). Another method you could try is create your own AJAX request (using Ext.Ajax.request) and retrieve your form params using the getValues(); method from the FormPanel object.
I hope it helps!
You have to set the form property standardSubmit to true.
This post is quite old, but there might be others having similar issues with form submitting.
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'm looking at an older project that is using ExtJS. Admittedly, I'm not too familiar with this framework so I learn as I go and as I am asked to fix things. My issue is that there is a grid and each column uses allowBlank: false. This causes a tooltip box to display with some info about what field(s) need to be populated. This all works great, but I am trying to change that text in that tooltip i.e. "Error", "Benefit Category Name: This field is required", and I can't seem to make this work. How can I target and change that text? I'll include a screenshot of the grid and tooptip that I am talking about for reference. I am also using ExtJS version 6.
Here is a sample of one of the grid columns:
columns: [
{
dataIndex: 'benefit_category_name',
text: 'Benefit Category Name',
flex: 1,
editor: {
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: [
'benefit_category_id',
'benefit_category_name',
],
data: [],
}),
queryMode: 'local',
valueField: 'benefit_category_name',
displayField: 'benefit_category_name',
emptyText: 'Select one',
listeners: {
select: 'handleComboChange',
},
itemId: 'benefit_category_id',
allowBlank: false,
listeners: {
renderer: function(value, metaData) {
metaData.tdAttr = Ext.String.format('data-qtip="{0}"', value);
return value;
}
}
}
},
{
...
}
]
I tried to use the metaData property I read about in some other posts, but I can't seem to change the tooptip text (Error, Benefit Category Name: This field is required).
Here is a screenshot of the tooltip mentioned. I know this is an older framework, but any tips I could get would be useful. Thanks for your time.
Thats a simple validation example with custom message.
Ext.create({
xtype: 'textfield',
allowBlank:false, // will show required message - remove key to display vtypeText only
validateBlank: true,
vtype: 'alpha', // check for available types or create / extend one
vtypeText: 'Please change to what you want ...',
renderTo: Ext.getBody()
})
Details:
https://docs.sencha.com/extjs/6.5.3/classic/Ext.form.field.VTypes.html
https://fiddle.sencha.com/fiddle/3770
I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/
Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable
I am working in a sencha touch ap and I need to generate views with dynamic forms.
Configuration comes from the backend (JSON) and depending of this I paint a component or other.. for example:
"auxiliaryGroups": [
{
"id": "1000",
"name": "Basic Data",
"fields": [
{
"id": "1001",
"name": "Company name",
"editable": true,
"mandatory": true,
"calculation": true,
"internalType": "T",
"type": "textfield",
"options": []
}
]
}
],
Where type is related xtype in Sencha.
In the view I am creating all options of fields:
{
xtype : 'fieldset',
itemId: 'auxiliaryFieldsGroup3',
title: 'Requirements',
//cls : 'headerField',
items:[
{
xtype: 'togglefield',
name: 'f6',
label: 'Auxiliary field R1'
},
{
xtype: 'selectfield',
name: 'f10',
label: 'Auxiliary field R5',
placeHolder: 'Select one..',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},
{
xtype: 'textfield'
}
]
}
And I receive the configuration from the server, I understand the view like a store of different fields, and from the controller, it should add only fields specified in the json object.
How to create this dynamically following MVC concept?
Thank you
I assume that you have all the fields in the auxiliaryGroups.fields array.
After loading the form data from AJAX you can do it like this in your success call.
succses:function(response){
var response = Ext.decode(response.responseText);
var fields = response.auxiliaryGroups.fields;
var form = Ext.create("Ext.form.Panel",{
// here your form configuration.
cls:"xyz"
});
Ext.Array.forEach(fields,function(field){
var formField = {
xtype: field.type,
label: field.name,
name: field.id
};
form.add(formField);
});
Ext.Viewport.add(form);
form.show();
}
Based on my comment on your question, my idea about dynamic form generation is using ExtJS syntax to load form definition would be something like the code below; of course it would be extended and the data can be loaded from the server.
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var data = [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}];
var form = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
}
});
form.add(data);
form.render(document.body);
});
update:
When you create a view in run-time, communication between view and controller might be problematic because the controller doesn't know anything about the view. considering that the controller is responsible for initializing the view with appropriate data and handling view's events, data binding mechanism in ExtJS can solve the first part (initializing the view) which is described at View Models and Data Binding, the second part (handling view's events) can be solved with general methods in the controller, every element in the view should send its event to some specific methods and the methods based on the parameters should decide what to do.
This approach makes your methods in the controller a little fat and complicated that is the price of having dynamic form.
It is worth to mention that EXTJS raises different events in the life cycle of controllers and views and you should take benefit of them to manage your dynamic form.
I don't know about Touch, but in ExtJS, I usually do it by using the add function of a fieldset. You just loop through all your records, and create the fields on the fly.
var field = Ext.create('Ext.form.field.Text'); //or Ext.form.field.Date or a number field, whatever your back end returns.
Then set correct config options on field then
formFieldset.add(field);
I have strange problem with loading form panel with json request response.
In previous projects I used to load detail panel from grid store by using loadRecord(record)
The store has associated model so record's embedded objects are mapped to model's properties and form renders those fields without any problem.
Once I had to load form directly with response from form.load() I can't see properties from record's embedded objects.
For example from json
{
"message":null,
"success":true,
"data":{
"code":"1",
"name":"Canon Canada",
"modifiedBy":null,
"modifiedAt":null,
"address":{
"street":"6390 Dixie",
"suite":null,
"city":"Mississauga",
"provinceCode":"ON",
"postalCode":"L5T1P7"
},
...
}
}
I see rendered 'code' and 'name' properties, but not 'street' and 'city'.
Here is form.Panel code
Ext.define('App.view.billto.BillToDetailForm' ,{
extend : 'Ext.form.Panel'
,layout: 'form'
,alias : 'widget.BillToDetailForm'
,autoHeight: true
,bodyPadding: 10
,fieldDefaults: MainAppViewConfig.fieldDefaults
,defaults: {xtype: 'fieldcontainer',layout:'hbox', anchor: '100%'}
,items : [ { defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'code', fieldLabel:'Bill To Code'}
,{name: 'name',fieldLabel: 'Name'}]}
,{ defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'address.suite', fieldLabel:'Suite'}
,{name: 'address.street', fieldLabel:'Street'}]}
...
]
,loadContentForCode: function(code){
//this.getForm().trackResetOnLoad = true;
this.getForm().load({ method: 'GET',url: 'billtoDetail',
params:{'code':code},
waitMsg: 'Loading...',
/*success:function(form, action) {
console.log('BillToDetailForm:loadContentForCode callback on success '+this);
var responseObj = Ext.JSON.decode(action.response.responseText,true);
var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
form.loadRecord(billToModel);
}*/
});
}
});
As you can see I even did unsuccessful attempt to reload form in success handler.
Also I have noticed that var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
hasn't properly populated model's fields 'street' and 'city'. That's also might be the cause of the problem.
Ext.define('MPS.model.BillToModel', {
extend: 'Ext.data.Model'
,idProperty:'code'
,fields: [
{name: 'code', type: 'string'},
{name: 'name', type: 'string'},
{name: 'street',mapping:'address.street', type: 'string'},
{name: 'city', mapping:'address.city', type: 'string'},
...
]
});
Could you please point the real cause of the problem or advice any solution.
Thank you.
I just made fiddle for you. Take a look how it is working and try the same with your code:
Sencha Fiddle - How associated data works
If this something that you are looking for just mark as answered.
I want send a text field data to a servlet page. I dont know the process. I give the code for textbox and a button below.
Ext.onReady(function(){
var movie_form = new Ext.FormPanel({
renderTo: document.body,
frame: true,
title: 'Personal Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
},{
xtype:'button',
text:'save'
}]
});
});
This is the code ofr a textbox and a button. when i click the button the data of the field will go to a servlet page. But I cant do that. Please any one help me. the name of the servlet page is url_servlet
in your service method (get or post )
you can get your data field values by the attribute "name".
String firstname = reg.getParameter("firstname");
For handling the data in the backend check #The Suresh Atta's answer.
I found some errata in your code:
1) Construct an Ext component with the Ext.create function.
2) Use Ext.getBody() to get the document body.
3) Put your fields in the items config and buttons in the buttons config (Not always the best practice).
Ext.create('Ext.form.Panel', {
frame: true,
title: 'Personal Information Form',
width: 250,
url: 'url_servlet',// The form will submit an AJAX request to this URL when submitted
items: [{
xtype: 'textfield',
fieldLabel: 'Firstname',
name: 'firstname',
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Console.log('Success', action.result.msg);
},
failure: function(form, action) {
Console.log('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
I hope this helps you a bit ;)