I am using Extjs 4 with Designer 1.2.0. I am using Row Editing Plugin within the grid Panel.
I have observed that canceledit Event is not fired on the row-editor.
What could be the best possible solution for that ?
Any Suggestion??
in extjs 4 row editing plugin doesn't have an event for canceledit. In extjs 4 stores are closely related to grids so if you cancel edit for the record in cause is caller reject() and the store doesn't change...
This works for me,
in your grid panel view:
this.myRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2});
this.myRowEditing.on({
scope: this,
canceledit: function(pRoweditor, pChanges) {
this.fireEvent('canceledit', pRoweditor, pChanges);
....
}
});
This is the solution I found to catch the 'canceledit' event from a controller.
Related
I am using wbraganca dynamic forms.I am setting the limit to 10, so only 10 forms can be added dynamically. Now I want to disable the add button when the limit of 10 forms is reached.
How can I do that ? please help anyone.
I have gone through the documentation of wbraganca dynamic form.In there I have seen a JavaScript event gets called when the limit is reached.
$(".dynamicform_wrapper").on("limitReached", function(e, item) {
alert("Limit reached");
});
Also I have seen the class used for insert button in the example given there is
'insertButton' => '.add-item', // css class name given by default
So if you need to disable insert button when the limit is reached,the straight forward solution it seems is
$(".dynamicform_wrapper").on("limitReached", function(e, item) {
// I assume plugin doesn't disable button by default on reaching limit
$(".add-item").prop('disabled', true);
});
Source
https://github.com/wbraganca/yii2-dynamicforme
I am having a couple of problems with my SpinnerField in GXT 2.0. First it is showing doubles when the user changes 1.0,2.0 I need it to show Ints 1,2,3 etc.
Second, for the life of me I cannot figure out how to add a change listener to it. Like user makes a change it pops up an alert with the value: just for demonstration purposes.
I have looked through the documentation but cannot find the answer.
try adding this to spinner field :
spinner.setFormat(NumberFormat.getFormat("0"));
spinner.addListener(Events.KeyPress, new KeyListener() {...});
spinner.addListener(Events.Change, new Listener<BaseEvent>(){...});
I will add:
maxNumberMsgField = new SpinnerField();
maxNumberMsgField.setFieldLabel(FeedbackAuthoringStrings.MAX_NUM_MSGS_PROV_LABEL);
maxNumberMsgField.setIncrement(1);
maxNumberMsgField.getPropertyEditor().setType(Integer.class); maxNumberMsgField.getPropertyEditor().setFormat(NumberFormat.getDecimalFormat());
maxNumberMsgField.setMinValue(1);
maxNumberMsgField.setMaxValue(20);
I have created a extjs form which is divided into 2 parts using column layout and have almost 10-15 input elements in it. How can i disable all these input elements at a time depending on a condition. Currently i have created a function which fetchs all the components in a form and using ext.each loop through each element to disable them
Here is the function that i use
function prepare_form_view(form){
var f=Ext.getCmp(form);
var els=f.query('component');
Ext.each(els,function(o){
var xtype=o.getXType();
if(xtype=='textfield'||xtype=='combobox'||xtype=='datefield'||xtype=='textareafield'||xtype=='button'){
o.disabledCls='myDisabledClass';
o.disable();
}
});
}
Is there any alternative way so that I can disable all elements without looping through each and every elements. I want to use this function with other forms too. I looking for something like 'setFieldDefult' function.
If you are using FormPanel in ExtJs 4.x this is what you are looking for -
yourFormPanel.getForm().applyToFields({disabled:true});
The getForm() method returns the Ext.form.Basic object, with this class, you also could access to all the fields on this form with getFields(), then you could iterator all the fields to do anything.
Hope this helps and good luck:-)
What about panel's disable/enable method? This seems much easier.
panel.disable();
panel.enable();
Here is a suggestion.. Since, you say your form is divided into two parts why don't you put them in a FieldSet ? You can disable the fieldset as a whole with one method ie, setDisabled.
This will avoid the looping of components and disabling / enabling them one after the another.
You could use the cascade function of the form panel which is the ExtJs way to to do it but if you check the source code of the cascade function you will see that it uses a for loop also. The only benifit of using the cascade function is that it will work also for forms with nested panels. I think that your implementation will not work properly a case like that.
As I have an editor-list, that needs to have additional edit lines, I found this solution for the problem:
Mvc list editor by Stevens Anderson
this works perfectly, excepts that every time when I add a new line, the whole Form is set back to the default values. You can see the behavior in the demo of the linked page.
Try to edit the value of an input box and then add a new line without saving.
Why isn't it possible just to add a new editor line, without changing any data.
Ok, I've found a workaround
Instead of using the Html.AjaxLink I am now using a custom JavaScript function with jQuery
function newProjectExpenseRow() {
jQuery.get("/Controller/Action", function (response) {
$(response).insertBefore("#id");
});
}
it now gets the Control from the controller/action and inserts the result before the #id element
My situation is: Im making a simple inbox page. The inbox is a listing made from a DevExpress grid. Each row in the grid has a checkbox that the user can check so that they can multi delete records (similar to yahoo mail etc).
When the user clicks the select all link or the clear all link i need to set all the checkboxes within the grid to be checked or unchecked. How do I go about this with client-side scripting? Thanks
The easiest way to do this is to use jQuery. With the right selector it's pretty much a one liner. I don't know how much you know about jQuery so here's a link to the selector docs if you want to read up:
http://api.jquery.com/category/selectors/
The selector will depend on the layout of your page. I've done it before using something like this:
$("#tableId tr td input:checkbox").attr("checked", true);
In this example all checkboxes within a table with an id of "tableId" are checked
Using jquery it should be pretty easy- assuming you can use one of the selectors to select all of the checkboxes (take a look at the different jquery selectors http://api.jquery.com/category/selectors/).
Attach a toggle handler:
$('Selector for the "select all" checkbox>').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
Select all checkboxes and when toggled switch the checked state of the other checkboxes:
$('<Selector for the ones you want to toggle>').attr('checked', true);
Provide some sample HTML, or a link to a page, if you need further help.
So putting it together, assuming your "select all" checkbox had an ID of "uxSelectAll" and the ones you want to change have a CSS class of "checkbox-mail-items" it would be something like:
$('#uxSelectAll').toggle(function() {
$('.checkbox-mail-items').attr('checked', true);
}, function() {
$('.checkbox-mail-items').attr('checked', false);
});
you can create a delegate (jquery) for all the checkboxes once you've done the answer above. with something like to perform an action for each check box:
$('div.myGridDivClass tbody').delegate(':checkbox', 'click', function(){
var $checkedRow = $(this), $row = $checkedRow.closest('tr')
// check row is checked
// toggleclass for checked css class and apply to the $row or whatever u want
// do something here
});