Related
How to get all data from a grid which have more than 1 page?
I set only to display 50 records in a page, but my total data is up to 52 records which store into 2 pages.
May i know how to get all data from this 2 pages?
Below is the code which only can get 1 page data...
ExportButtonTestJS = Ext.extend(One.Report, {
reportName: 'ExportButtonTestRpt',
autoExecute: true,
isDetailPage: false,
listeners: {
bbarconfig: function(report, bbarConfig) {
bbarConfig.items.push({
xtype: 'button',
text: 'Export',
disabled: false,
onClick : function () {
console.log(report.grid.getStore().data.items);
}
});
}
}
});
Default page size is 50 for Ext.data.store. So even the data in store is more than 50 records (like for example 400) only 50 records will be stored in a Ext.store at any time. Once we go to next page next records from 51 to 100 records will be stored in store.
Two solutions for your requirement:
Increase pageSize as you want -- Eg: pageSize:500
Set buffered:true in Ext.data.store
On setting buffered:true, you can get all records of store at a time by using grid.store.getRange(start, end). But in this case you need to load the store once for the first time.
Got accross this same problem, this is what i had to do in order to get data from all pages:
var grid = Ext.getCmp('myGrid');
//store current pageSize
var currentPageSize = grid.getBottomToolbar().pageSize;
var store = grid.getStore(); // store from grid
//reload store with total nº of records
store.reload({params:{start:0,limit:store.getTotalCount()}});
//once the grid is reloaded with all records, then do whatever you need.
store.on('load', function(store, recs, opt){
var selected = store.getRange(); // getRange = get all records
//this iterates over all records
Ext.each(selected, function(item) {
process here;
}, this);
//once you finished processing, reload grid with previous pageSize
store.reload({params:{start:0,limit:currentPageSize}});
}, this, {single: true}); //single:true says this event will only trigger once
Hope this helps anyone, took me some time to get this working.
Don't try to access items directly. Use the store methods for that.
Try report.grid.getStore().getRange()
See http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-getRange
I've setup a calendar using FullCalendar with Angular UI. It works fine, I can toggle categories of events nicely, but every time the eventSource is updated the calender view is set to the current date.
I've tried using the gotoDate method and I can see that it works (it also works from the console), but almost immediately after the calender is reverted to the current date. As I'm new to AngularJS I've probably put the gotoDate in the wrong place. But I'm clueless were to put it elsewhere.
I'm using a service that returns a bunch of event objects and pushes them into eventSources, the ng-model of the calendar element. Nothing special, in the controller I have:
$scope.eventSources = [];
var promise = UserCalendarEvents.get(groupName);
promise.then(
function(events) {
$scope.eventSources.push(events);
$('#events-calendar').fullCalendar('gotoDate', 2012, 11);
},
function(reason) {
console.log('Error: ' + reason);
}
);
In this case events are fetched and $scope.eventSources is populated. The calender view is then set to december 2012 and after that, almost instantly, the view swithes to current date. Is it some kind of watch of the ng-model that rerenders the fullcalender and if so how can I set the date of choice?
Update: I ended using joshkurz fix, but in a modified version that honors the selected view, ie if the user has selected basicWeek and changes source data the view shouldn't change to for example month view. That's what I need for my users.
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var viewDate = new Date(view.start);
if(m !== 'Invalid Date'){
y = viewDate.getFullYear();
m = viewDate.getMonth();
d = viewDate.getDate();
if(!isNaN(y) && !isNaN(m) && !isNaN(d)){
xtraOptions = {
year: y,
month: m,
date: d
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
/* If the calendar has options added then render them */
var expression,
options = { defaultView : view, eventSources: sources };
if (attrs.uiCalendar) {
expression = scope.$eval(attrs.uiCalendar);
// Override defaultView if is set in ui-calendar attribute - OK?
if (expression.defaultView) {
expression.defaultView = view;
}
} else {
expression = {};
}
angular.extend(options, uiConfig.uiCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}
This is a bug with the calendar. You are the first one to say anything about it on StackOverflow. Kudos.
There are a couple of ways that this could be fixed. Its been proposed on github https://github.com/angular-ui/angular-ui/pull/520 that we do away with how the directive re-creates itself anytime the watch is fired, which would stop this behavior. I believe that if we can get this method to work in production then it will be the best solution.
Until then however the fix is to get the current month from a date object created from the view.start field. This month should be added to the options which are used to render the calendar.
Here is a snippet of what the new update function should look like inside of the calendar directive.
/* update the calendar with the correct options */
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var d = new Date(view.start);
m = new Date(view.start);
if(m !== 'Invalid Date'){
m = m.getMonth();
if(!isNaN(m)){
xtraOptions = {
month: m
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
// console.log(m)
/* If the calendar has options added then render them */
var expression,
options = {
defaultView : view,
eventSources: sources
};
if (attrs.exCalendar) {
expression = scope.$eval(attrs.exCalendar);
} else {
expression = {};
}
angular.extend(options, uiConfig.exCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}
This has not been properly tested on the angular-ui CI server, but it works fine as I am using it in production currently.
With AngularUI wrapping FullCalendar in a directive for you, the calendar object can be accessed via $scope.calendar. "The AngularJS Way" is to avoid direct DOM manipulation in controllers.
In your particular case, you'd write this instead:
$scope.calendar.fullCalendar('gotoDate', 2012, 11);
AngularUI does have a watch on eventSource and event that calls an update function every time the length of either changes. You can view the source here:
https://github.com/angular-ui/angular-ui/blob/master/modules/directives/calendar/calendar.js
You can see that the calendar object at $scope.calendar gets recreated with a new set of events everytime the event model changes. This is why your date change isn't going through -- the event is being added, triggering the update, your date change goes in, the whole calendar is changed and your date change is lost.
Two (not the best) things pop up at me without changing AngularUI's code:
You can use AngularJS's $timeout service and wait a set
time after events are loaded, the calendar is finished updating,
then call your date change.
You can add a $watch on the scope that triggers your date change
everytime the calendar object changes:
http://plnkr.co/edit/Ww08VX?p=preview
I created that example above. In the test() method, I'm just loading some fake data into events via a promise (they'll be added in March 2013) then changing the date to December 2012. I'm watching $scope.calendar and everytime it changes (an update is triggered in the directive) I resend the date command. You should be sent to December 2012 without even seeing the new events go in, but if you go back to March 2013, they should be there. I stuck the watch in another .then assuming you'll use some value that's returned to set the date dynamically.
Another way to solve the issue without changing the Angular-UI source is to declare the calendar like this:
<div ui-calendar="{viewDisplay:viewDisplayHandler,month:monthVal,year:yearVal}" ng-model="eventsArr"></div>
And to have a viewDisplayHandler function in the scope that sets monthVal and yearVal to the appropriate values in order to have the date on the calendar set after the whole calendar recreation:
$scope.viewDisplayHandler = function(view) {
var viewStart = view.start;
$scope.yearVal = viewStart.getFullYear();
$scope.monthVal = viewStart.getMonth();
}
This is how i solved it before issuing the pull request on GitHub; it's not the optimal method i guess, but i have been using it in production for a while and it seems to be ok and does not require changing Angular-UI's code.
I have a grid store and I am able to get modified data using
var modifiedData = store.getModifiedData();
Now I want to get deleted records (I am using ExtJs 3).
I tried using var deletedData = store.getRemovedRecords(); but I guess this property is available in ExtJs 4.
I just want to fetch the records that are deleted from the grid.
Any help would be appreciated.
By default this is not possible.
ExtJS 3.x is only capable of tracking modified records (out of the box). Deleted (removed) records get removed completely. But there is one thing you can do; The store will fire the remove event for each record with the record itself as second argument. You may use this to create your own array of removed records. The implementation would be really simple I guess. You can do it per instance or create a whole new storetype by extending. But I guess the later is not really needed here.
Here is a example. Note that you might need take care of other events to clear the removedList.
var myStore = new Ext.data.Store({
removedList: [],
listeners: {
clear: function(store) {
store.removedList = [];
},
load: function(store) {
store.removedList = [];
},
remove: function(store, record, index) {
store.removedList.push(record);
}
}
});
Check these two links out. They might be helpful.
http://www.sencha.com/forum/showthread.php?58888-Store-find-deleted-added-records
mi
http://www.sencha.com/forum/showthread.php?15671-Ext.data.Store-with-persistence
I need to get(retrieve) updated cell value in controller. (MVC)
So I tried this,
var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array
var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array
but always it returns empty array even I updated some cell value.
anybody know what I am doing wrong?
Here is my part of view code,
Ext.define("App.view.orders.ItemList_view", {
extend: "Ext.grid.Panel",
alias: "widget.itemList_view",
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
initComponent: function () {
this.store = "ItemList_store";
this.columns = [
{
xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
},
{ header: "test", width: 100, dataIndex: "test",
editor: {
xtype : 'textfield'
}
}
];
this.selModel = Ext.create("Ext.selection.CheckboxModel");
//this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.
this.callParent(arguments);
},
.
.
.
Thank you!
[EDIT]
Thank you very much for your answer! I have some more question about editor grid.
Its much different from Ext3. so I'm very confusing now :(
Q1. How to collect edited record data (once click button)?
the event fired once the grid cell be changed.
but I want collect edited grid record once I click the 'Update edited cell' button, and I want to update all together at the once.
In Ext3, I did like this,
(button) click : function(){
var modified = mygridStore.getModifiedRecords();
var recordsToSend = [];
Ext.each(modified, function(record){
recordsToSend.push(record.data);
});
var grid = Ext.getCmp('grid');
grid.el.mask('Updating','x-mask-loading');
grid.stopEditing();
recordsToSend = Ext.encode(recordsToSend);
Ext.Ajax.request({
url : '/test/test',
params : {
data : recordsToSend
},
success : function(response){
grid.el.unmask();
alert(response.responseText);
mygridStore.commitChanges();
},
failure : function(response){
mygridStore.rejectChanges();
}
});
}
How can I change the code for Extjs4 ?
Q2. I don't know still how to find out for changed checkcolumn.
I tried this, but I does not work for checkcolumn (of cause I tested after change checkbox)
// grid coumn
{
xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}
-
// in control
'myGrid': {
validateedit: function (plugin, edit) {
console.log(edit);
},
checkchange: function (plugin, edit) {
console.log(edit);
console.log(edit.value);
}
}
Q3. When I click the cell to edit, the show some HTML tag in -_-;;
I really appreciate for your help. and thank you very much for your valuable time!
The editors (cell editors or row editors) do not commit their values to the store until you complete the edit - which means pressing ENTER or blurring the active cell editor by clicking elsewhere on the page, or clicking the save button on the row editor form .
If your purpose for reading the updated value in your editor is to perform some kind of validation I would suggest simply listening to the validateedit event in your grid's controller, as described here.
The second argument that this event passes to your handler contains a lot of data about the edit that you can then perform validation with. If the edit doesn't pass your validation you can return false from your handler and the value in the celleditor will revert to it's original value. The validateedit event gets fired from the editor grid itself so you would add an event handler in your controller for it like this:
Ext.define('MyApp.controller.MyController', {
init: function() {
this.control({
'mygridpanel': {
validateedit: function(plugin, edit) {
// silly validation function
if (edit.value != 'A Valid Value') {
return false;
}
},
},
});
},
});
But you should check out the link above to see all the different objects available in that second argument I named edit.
The validateedit event is fired right before the record is committed into the store - after the user has already clicked ENTER or blurred the editor, i.e., while the editor is closing.
If you are trying to get the celleditor's value before it starts to close, for some reason other than validation for example, you could get the active celleditor's value like this:
// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
var value = myGrid.editingPlugin.getActiveEditor().field.value
console.log('value: ' + value);
}
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
One other point I should make, for validation in editor grids, I found that it is easiest to just put a validator config in the grid column's editor definition. That will give you all the handy validation CSS while the user is setting the field's value and alert him if there is a problem with the value before he tries to save it.
To get an idea of what I mean, try entering letters in the date column of this example. Mouse over the editor cell and you will get the error message.
EDIT
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
Question 1
Once you have completed an edit (clicked ENTER or ), your call to mygridStore.getModifiedRecords() should be working fine because the record will have been committed to the store. I see that it was not working, I will cover that in a moment.
I should point out that ExtJS4 has a store.sync() method as covered here.
Instead of extracting the modified records from the store, encoding them, manually doing an ajax request to save them to the server and then manually committing them you can call this sync method and it will take care of all of these actions for you.
If you have different URLs to handle the different create, read, update, destroy operations fired off by your store's load and sync methods, you can use the store's proxy api config to map your URLs to these operations as covered here. Or you can set-up your server side controller to be able to differentiate between your store's load request (read operations default to HTTP GET) and it's sync requests (create, update and delete operations default as HTTP POST).
There could be many different ways to go about doing this on the server side, the way I usually do it is to have one SQL stored procedure for GET requests and one for POST requests for any given store. I include the store name as an extra param and then my server side controller runs the appropriate stored procedure based on whether it is a GET or a POST request.
Question 2
Cell editing doesn't support checkcolumn edits. You have to make a different handler to listen to changes on that, something like this:
checkchange: function (column, rowIndex, checked) {
var record = store.getAt(rowIndex),
state = checked ? 'checked' : 'unchecked'
console.log('The record:');
console.log(record)
console.log('Column: ' + column.dataIndex);
console.log('was just ' + state)
}
Your call to mygridStore.getModifiedRecords() should be able to pick up the check changes also however, they get committed to the grid's store right away after being checked. store.sync() would also pick up changes to checkcolumn.
Question 3
I can't completely tell what is causing that problem but it may be something strange going on with your validateedit event, your handler should be returning true or false.
As I said earlier, I misunderstood the reason you originally asked this question. I thought you were trying to do some kind of validation while an edit was in progress. Now I understand that you are trying to get all of the modified records from the store after all the editing is completed in order to save them to the database, I was thrown off because in ExtJS 4 a store is usually saved to the database with the sync method as I mentioned.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
The actual problem you are having might be trouble with the store's getter methods (getModifiedRecords, getUpdatedRecords) in some 4.07 versions, take a look at this post and this one.
So with all that said, the best advice I can give you is 1) try out the stores sync method for saving modified data to the database and 2) upgrade to ExtJS 4.1, there were a lot of bugs that were straightened out between 4.07 and 4.1 which you should be able to take advantage of, I cut out about 75% of the overrides I was using to make things work when I switched over to 4.1.
EditedGrid.plugins[0].completeEdit();
This will make the active changes commit and call edit event also.
listeners: {
validateedit: function (editor, e) {
//console.log(editor);
var oldVal = editor.originalValue;
var newVal = editor.value;
}
}
When adding a rows to a grid, and then clicking on it, it gets selected (and highlighted). Then, clicking elsewhere but the new row remains highlighted (so now there are to highlighted rows).
Please, does anyone know what the problem could be? How to make it behave normally, i.e. clicking a row deselects (de-highlights) the other one?
After I reload the page (so the new row is not new anymore), everything works as expected.
Edit: Here's the code for adding rows:
var rec = new store.recordType({
test: 'test'
});
store.add(rec);
Edit 2: The problem seems to be listful: true. If false, it works! But I need it to be true so I'm looking at this further... It looks like as if the IDs went somehow wrong... If the ID would change (I first create the record and then the server returns proper ID, that would also confuse the row selector, no?)
(Note, correct as ExtJS 3.3.1)
First of all, this is my quick and dirty hack. Coincidentally I have my CheckboxSelectionModel extended in my system:-
Kore.ux.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.CheckboxSelectionModel, {
clearSelections : function(fast){
if(this.isLocked()){
return;
}
if(fast !== true){
var ds = this.grid.store,
s = this.selections;
s.each(function(r){
//Hack, ds.indexOfId(r.id) is not correct.
//Inherited problem from Store.reader.realize function
this.deselectRow(ds.indexOf(r));
//this.deselectRow(ds.indexOfId(r.id));
}, this);
s.clear();
}else{
this.selections.clear();
}
this.last = false;
}
});
And this is the place where the clearSelections fails. They try to deselect rows by using ds.indexOfId(r.id) and it will returns -1 because we do not have the index defined remapped.
And this is why we can't find the id:-
http://imageshack.us/photo/my-images/864/ssstore.gif/
Note that the first item in the image is not properly "remapped". This is because we have a problem in the "reMap" function in our Ext.data.Store, read as follow:-
// remap record ids in MixedCollection after records have been realized. #see Store#onCreateRecords, #see DataReader#realize
reMap : function(record) {
if (Ext.isArray(record)) {
for (var i = 0, len = record.length; i < len; i++) {
this.reMap(record[i]);
}
} else {
delete this.data.map[record._phid];
this.data.map[record.id] = record;
var index = this.data.keys.indexOf(record._phid);
this.data.keys.splice(index, 1, record.id);
delete record._phid;
}
}
Apparently, this method fails to get fired (or buggy). Traced further up, this method is called by Ext.data.Store.onCreateRecords
....
this.reader.realize(rs, data);
this.reMap(rs);
....
It does look fine on the first look, but when I trace rs and data, these data magically set to undefined after this.reader.realize function, and hence reMap could not map the phantom record back to the normal record.
I don't know what is wrong with this function, and I don't know how should I overwrite this function in my JsonReader. If any of you happen to be free, do help us trace up further for the culprit that causes this problem
Cheers
Lionel
Looks like to have multi select enabled for you grid. You can configure the selection model of the grid by using the Ext.grid.RowSelectionModel.
Set your selection model to single select by configuring the sm (selection model) in grid panel as show below:
sm: new Ext.grid.RowSelectionModel({singleSelect:true})
Update:
Try reloading the grid using the load method or loadData method of the grid's store. Are you updating the grid on the client side? then maybe you can use loadData method. If you are using to get data from remote.. you can use load method. I use load method to update my grid with new records (after some user actions like add,refresh etc). Or you could simply reload as follows:
grid.getStore().reload();