All.
I found an old post on Sencha forum, mentioning store.loadData as the way to set new info into an array store.
This seems to work for a combobox but not for an itemselector as you can see in this fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2hu9
What's the right way to do it for an itemselector?
Thanks in advance
This seems to be a bug in itemselector, because the user that created itemselector did not anticipate that data can be brought into a store through other means than a pure load. Only a pure load fires the load event on the store, which itemselector listens to.
If you add the line store.fireEvent('load', store, store.getRange()); to the handler to fire the load event manually after loadData, itemselector starts working. There may be better ways to do this, for instance having itemselector listen to datachanged event instead of load event, but this is a quick workaround.
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 am using ExtJs 4.1 grid. I have enabled the remoteSort in the store & enabled sortable property for the columns. Everytime I sort\click on column header, a call is made to the server with sort params being passed in the query string.
I want to know if there is a client side event, which gets fired before call is made to the server? I want to check certain condition and based on that I may cancel the call to the server.
Please suggest.
There is a sortChange event that gets fired whenever you sort the grid.
See the documentation here.
I have created a fiddle demo that logs to the console every time the grid is sorted. It should help.
If that doesn't work you'd likely need to attach to the stores beforeSort or the refresh event.
EDIT: As the beforeSort event is not available for ExtJs Version 4, you'd likely need to listen to the refresh event:
Refresh: Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a widget that is using this Store as a Record cache should refresh its view.
I'm wondering why you need to put a object.on(event, callback, [context]) specifically within an initialize method in backbone, and not somewhere else?
Is it because the initialize method runs automatically -> and the listener starts to listen automatically for that reason?
A better way to design a backbone application is to separate data loading code and views construction.
This can be done by using a separate controller(A custom javascript object) that does the data load part i.e, initializing your models or collections. The controller loads the data (models/collections) necessary for a particular view.
The view instance is then created. Data required for the view can be passed as parameters to the view. One of the better ways is to pass it to use the initialize method which gets invoked automatically during the instantiation of the view.
Also we will expect the view to reflect the changes that model/collection undergoes. Its good to define what events of the model/collection that must be listened to in the intialize method since:
You know that it will be called for sure.
You know for sure that the event binding will be set, since you can reach a view from more than one way like thru a route or a click event on tabs for instance (though better designing is that you have a center piece of code which handles all the ways you reach a view).
Also set the rules for event bindings during the initialization itself.
You can also refer to the below link that talks about decoupling view from data loading.
Should the backbone router or view handle fetching data and displaying loading status?
I have a view where i have 3 links(routers which have methods triggering a View bound event).
Normally based on the link i click i reduce from the main collection a subset and render it in another VIEW.
But suppose i have clicked on a link say '....#/remaining' and then i click again on the same link, the event bound is not triggered.
But when i click on any other link and click back on the desired link, everything works!
Is this a Backbone feature/defect, if so what are the alternatives to work around this?
Thanks in Advance.
I think this is because you're doing the reduce in the Router. When you're already on #remaining, your route handler won't execute because there's no route change at all.
Instead of that, you could use a View UI event on the link to manipulate the collection, so it will always be called no matter if you're already on that route or not.
You could also use events as a communication method between your app's components: your data, your views, and so on.
Hope it helps, I didn't put any code because you didn't either. :)
I have simple grid with a store. When I add a record to a store it reflects on the grid. But on few occasions when toggle between browser tabs.
The store load event seem to fire from then on when I add a record to the store its getting added but it don't seem to reflect on the grid
How do I stop the extjs store load event from firing on its own?
Have you thought about adding the following config option to your store?
autoLoad: false