Adding new record to "buffered store" in EXTJS - extjs

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.

Related

Extjs : get modified records after store reconfigure

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.

grid with page not delete the records

I have a problem in removing the records.
I have a grid with pages if i select one record in the first page and change the page and try to remove the record it is not working . (Not delete the record).
Whats i have to do?
Is a limitation of grid?
Is a bug?
Thanks in advanced.
var aRecords = this.getGridV().getSelectionModel().getSelection();
if (aRecords.length>0) {
var store = this.getGridStoreStore();
store.suspendEvents();
store.remove(aRecords);
store.resumeEvents();
store.sync();
store.load();
}
When you use a paged grid, the store is filtered and does not contain the records outside of the current page. Therefore, if you select a row, by the time you change the page, that row is no longer in the store and is no longer selected.
That's not a bug, it is a limitation due to the whole concept. You cannot select a row that is not displayed.
You could use infinite scrolling using BufferedRenderer, this will allow you to select any row, scroll away and keep it selected.

ExtJS interval timer get data and insert new rows in grid

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
});

extjs 4 add new record to grid using form and finally to php mysql

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

ExtJS Store/Grid reset

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!!

Resources