I am using ExtJS API for CRUD operations in grid. All of my code works fine except one small thing. When I add a record first time(when the page is loaded) the new record is not shown on the grid but it is added in the database. When I refreshes the page and insert a record it is shown as soon as it is added. This is a very strange behavior and I don't even have a clue what's going on here. Here is the code I am using to insert a record:
insertUser: function (button) {
var grid = Ext.ComponentQuery.query('#userlist');
var win = button.up('window');
form = win.down('form');
record = form.getRecord();
values = form.getValues();
this.getUsersStore().add(values);
this.getUsersStore().reload();//tried this.getUsersStore().load(); also
win.close();
}
Can any one point out what's wrong going on here? Thanks.
When adding a data to store it needs to be in the format of the store record.
For example
this.getUsersStore().add({username:'Sample User', userid: 210, userphone: '999-999-9000'});
In your code it seems that you are directly passing the values.
If you add the record correctly store does't need to do reload() or refreshed, if you reload() the store gets refreshed and the data you added will not be present.
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 need to make 2 tables in which I can select data in one table and with submit show it in another table. Then with remove button to put it back to the first table. This is what I came up with so far. Can anyone assist me please?
<script async src="//jsfiddle.net/morka/65w7Lc96/embed/"></script>
https://jsfiddle.net/morka/65w7Lc96/
The main problem seems in your addItems function which is currently returning true or false, instead of adding items actually. You need to change your addItems function like following:
addItems: function(){
this.newItems = this.selected;
}
Also as you are just pushing names in this.selected, you have to remove .name when rendering table of newItems. You can change the code to by pushing the object in this.selected to access name ini newItems.
Check the working fiddle.
My problem is that If I edit information of any record/row on 2nd or 3rd or any page after editing it brings me back to 1st page,instead of that bring that to same page after update record/row.(I think it because of grid's store get update and grid focuses on first page).
I want to update store record and gridview row locally. that's why after the updating record I can hold the same grid page.
is there any good options for this?
You need to call store.reload() instead of store.load() after updating the record.
var me = this;
record.save({
scope: this,
success: function(record) {
me.reloadGrid(record);
},
failure: function(record, operation) {}
});
reloadGrid: function(record){
var gridStore; /*Get the reference to the grid store here*/
gridStore.reload();
}
Reload will maintain all the existing store parameters such as page number, start, limit, etc. If you want to load a specific page, then do the following
reloadGrid: function(record){
var gridStore; /*Get the reference to the grid store here*/
gridStore.loadPage(3);
}
Of course, this would work if you are not actually editing the record in a way that affects the sort order on the store. In which case, your store would be sorted based on sort property and the record can occur anywhere on any page.
I'm using Sencha Touch 2 and wonder how I listen to the Store's refresh event in my Ext.dataview.List? I want that my list automatically updates when there are new records in my store, so the refresh event seems to do the job for me, but how do I set up a listener?
Edit: Thanks to Anand Gupta I realized my problem isn't refreshing the list but just displaying it. So I will give you some more information and hope you can help me. I use NavigationView inside tabpanel. I have one list loading from localstorage which works just fine, if you tap disclose indicator you come to a form with a button "auto complete".
By tapping autocomplete the following method is called:
e.stopEvent();
var lastname = this.getNewUserForm().down("textfield[name=lastname]").getValue();
if(lastname!=="")
{
var complete = this.getApplication().getController("Complete");
this.getUserNav().push(complete.getView());
complete.setSearch(this.getNewUserForm().down("textfield[name=firstname]").getValue(), lastname);
}
else
{
//errormessage
}
The getView() method is a ref with auto create and the "setSearch" Message on Complete Controller simply loads the Store through jsonP Proxy:
var store = Ext.getStore("Playernames");
store.setParams({firstname:firstname, lastname:lastname});
store.load({callback: function(){
console.log(this);
}});
I added a log to see that the store is properly loaded and store is properly loaded.
Thanks for help
Ok after some more hard search I found my bug: I had a List view embedded in a Panel with an undefined layout. So I changed the layout to "fit" and it works fine.
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.