I have a problem with comboboxes on my form.
The problem is that when I load form data (with form.loadRecord) sometimes comboboxes are empty even though I know that the model has the data.
When I look into Firebug I can see that the combobox stores are loaded after the record has been loaded. I thinks this is the reason – the combobox stores are loaded later then record is loaded.
This is how I set combobox stores:
//All stores have autoload:true configuration.
var possessionGroundsStore = Ext.create('path.to.store');
var vehicleTypesStore = Ext.create('path.to.store');
var usePurposesStore = Ext.create('path.to.store');
this.editView = Ext.create('path.to.view');
this.editView.getPossessionGroundsField().store = possessionGroundsStore;
this.editView.getVehicleTypeIdComboBox().store = vehicleTypesStore;
this.editView.getUsePurposeField().store = usePurposesStore;
//later
this.editView.loadRecord(record);
Is there a common way to solve this problem?
The only way I can see now is to use store.load callbacks in every combobox store
and then execute loadRecord after all stores were loaded, but it seems complex.
Any help?
UPDATE:
When form.loadRecord is called it internally calls field.setValue().
So, the point is: combobox store have to be populated before setValue is called.
If the store is not loaded you will see valueField instead of displayField.
The default config for comboboxes will trigger a store load when they get expanded for the first time after being created.
That will happen for any combobox unless you give it a queryMode: 'local' config. In other words the default combobox config almost always completes loading it's store after the component is created. For that reason, it seems strange to me that your combos are having a hard time with being loaded too late, maybe they are being loaded too early with autoLoad: true
However, I don't run into the same problem you have because I usually set-up my comboboxes with queryMode: 'local' and pre-load the stores for them right at the app initialization stage. I do that because my combo stores are usually all reference stores that could get used in many different views in my app. I don't recreate the store when I create a combo component, I just get a reference to the already existing and loaded reference store with Ext.getStore('ComboStoreId'). You could try setting up your app like that.
If you don't want to do that, you could also try removing the autoLoad: true config from your combo stores, then call yourComboStore.load() after you call loadRecord.
Related
I have an issue with Extjs remote filter that I excpect you could help to clarify.
I've created a grid with a remote filter that works great, but if I update the grid info, the filter keeps the previous loaded data.
I've tried everything: store.doDestroy, store.removeAll, even assign a new store to the var with Ex.create, but I didn't succeed.
I've created a Fiddle to try to reproduce my issue:
First load default info (Simpsons)
Then open the 'Hobbie' filter (Simulates a select distinct). You get Jazz, Skate, Beer and Knit.
After that, update the grid data (Switch to Van Houtens)
Finally, try to get Van Houtens hobbies (Videogames, Margaritas and None), but you get Simpsons Hobbies (Jazz, Skate..), cause the filter was previously loaded. (Notice how there was not a loading mask).
Now restart the test skipping step 2 (and 5 to avoid infinite loop XD) and notice how the right hobbies are shown.
I need to 'reset' that previous store load.
Notes:
If I just do a store.load, the request is triggered, but the returned values are not bound to the filter list.
If try to bind the store with this bind:{store:'{filterStore}'}, noting happens
You just need to "rebind" the filters for each column like this:
var grid = this.up('grid');
//Clear the current filters before changing
grid.getPlugins()[0].clearFilters();
var store = grid.getStore();
setStoreFilter(store, 'Van Houten');
//Setting the store filters is not enough
setStoreFilter(filterStore, 'Van Houten');
setStoreFilter(hobbiesStore, 'Van Houten');
//You need to "rebind" the store, it needs a little delay to work properly
setTimeout(function(){ grid.getColumns()[3].filter.bindMenuStore(hobbiesStore); }, 1000);
Here is the updated FIDDLE
I am fairly new to using Ext JS 4.0.7, and have recently discovered the Config options, so I have set up the following config class, which initialises with the following:
Ext.define('CurrentRowSelection', {
extend: 'Ext.app.Controller',
config: {
currentAccountID: {
$value: 'Empty',
cached: true,
evented: true
}
},
initialize: function(config) {
this.callParent(config);
}
});
I am able to update this config quite nicely from another class's listener event, which is right clicking on a row record and grabbing the currentAccountID value. However, every time I try to access the new, updated, config from a new class after initialising - it keeps reverting back to the 'Empty' value.
The following is used to set the config from the class containing the listener:
var CurrentRowSelection = new CurrentRowSelection();
CurrentRowSelection.setCurrentAccountID(1);
However, when I create a new constructor in a new class, with the hope of accessing this newly updated config from elseware, my console.log is telling me that it is continuously reverting back to the default values, as it seems to be initialising each time a new constructor is created - which makes sense, but I need to stop it.
How can I do thisand make sure that this value is saved all the time, every time? Thank you.
Don't make new controllers every time. Every controller should be instantiated only once, because if you instantiate multiple controllers of the same type, every event binding you prepare in the control method is executed multiple times (the control method usually is the most important method of a controller, although there may be exceptions.)
So every controller should exist as a single instance only, and that singleton would be accessed using getController wherever and whenever you need it:
MyAppName.app.getController("ControllerName").setCurrentAccountID(1)
That said, I would recommend to look into using stores for data storage, not controllers. Stores offer the possibility to synchronize the settings with a server (create, read, update, delete). If you want to create a singleton store, you would give it a storeId and use Ext.getStore() to access the store.
For example, the config settings in my application are in the first record of the store with storeid AllSettings:
Ext.getStore("AllSettings").getAt(0).get("groupDiscoveryCacheHours")
I'm building an application using Ext Js MVC approach.
I have a couple of combos on different views bound to one store. The store is set to query: remote and autoLoad: false and loads its data from server.
The problem every time I change the view (the old view is destroed) and expand the combo, the store will reload its data. Is there any way to force the store to load its data only once ? When the store is once loaded it will not reload it again even the bound combo is destroed.
There are ways to do this on the combobox itself but I think the easiest way for you is to subscribe to the load event of the store and check if the store contains records, if so abort the loading.
store.on('beforeload', function(s){
return !s.count() > 0;
});
In my application, I´m creating several modal windows which contains a form and an editorgrid. In order to re-use the components, I´ve created the combos, fieldtext, checkbox and other stuff as variables, and only add the necesarry to each window. One of those variables is an editorgrid, xtype: 'editorgrid', and there is the issue:
If I add the variable myEditorGrid to the panel, it works OK the first time I open the window, but the second time that any window has to render the same editorgrid, then the fields cannot be edited any more.
If I create the editorgrid inside the panel (and don´t use the variable), then it works OK everytime I open the window, but I need to copy&paste the same code over and over to all the windows, and that´s not very professional.
I thought the problem is that the variable is not destroyed, and made sure that the windows is closed, but I don´t know how to destroy the variable, and even if this is the solution.
Any idea?
Thanks
You can't reuse an EditorGrid in this manner, because it's column model gets destroyed after use.
The best way to reuse a component is to use the Ext.extend method described here, and then in your initComponent have something like..
initComponent : function() {
this.cm = new Ext.grid.ColumnModel({
columns: [
//define columns here
]
});
this.ds = new Ext.data.JsonStore({
//store config
});
//...
}
I have several extjs components in my page, the chart, gird ,formPanel and ect, and now I meet some problems about the refresh of them, take the gridPanle for example:
This is the grid codes:
var myStore=new Ext.data.JsonStore({
autoLoad:true,
fields:['name','age'.....]
});
var grid = new Ext.grid.GridPanel({
stroe:myStore,
colums:myColumns
//....other config
});
When the reload event of the stroe if acted(Triggered by user),the store will get new data from the server side, the the grid panel refresh, this is fine,
however sometimes the data from the server is null(for example, there is not data found according to the request from the client),if so, the grid panel also hold the data of last requst,
how to make the grid refresh (show nothing) and show something to user that no data found?
So are other components in my page,most are some charts.
I have thought use add a handler to handle the event of the refresh of the component,before it refresh, check the store, if the store is null, then do something,howeverI found that I can not get the store of a component,also their event are different,for eample:
For the GridPanle,there is a event of beforerender
http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel
For a chart, there is a event of beforerefresh
http://dev.sencha.com/deploy/dev/docs/?class=Ext.chart.Chart
So use the render or refresh?
Any ideas?
a "null" response from the server should generally be considered an error.
In your grid example, if nothing matches, there should be some representation of a record set with zero records. For a typical JsonStore, the response should look like this:
{ total:0, items:[] }
(assuming a totalProperty of "total", and a root of "items")
That way, it's still a valid response (even if it's not null).
If your server is sending back "null", or an empty raw response (a zero-length string), JsonReader doesn't know how to handle it, and errors or bails.