I am new to Extjs4.1. I need to edit the grid data cell and edited value saved while pressing save button in grid toolbar. Its working nice. But changes are not reflected immediately.
When I press save button, the updated cell having old value. I need to click search button to see updated values.
I called store.load(); inside the saveFunction() and I can able to store edited values in DB. But the Grid is not displaying the updated values immediately in IE9.
Please someone help me to solve this issue.
Thanks in advance.
I have finally got the ans. I just loaded the store in ajax success
success: function(response, options) { store.load(); }.
Thanks all.
Related
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
I have a problem with Angular UI-Grid (http://ui-grid.info/). Grid is implemented in modal window that appears after user clicks button.
Service works that way: User selects data set to prepare and clicks button. After clicking button website sends request to rest service to receive data. After receiving data modal with table is shown. Columns count depends on data requested by user.
The problem is that after user changes columns width and close modal with this table UI-Grid 'remembers' this column width that user left. If then user will select another set of data I am cleaning GridOptions object and fill it once again after data is received. The problem is that row width stays in previous state.
I tried so far:
using apis core.refresh() method - while debugging I can see that this
method fires some event but no effect on my grid,
remove whole DOM node and append it again before receiving response with new data
various different hacks trying to use many methods found inside grid api - no success at all.
I am sorry that I am unable to reproduce this in any fiddle but it would be really difficult I am afraid to match my case.
Any help would be very appreciated. Thanks
ps. it also applies to my another table where user can pin and hide columns. Pinned/hidden columns remains hidden/pinned after receiving brand new data. And it is not cool.
Once you set the data to the grid, you should be calling this -
gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)
From the docs,
Notifies us that a data change has occurred, used in the public api
for users to tell us when they've changed data or some other event
that our watches cannot pick up
notifyDataChange tells the framework that one of the options or columnDefs has been changed.
Checkout this thread
I have a search button that triggers Ajax request to fetch data from DB. When the promise is resolved I populate gridoptions.data. The grid is rendered in the screen.
I make some changes in the grid, like hide some columns, enter something into the header filters, change sort order etc.. When I hit the search button again, the data is fetched again and grid is updated with that data but the grid layout remains as is, all the the changes I made earlier in place..
I need to intialize the grid every time I hit search button... I tried redefining gridoptions.columnDefs but that didn't work..
Suggestions please.
Try:
$scope.gridoptions = {} as the first line in the search function, instead of just clearing the columnDefs.
I am new in Extjs and stuck at one point where I want to remove 2 items from the combo store which should reflect in the combobox. Strange thing is that when i put alert message above the following code it refreshes the combobox with those items removed, but not when this alert removes.
//alert('test');
var decTypCombo=Ext.ComponentQuery.query('#ddlDecisionType')[0];
decTypCombo.store.remove(decTypCombo.store.getById(16));
decTypCombo.store.remove(decTypCombo.store.getById(17));
decTypCombo.lastQuery=null;
Please let me know if I am doing wrong somewhere thanks.
Ensure that queryMode is set to 'local'.
I have a form with a save, clear and reload button. The clear button works by clearing the form, using the reset method. But on clicking, the reload button, the form should be loaded back with the data that was typed in the form before clicking the clear button. So, how could this be done? Thanks in advance.
Check out loadRecord() method:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-loadRecord
Take a look at the form's getValues() and setValues() methods. When the clear button is clicked, you can use var oldValues = form.getValues() to store the current field values. Then when the reload button is clicked, you can restore the values via form.setValues(oldValues).