A grid is configured with a store that use a model that I can call modelA
I need to change on the fly the model of the store related to the grid.
I followed following approach without results:
grid.getStore().setModel(modelB);
grid.reconfigure(
grid.getStore(),
columns
);
grid.getStore().load();
It continues to use the model defined at the beginning. In fact if I debug the record that is passed to the renderer function as follows:
function(value, metadata, record)...
record continues to reference modelA instead of modelB.
How can I change dynamically the model of the store?
I think that although you set new model you haven't re-read the records, at least you do not show any store.load() call. Models are used by store/proxy/reader to create instances when the store is loaded.
Now, I wouldn't use this approach anyway. Store is not a very expensive in terms of performance or memory so if I'd need to reconfigure the grid I'd use another store with that another model.
To achieve this task, you can change fields of model dynamically instead of changing the model itself. Sample fiddle
store.model.setFields(fieldsArray);
store.load(); // or store.load(newData);
grid.reconfigure(store,columnInfo);
Hope this helps.
Related
I have a database with 10,000 items, to which you can add and remove while the app is running.
I have a ListBox that displays at most 100 items, and supports paging.
You can filter and sort on the 10,000 items, which needs to be immediately reflected in the listbox.
I have a button that randomly selects an item as long as it passes the filters.
What is the best set of collections/views to use for this kind of operation?
So far, my first step will be to create an ObservableCollection of ALL items in the database which we will call MainOC.
Then create a List of all items that match the filter by parsing MainOC which we will call FilteredList.
Then create a ListCollectionView based on the above List that holds the first 100 items.
CONS:
You have to recreate the ListCollectionView every time a sort operation is applied.
You have to recreate the ListCollectionView every time you page.
You have to recreate the ListCollectionView every time a filter is changed.
You have to recreate the ListCollectionView every time an item is added or removed to MainOC.
Is there a better approach that I am missing?
For example, I see that you can apply filters to a ListCollectionView. Should I populate my ListCollectionView with all 10,000 items? But then how can I limit how many items my ListBox is displaying?
Should I be doing my filtering and sorting directly against the database? I could build FilteredList directly off the database and create my ListCollectionView based off that, but this still has all the cons listed above.
Looking for any input you can provide!
This is a problem which is easily solved using DynamicData . Dynamic data is based on rx so if you are not familiar with the wonderful Rx I suggest you start learning it. There is quite a bit of a learning curve but but the rewards are huge.
Anyway back to my answer, the starting point of dynamic data is to get some data into a cache which is constructed with a key as follows
var myCache = new SourceCache<MyObject, MyId>(myobject=>myobject.Id)
Obviously being a cache there are methods to add, update and remove so I will not show those here.
Dynamic data provides a load of extensions and some controllers to dynamically interrogate the data. For paging we need a few elements to solve this problem
//this is an extension of observable collection optimised for dynamic data
var collection = new ObservableCollectionExtended<MyObject>();
//these controllers enable dynamically changing filter, sort and page
var pageController = new PageController();
var filterController = new FilterController<T>();
var sortController = new SortController<T>();
Create a stream of data using these controllers and bind the result to the collection like this.
var mySubscription = myCache.Connect()
.Filter(filterController)
.Sort(sortController)
.Page(pageController)
.ObserveOnDispatcher() //ensure we are on the UI thread
.Bind(collection)
.Subscribe() //nothing happens until we subscribe.
At any time you can change the parameters of the controllers to filter, sort, page and bind the data like follows
//to change page
pageController.Change(new PageRequest(1,100));
//to change filter
filterController.Change(myobject=> //return a predicate);
//to change sort
sortController .Change( //return an IComparable<>);
And as if by magic the observable collection will self-maintain when any of the controller parameters change or when any of the data changes.
The only thing you now have to consider is the code you need for loading the database data into the cache.
In the near future I will create a working example of this functionality.
For more info on dynamic data see
Dynamic data on Github
Wpf demo app
I'm trying to get an Associated Model (E.g. groups and associated users) from a store with:
Ext.each(this.getView().getSelection()[0].getAssociatedData().users,function(element){
var theuser = myStore.getById(element.id);
theuser.set('deactivated','true');
}
This works for the first 25 Users (id 1-25) however the store is filtered through a pagination plugin. In reason of the filtering with offset and limit the requested id isn't in the local store.
any idea on how to force the store to get the model from remote in case the id isn't available in the local cache?
Or is it anyhow possible to use the data from getAssociatedData, change something and write the record back through the writer proxy?
thx, I really appreciate your help!
The store's getById() method will only return the locally-available records.
If you want to retrieve a model, and you know the id already, you can simply do <model class>.load(id). (If the model is unknown, you can do myStore.getModel().load(id)
Note that the load method returns immediately, but it returns a stub - you'll want to use a callback to process the change to the deactivated field.
In ExtJS5, the Session support will help ensure that the models referred to in both the association store and your myStore object refer to the same model instance.
I am new to backbone and I am wanting to create a model without default values added to it. It is necessary for updates done through the AJAX to update only changed fields (Defaults would reset values here).
Any ideas? Is there a native way of doing it?
Try something like this, which will give you a distinct subclass you can use when you want a no-default version verses when you want to make a new record that does use defaults.
var MyModelNoDefaults = MyModel.extend({defaults: {}});
I'm trying to fix some issue with an ExtJs website but not sure how to proceed. Basically, I have a form that loads an Ext.data.Store model. For new models, the model object initially doesn't have an ID. Once it's saved an ID is assigned to it by the webservice.
The problem is that this Ext.data.Store model is not being reloaded after saving, so it stays without an ID, which causes some problems later on.
So is there any way to force ExtJs to reload the store model after saving? I checked the documentation of Ext.data.Store but cannot see any "reload()" or "refresh()" method. Any suggestion?
You don't need to do anything special. ExtJs has a logic to replace models with phantom flag with the new copies received from the store after update procedure. Chec couple things:
Make sure you have correctly specified idProperty in the model. This is how ExtJs will detect whether record is new or not.
Make sure your store returns properly new/updated records in the response message.
Make sure your data reader properly parses these records in the response message.
i am trying to follow this example here :http://www.sencha.com/forum/showthread.php?11735-How-can-I-ADD-to-baseParams-rather-than-overwrite-one-set-of-baseParams-with-another
The objective is to add parameters to your baseparams dynamically.
But when I submit request, I cannot see the parametrs added. What am I missing?
Every class extending Ext.data.Store has a setBaseParam() method that can be used for that.
If your store is for example in variable called store you do
store.setBaseParam('someParameter','value');
Probably the most common usage is in grids
grid.getStore().setBaseParam('someParameter','value');
similarily in remote comboboxes
comboBox.getStore().setBaseParam('someParameter','value');
for ExtJS4 you should do
comboBox.getStore().getProxy().extraParams.someParam = 'someValue'