ExtJS Store/Grid reset - extjs

I have a button that when clicked, will create a JSONstore using a url provided. The store is then loaded into a grid. If the button is clicked again, it adds all the information again (so it is listed twice). I want it so that when the user clicks the button, it clears the store/grid and then adds everything.
Any ideas on how to accomplish this?
Thanks,
EDIT
ExtJS 3
datasetStore.removeAll();
datasetStore.loadData(datasetsArray);

It will be useful to see some code examples (and extjs version), but you can simply use loadRecords method (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.JsonStore-method-loadRecords):
grid.store.loadRecords([array of your new records here], {addRecords: false});
{addRecords: false} indicates that existing records will be removed first.

for ExtJs4: simply doe store.loadRecords([ array ]). In version 4.2.2 the store.proxy has NO clear() method so that doesn't work (was proposed in other examples elsewhere...)
If you want to to totally clear store and proxy, pass an empty array. This is handy because in some cases you want to clear the store and removeAll only moves the data to an array managed internally in the store so when later doing a sync on a gridStore which shows only 1 record, you may see your controller flooded with a bunch of records marked for removal!!

Related

What's the right way to reset / initialize InfiniteLoader

I'm trying to use InfiniteLoader from the react-virtualize library to show up a scrollable list that has a textSearch input field on top (used to filter list entries).
The code I use is very close to the InfiniteLoader Sample Code.
The list is working fine, but I'm not sure how to reset/initialize the InfiniteLoader when the searchText is changed and (completely) new data should be shown.
The flow is like this:
the list is opened for the first time and shows data from the redux store (works fine).
user changes textSearch and new data is fetched to the store
at this point, InfiniteLoader should be be initialized (I tried calling resetLoadMoreRowsCache on InfiniteLoader)
InfiniteLoader should call loadMoreRows like for the first time and rerender with the new data
I've seen that the INFINITELOADER DEMO has the same behaviour: by clicking 'Flush Cached Data' nothing happens until I start scolling the list.
So my question: what is the right way to reset/initialize?
For newer versions of InfiniteLoader
Since this question has been posted, InfiniteLoader has gained a parameter which auto-reloads the data. You can now use:
infiniteLoaderRef.resetLoadMoreRowsCache(true);
to automatically flush the cache and get new rows.
For older versions of InfiniteLoader
InfiniteLoader reacts to a range of rows being rendered. The resetLoadMoreRowsCache method just resets cached data. It doesn't automatically request a batch of rows be loaded.
Arguably it should. I don't know. It seemed easy enough for user code to auto-load the first batch of new data if the application state has changed in such a way as to require resetLoadMoreRowsCache to be called.
Anyway, tl;dr is that you should be able to do this:
infiniteLoaderRef.resetLoadMoreRowsCache(); // Reset the cache
loadMoreRows({ // Manually kick off the first batch
startIndex: 0,
stopIndex: 20 // Or whatever
});
Happy to review a PR to change the default behavior if you feel it could be improved.

Angularjs: how to pass entire object to another controller?

