I have my ExtJS 4.2 Application with a grid that initially will load and display data from a database table.
On server side, this table have new data about every 10 seconds, so I want to have a Ext.TaskRunner that every 10 senconds will go again to my WebService, get new data and insert it to the grid.
So, I dont want to get all data from server, just the new one. That's why I need to know how to do this with ExtJS. TaskRunner and grid (inserting new rows).
Hope someone can help me.
this is how the function should be
Ext.TaskManager.start({
run: function(){
// Ajax request with store.add()
// OR store.load({addRecords: true}) as #Evan Trimboli said
// also you can add start parameter store.load({start: store.count()})
},
interval: 10000
});
Related
In my application I've a grid with buffered store.
On click of row of grid, alert will be shown.
I want to add a new row to grid i.e., add a new record to store (should not be saved in back-end until user peforms some save action). The same added record can also be deleted if user chooses to do so.
Currently tried the below approach..
var grid = Ext.ComponentQuery.query('grid')[0],
gridStore= grid.getStore();
var bufferedStoreMap = gridStore.getData().map[currentPage]; //currentPage = 1
var mapVal = bufferedStoreMap.value;
gridStore.totalCount++;
mapVal.unshift(Ext.create('Ext.data.Model',{name:'test'}));
grid.getView().refresh();
With the above code new record is added to store, but grid events like click are not working.
Getting the below error.
Any idea on achieving this??
Any help would be really appreciated.
The buffered store doesn't support local modifications, it's essentially a read only data source once the data is loaded via the server.
I'm using the server side pagination and filtering example with angularjs.
On loading the data in grid, I would like to programmatically set the first row.
However below method does not work if the grid data has been set using data source.
$scope.gridOptions.api.selectIndex
doesn't work with datasource.
It only works after using the $scope.gridOptions.api.setDataSource
I've also opened an issue in github. Below is the link:
https://github.com/ceolter/ag-grid/issues/601
Please help in resolving this issue.
This is to be expected.
The datasource is the object that will provide your server's data.
As long the datasource is not loaded and did not load the 1st datas you can't use selectIndex method since there is nothing to select.
As a workaround i add myself a custom option in gridOptions where you can provide what you want to select at the 1st loading and select them once my data are loaded the 1st time in my datasource. I add another callback to be able to compare datas and another when the data is not found.
If you want something simplier you can pass to your datasource a promise that will be resolved once the 1st data get loaded (resolve it after call params.successCallback(data) !)
Note : the callback params.successCallback(data) to send the new data to the grid from the datasource must be called before using selectIndex whatever the solution you use.
I reconfigure my store and add new fields to it and then load its corresponding grid. I need to edit grid cells and save the whole modified grid rows in one step at the end.
The problem is that when I call this code, I get all rows in the grid even if I haven't edited any cell or row in the grid maybe because I have reconfigured the store.
But in fact nothing has been changed and new fields in the store are just for view.
How can I get the rows which their cell values has been changed ?
// returns all store records
Ext.ComponentQuery.query("documentgrid")[0].getStore().getModifiedRecords();
Your issue is not described quite clearly.
With a little guess,give you this answer,I hope it would help.
The getModifiedRecords() is not for that use.
Subscribe the store's "update" event instead.It can hook into the modification of model fields in the store.
Try code snippets:
{
//your grid config goes here
listeners:{
update:function(me, record){
//TODO save the modified record somewhere for your save button to pickup.
}
}
}
I was getting all the records because I hadn't call commitChanges on the store after reconfigurer.
I have researched lot of exampls for last 4 days but just couldnt come up with right approach.I am preparing extjs 4 app using sencha architect. There is a grid with lot of entries coming from store which is populated from php mysql backend.
I am tryng to add new record using a button "Add Announcement" and the data should be entered using a form.
grid store has three fields (Extra ID which needs to be passed on to new record in database) but the form has 2 fields.
Request your help in knowing the right approach. Possible options with me:
create new record in store, send it to mysql. Select new record, edit the new record in form, again send it to mysql
get a blank form, enter data, submit using url, create entry in mysql. send data back to store.
use gridediting plugin to create new record. know how to use it for editing. Dont know how o create new record
In any case how should i pass class ID to the new record
If the record has only a few fields then #3 approach would do. I have written an example of grid with all CRUD operation, however, not in Architect. Anyway, the same or similar buttons handlers can be used for coding it in Architect.
You can find the example here: http://extjs.eu/ext-examples/#writable-grid
I have a Ext JS grid store with autosave set to false.
I want to clear ONLY the local store, without affecting/deleting records in the server.
If I try store.removeAll(), then when the next store write occurs, all records are deleted.
How to call store.removeAll with clearing all pending changes after it?
Store.loadData([],false);
This statement drop local cache and not send changes to server side
The removeAll has a silent parameter that can be used to clear records rather than delete from the server:
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-method-removeAll
gridPanel.store.removeAll(true);
From the code comments:
if (silent !== true) { // <-- prevents write-actions when we just want to clear a store.
this.fireEvent('clear', this, items);
}
If you then manually want to update a GridPanel to clear all rows you need to call:
gridPanel.view.refresh();
For ExtJS 4.1, this will clear buffer cache (prefetched data), so the next time you load (or loadPage), store will reload the pages from scratch:
store.pageMap.clear();
which was previously done as:
store.prefetchData.clear();
Ok, from what I understand you want to ignore changes to the local store and not send it to the server side. Have you tried using:
myStore.rejectChanges();
This method clears all outstanding changes on all modified records. This will reject all pending changes.