I am new for extjs.
I am having one store in which i am having some data coming from json file.
I have created a form.
i want to save new data in that store through form.
How can I create button and submit form on that button's click?
please let me know.
Thanks in advance
If you're using ExtJS 4 and your form is bound to a 'model' instance, then you get get a reference to your model in your buttons click handler and call:
model.save();
Which will send a post request to the url defined as the proxy on the model class.
Post your code and perhaps we can be some more direct help.
In the API of ExtJS is a good example on how to create a Ext.form.Panel with a button. When you click on this button the form gets submitted.
This example doesn't work because it doesn't submit to a page but it is very configurable.
Snippet of the button+handler:
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '', //this is the url where the form gets submitted
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
Related
Created a form with button actions 'Approved' and 'Rejected' and selected workflow 'One step approval'.But after approving/rejecting the form status is still shown as 'New'.Is there anything missing from my side
You missed adding custom code for updating the action Type at the form Design. just adding the button from form design for update the Application Status . You need to define when to emit the customEvent with actionComplete Type example use the below for approved.
form.emit('customEvent', {
type: "actionComplete",
component: component,
actionType: "Approved" // action Type you need to pass
});
Click here to know more custom Events Available
Find a sample code from the Freedom of Information form given as a sample below which does a similar behaviour :
const submissionId = form._submission._id;
const formDataReqUrl = form.formio.formUrl+'/submission/'+submissionId;const formDataReqObj1 = { "_id": submissionId, "data": data};
const formio = new Formio(formDataReqUrl);
formio.saveSubmission(formDataReqObj1).then( result => {
form.emit('customEvent', {
type: "actionComplete",
component: component,
actionType: "data.actionType" // action Type you need to pass
});
}).catch((error)=>{
//Error callback on not Save
});
You need to choose custom Action on the button as shown:
I'm trying to run some js code before a AEM CQ Dialog submit event. I achieved it handling next event:
$(document).on("click", ".cq-dialog-submit", function (e) {
e.stopPropagation();
e.preventDefault();
//More code
$(this).closest("form.foundation-form").submit();
});
This works, but is skipping the AEM form validation and lets required fields to go empty.
Any idea to add an action just after the fields are valid, but to control when the submit must go?
Thanks!
You can try to use pre submit hook
$(window).adaptTo("foundation-registry").register("foundation.form.submit", {
selector: "*",
handler: function () {
// custom code
}
});
It will be executed before every TouchUI Dialog submit and after all validations
I want to use a save button with a form in extjs. This is what i have as a handler
{
xtype: 'button',
handler: function(button, event) {
var form = this.getForm();
if (form.isValid()) {
Ext.MessageBox.alert('Submitted Values', form.getValues(true));
}
},
height: 37,
id: 'configurationDriversSave',
text: 'Save'
}
All i get now in firebug is an error: this.getForm is not a function. What am i doing wrong?
in the handler this will be reference to the button itself. You can check that in firebug, button of course doesn't have method getForm(). You need to call something like 'this.up('form')`.
Second thing - you don't have to do manual validation like you are trying to do. ExtJs has built-in validation mechanism for the forms.
this.getForm
is not supported in Firefox,
use document.forms instead,
Or you can get any reference from this link too.
According to this blog post, you can simply use this.form to access the form element that contains the element that generated the event.
So, instead of
var form = this.getForm();
use
var form = this.form;
I'm investigating the suitability of the jQM history management for my organization's mobile web site. Part of our requirement is that when a user posts a form, it posts using Ajax. When a user taps "back" and then "forward" browser buttons, we need to re-post the form using Ajax again. Here's a diagram:
[home.php: post to new.php] =>
[new.php: post to list.php] =>
[from list.php, click back twice to home.php] =>
[* home.php: click fwd, does a GET request to new.php *] =>
[* new.php: click fwd, does a GET request to list.php *]
[*] not the behavior I want. I want to re-POST data from steps 1 and 2
During steps 4 and 5, I want to intercept the jQM execution at the "pagebeforeload" event (seems like the right place), and modify the data.options.data (to include the serialized post data) and data.options.type (to POST) properties of the data object which is passed to the event handler. Then I'd let the pageload process move on with the modified values. This, I think, would give me the behavior I want.
So far, I see that I can intercept the pagebeforeload event and modify the values with the below event handler:
$(document).bind("pagebeforeload",
function( e, data ) {
console.log(data.toPage);
console.log(data.options);
data.options.type = "POST";
data.options.data = "edit=Hanford";
}
);
But the missing piece is, how can I "store" the information in steps 1 and 2, such that when I intercept the pagebeforeload event in 4 and 5, I can know to modify the "type" and "data" properties properly.
I've made a jquery/browser History prototype to illustrate the behavior I would like to get from jQuery Mobile. The JavaScript is:
$(window).load(function() {
//listen to the history popstate event
$(window).bind('popstate',
function(e) {
if (e.originalEvent.state && e.originalEvent.state.type && e.originalEvent.state.type == "post") {
//do an ajax post based on what is stored in history state
$.post(e.originalEvent.state.path,
e.originalEvent.state.data,
function(data) {jaxer(data,'POST')});
} else if (e.originalEvent.state !== undefined){
//do an ajax get
$.get(location.pathname,
function(data) {jaxer(data,'GET')});
}
});
//add event listeners
addClickHandler();
});
function jaxer(data, msg) {
if (msg) {console.log(msg+' request made using ajax');}
$('#slider')[0].innerHTML = data;
addClickHandler();
}
//hijax hyperlinks and form submissions
function addClickHandler() {
$('a').click(function(e) {
history.pushState({
path: this.path
},
'', this.href);
$.get(this.href,
function(data) {jaxer(data,'GET')});
e.preventDefault()
});
$('form').submit(function(e) {
var formData = $(this).serialize();
console.log('saving serialized form data into historyState: '+formData);
history.pushState({path: this.action, data: formData, type: "post"},'',this.action);
$.post(this.action,
$(this).serialize(),
function(data) {jaxer(data,'POST')});
e.preventDefault();
});
//add the form submit button to the form as a hidden input such that it will get serialized
$('form input[type="submit"]').click(function() {
$(this.form).append("<input type='hidden' name='" + this.name + "' value='" + this.value + "'/>");
});
console.log("event handlers added to DOM");
};
When a user-initiated POST occurs, I put the serialized POST data into the history's state object. Then, when a popstate event occurs, I can query the state object for this information. If I find it, then I can perform an ajax POST. I would like to get the same functionality within the jQuery Mobile history handling. That way I can take advantage of the page change animations, etc.
I m having a page with two date fields and a dropdown... based on the values selected from those fields i have to call a server method which fetches the data and then bind the grid.. how is this possible using jquery grid... currently i know that i can call $("#list").jqGrid({}); on a button click which is inside a function... but the problem is that i want to pass additional parameters also...
$(function() {
$('#someButton').click(function() {
// when the button is clicked
// send an AJAX call to the server to fetch data:
$.ajax({
url: '/home/someaction',
data: {
// Use the data hash to send values to the server action
date1: $('#date1').val(),
date2: $('#date2').val(),
ddlValue: $('#ddl').val()
},
success: function(result) {
//TODO: setup jqGrid here based on the results
// returned from the server action
}
});
});
});