OK, I'm very new to AngularJS. I'm converting a rather rough-app (that I've been writing for a couple of days) from using mostly jQuery over to using Angular. [ I discovered Angular "mid-stream", while researching how to alleviate all the bookmark and back-button headaches I was running into.]
On my main page, I have a table of search results. (If the user arrives without passing any parameters, a default search is called to build the table. And, of course, they can use a search form on that page to show themselves a different set of results.)
Now, when the user clicks on a table item, I want that table to more or less "become" a drop-down menu on the Item Details page that can be used to navigate from one table item to the next. (The list will usually be less than 20 items long at any given time.) Same data, same sort order, just in a different control.
Rather than build that "Child" page so that (in addition to making Ajax calls to pull up the item details) it runs the exact same query AGAIN and then builds a drop-down out of it... I thought perhaps there was some more-efficient way to do it.
Perhaps, pass the entire object of objects from the search results on to the Details controller? (I would somehow have to also pass an id for whichever item the user actually clicked on for details as well.)
[With jQuery, I had been building both the drop-down and the table of results on the same page...and then just use show() and hide() to alternate which one I was displaying. And I would fetch the Item Details data and populate/show hidden details divs whenever a table row or drop-down option was selected.]
First I think you should use some kind of routing, maybe this can be helpful
https://github.com/angular-ui/ui-router
And second one, if you want to access same object with multiple controllers, you should use factory with your object, and all you need is to inject that factory into your controllers, and you will have access to the same object from multiple controllers. Here is the short tutorial, it's very easy to understand:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
And third option, but it's not nice, is to emit or broadcast event and send object from one controller, and in another one you can put a listener for that event, here you can find more information:
http://www.theroks.com/angularjs-communication-controllers/
http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

ExtJS 3.4: Grid does not automatically save and restore state. What am I doing wrong?

I have an Ext 3.4 grid with stateful:true, a stateId, and each column in the column model has an id.
Yet when I resize columns I don't see any state cookie saved, and the column widths are not restored when the page is reloaded.
I do have a state Manager with cookie provider defined and I can set/get cookie values via the state manager just fine.
I also added handlers for beforestatesave and statesave and they are being called, but still - no cookie is saved and no state restored. Those handlers are being passed the correct arguments as well - the columns argument show correct updated widths when dumped into the console.
My question is: am I doing something wrong? Should I not expect this to be automatic?
Do I actually have to use those state events to manually save and restore state?
I ran into this problem myself and I figured it out only after about 2 hours of hair pulling.
Do you happen to have a rather large grid? If the cookie data exceeds 4k, which it will easily do if you have 20+ columns of data, it will not save. It will not error either.
I suppose the only other option here would be to go to a different state provider. I'm going to look at the httpProvider that Saki has graciously provided as an alternative.
EDIT:
I've tried to override the provider and remove the string escaping when saving the cookie. This reduces the size by about 50%. I cannot seem to consume it when trying to restore though. I'm certain that the Ext authors were doing this for a reason, otherwise it wouldn't make sense because it inflates the cookie by so much. So much for a hack.
To make a GridPanel stateful I just added stateful: true to the config and setup my provider right before I create any objects
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(new Date().getTime()+(1000*60*60*24*30)) // 30 days
}));
I've not tested if it remembers width but try moving columns and the sort order and see if they are being remembered.

Want to display results of a callout

When a user 'Saves' a Contact (for example), whether it's new or just updated, I need to:
Do an external callout using one of the Contact field values as a lookup
Display the results of the callout, so the user can make a selection
Update the Contact based on the user's selection display the updated Contact
I have found two aproaches, but have reached a point in both that I need to resolve.
Trigger Based Method
In the 'after' trigger pass the lookup string to a callback.
Update the Contact with the selection
Issues
How do you pass the lookup string or results to a visualforce page to display the lookup results?
When the user makes the selection and the update has been done, how do I move back to the updated contact?
Override Base Method
I found a discussion here that seems to suggests using overriding & redirection to someone asking about 'Edit'. I think this could also be done with the 'Save' button.
Issue
This is meant to be a deployable sollution, so I think that the override has to be set in code (I'm using the IDE) and not via Setup (or am I wrong?). I can't find out if this is possible or how to do it
Sorry for detailed question. Didn't want to just ask the wrong question (i.e. assume I know the best approach).
Thanks...
For the trigger-based method, you cannot change the built-in Save functionality, but (per your second solution) you can override the Edit button and recreate the Edit page with Visualforce, which would give you full control over the Save button and how you handle the callout and redirecting.
The release notes for Spring '10 indicate that standard-button overrides are now available for packaging, as they can be created through the Metadata API.

How to get a value from a combobox in a form after the field is populated by the database

I have a formPanel with two of the form items as comboboxes with their stores populated by the database. The value from comboBoxA needs to be used to get the value for comboBoxB however comboBoxA.getValue() (as well as getRawValue()) are returning undefined.
storeA.load();
var comboBoxA = Ext.getCmp(comboBoxAID);
storeB.baseParams.UserID = comboBoxA.getValue();
storeB.load();
As noted in the docs, store loading is asynchronous, so you have to do your additional processing within the appropriate callback:
storeA.on('load', function(){
var comboBoxA = Ext.getCmp(comboBoxAID);
storeB.baseParams.UserID = comboBoxA.getValue();
storeB.load();
});
storeA.load();
Loading a ComboBoxes store does not actually select a value. Try making a selection first (or loading a record into the form, etc). It sounds like your trying to link the 2 combos. If thats the case, search around for a tutorial, there are few out there. This should get you started, Linked Combos.
You might want to try this. It might be exactly what you are looking for. It also has a demo on the same page. The page is in german but the demo is predictable and the code is in english so test this.

Resources