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;
Related
I've been trying to figure out how to create and display a form inside of a Dialog using Dojo 1.7.
I want my dialog to look something like this:
All the samples I have seen do it using Markup, but none using AMD
When you create a dialog, you can use a widget (e.g. a form) as content. So, for example, you could do:
require([
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojo/domReady!"
], function(Dialog, Form, TextBox, Button)
{
var form = new Form();
new TextBox({
placeHolder: "Name"
}).placeAt(form.containerNode);
new Button({
label: "OK"
}).placeAt(form.containerNode);
var dia = new Dialog({
content: form,
title: "Dialog with form",
style: "width: 300px; height: 300px;"
});
form.startup();
dia.show();
});//~require
require() is provided by Dojo. It loads the dependencies (Form, Dialog etc) and then runs the given function which creates the widgets. However, because we include domReady! among the dependencies, Dojo makes sure the DOM is fully loaded and ready first.
Because I have dia.show() in that function too, the dialog will actually be shown as soon as the page is opened. Let's say you wanted to show the dialog when some button on your page is clicked instead:
require([
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojo/on", // Added this!
"dojo/domReady!"
], function(Dialog, Form, TextBox, Button, onEvent)
{
// ... as above, we create the dialog and form when the page loads
// but it remains hidden until we call dia.show() ...
form.startup();
// dia.show(); Commented out this!
onEvent(document.getElementById("someButtonOnYourPage"), "click",
function()
{
dia.show();
});
});//~require
Presently, a messagebox appears with the failing class name:
Is it possible to override the default behavior in Alfresco? Could we use forms service to present a different message ?
Additional to zladuric answer,
you can use failureCallback method to show message what you want.
But it is difficult to search failureCallback method of workflow forms for a new one because workflow forms such as "Start Workflow", "Task Edit", "Task Detail" are used form engine.
For example, in "Start Workflow" form, you can add our own successCallBack and failureCallBack by writing onBeforeFormRuntimeInit event handler in start-workflow.js like this.
onBeforeFormRuntimeInit: function StartWorkflow_onBeforeFormRuntimeInit(layer, args)
{
var startWorkflowForm = Dom.get(this.generateId + "-form");
Event.addListener(startWorkflowForm, "submit", this._submitInvoked, this);
args[1].runtime.setAJAXSubmit(true,
{
successCallback:
{
fn: this.onFormSubmitSuccess,
scope: this
},
failureCallback:
{
fn: this.onFormSubmitFailure,
scope: this
}
});
}
onFormSubmitSuccess: function StartWorkflow_onFormSubmitSuccess(response)
{
this.navigateForward(true);
// Show your success message or do something.
}
onFormSubmitFailure: function StartWorkflow_onFormSubmitFailure(response)
{
var msgTitle = this.msg(this.options.failureMessageKey);
var msgBody = this.msg(this.options.failureMessageKey);
// example of showing processing response message
// you can write your own logic
if (response.json && response.json.message)
{
if(response.json.message.indexOf("ConcurrencyFailureException") != -1)
{
msgTitle = this.msg("message.concurrencyFailure");
msgBody = this.msg("message.startedAgain");
}
else
msgBody = response.json.message;
}
Alfresco.util.PopupManager.displayPrompt(
{
title: msgTitle,
text: msgBody
});
}
Since Alfresco.component.StartWorkflow(in start-workflow.js) extends Alfresco.component.ShareFormManager(in alfresco.js). You can override onBeforeFormRuntimeInit event in start-workflow.js. I hope this your help you.
I'm not looking at the code right now, but this looks like a regular YUI dialog. So it's fired by YUI. So this YUI is client side, probably in My-tasks dashlet or my tasks page.
Furthermore, the error message looks like it is a status.message from the failed backend message/service.
You could probably locate that client-side javascript file, find the method that starts the task and see what its' failureCallback handler is. Then edit that failureCallback method and make it show something different then the response.status.message or whatever it is. Perhaps something like this.msg("message.my-custom-error-message"); which you then customize on your own.
Modifying YUI dialog scripts will might affect the other functionalities as well.
If we customize start-workflow. js, its only going to be achieved in start workflow form.
So as generic solution, below is the suggestion.
When alfresco is rendering the workflow form , it is rendering the transition button using the activiti-transition.js file.Basically this buttons are doing nothing more but submitting the workflow form.
So the best way would be , customizing this activiti-transition.ftl and activiti-transition.js file , to make an ajax call and handle the response as we want.
I just had a look on full flow of how this front end error is shown.
activiti-transition is submiting the workflow form.
Using a function named as submitForm which resides inside alfresco.js, it is invoking an submit event of form
Inside the forms-runtime.js file there is one function named as _submitInvoked(handles the submit event of form), which is responsible for making an ajax call and submitting the workflow form.If there is error while submitting , it will display the error which is from backend.
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);
}
});
}
}
}]
I am new with EXTJS 4 and this forum. Sorry if it's already discussed in another thread, but I didn't found it.
My question is, I want my Grid Panel with Pagination to update it's store every 10 seconds. I have found a solution using userStore.loadPage(current_page), but it has a problem.
Some time, updating Grid Panel nearly in same time with user click "next" or "prev" in Pagination. This make Grid Panel to not working properly. What I want is, when I click "next" or "prev" or "refresh", the previous request (userStore.loadPage(current_page)) is aborted. So it will not interfere my current request.
But I didn't found event in EXTJS Paging Toolbar to handle "next", "prev", or "refresh" button. What is the solution for this issue? Is there any way?
This is my code just for reference:
// create User Store
var userStore = Ext.create('Ext.data.Store', {
model: 'EDC',
autoLoad: true,
pageSize: 10,
proxy: {
type: 'ajax',
url : 'Monitoring', // it is using Java servlet, so I write it this way
reader: {
type: 'json',
root: 'edc',
totalProperty: 'total'
}
}
});
// create Grid Panel
Ext.create('Ext.grid.Panel', {
store: userStore,
width: 800,
height: 400,
columns: [
{
text: "ID",
width: 50,
dataIndex: 'id'
},
{
text: 'Serial Number',
flex: 1,
dataIndex: 'sn'
}
// etc...
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: userStore,
dock: 'bottom',
displayInfo: true
}]
});
It is how it is updated every 10 seconds
// after on Ready, reload every 10 seconds
Ext.onReady(function(){
self.setInterval("reloadCurrentEdc()", 10000);
});
// function for update
function reloadCurrentEdc(){
if(typeof userStore != 'undefined'){
userStore.loadPage(userStore.currentPage);
}
}
I think your problem is that your 'auto load' and your 'manual load' are so close together that your grid handles the result coming back from the first request as the second one.
I do agree with Alshten that the best way is to avoid requests that are so close together, you can do this by disabling the store load when there is already a store load in progress. but if you want your functionality I think you can do something like this:
listen to beforeload( Ext.data.Store store, Ext.data.Operation operation, Object eOpts ) event on the store, save the eOpts; listen to load( Ext.data.Store this, Ext.util.Grouper[] records, Boolean successful, Ext.data.Operation operation, Object eOpts ) compare the eOpts with the one you saved, if they are not the same, you know it's not the results you want.
You can have a look to the documentation about the paging toolbar component :
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging
There is a change which is fired every time the current page is changed, so it will be fired for "next" and "prev" click events. I haven't tried but I think it may be fired for "refresh" as well.
In my view, the best design would be to disable the buttons of the paging toobar (using the disable() function of this component) while the automatic reload is loading.
I use this selector: "gridpanel pagingtoolbar #refresh".
I'm able to use in my Controller classes in the init method mostly.
You can replace gridpanel with the alias or itemid of your grid.
.
.
.
init: function() {
this.control({
'gridpanel pagingtoolbar #refresh':{
click:function(){
console.log('grid panel', arguments);
}
}
});
},
.
.
.
Use
beforehange: function (tbar, pageData, eOpts) {
// here you can load data from server and load the data to store
return false // will avoid triggering store events
}
pageData is the page number
all button clicks like next/prev/refresh will trigger this function
I am having trouble identifying the particular value or ID of a submit button after it has been clicked and submitted using AJAX.
If I place the following code as a global function, it properly alerts the value of the button clicked:
$(":submit").live('click', function() {
alert($(this).val());
})
However, when I attempt to define the variable, I am unable to use that variable from within the success callback function:
$(":submit").live('click', function() {
var whichButton = $(this).val();
})
...
$("#applicant-form").validate({
function(form) {
$(form).ajaxSubmit({
...
success: alert(whichButton);
I have also tried placing the code in the submitHandler, but that doesn't work either.
In a somewhat related post, a user had suggested I place the following code:
$("#accordion .edit").click(function(){
window.lastButtonClicked = this;
});
...
submitHandler: function(){
var index_origin = $(window.lastButtonClicked).attr("name");
}
But I was not able to get that to get the value of the button clicked (it said that the value was undefined).
Any suggestions?
UPDATE: It might help if I provide more information about why I need to know which button is pressed. I have two kinds of submit buttons for each form in a multi-part form. I would like to do different things based on which button was clicked.
$(":submit").live('click', function() {
var whichButton = $(this).val();
})
The scope of whichbutton is inside of this anonymous function; you can't access it from elsewhere. A quick fix might be to declare whichbutton as a global variable but there's probably very few cases where you should do that. More context as to what it is you're trying to do would help, right now it just looks like you're trying to alert the button text on success after an ajax form submit.