GoodNewsResource.grid.CollectResources = function(config) {
config = config || {};
this.sm = new Ext.grid.CheckboxSelectionModel({
listeners: {
'rowselect': function(sm,rowIndex,record) {
this.rememberRow(record);
},scope: this
,'rowdeselect': function(sm,rowIndex,record) {
this.forgetRow(record);
},scope: this
}
});
Ext.applyIf(config,{
title: _('resources_active')
,id: 'goodnewsresource-'+config.baseParams.collectionInternalName+'-grid'
,url: GoodNewsResource.connector_url
,fields: [
'id'
,'pagetitle'
...
...
});
GoodNewsResource.grid.CollectResources.superclass.constructor.call(this,config);
this.store.on('load',this.restoreSelection,this);
this.getView().on('refresh',this.refreshSelection,this);
};
Ext.extend(GoodNewsResource.grid.CollectResources,MODx.grid.Grid,{
selectionRestoreFinished: false
,selectedRecords: []
,rememberRow: function(record) {
if (this.selectedRecords.indexOf(record.id) == -1){
this.selectedRecords.push(record.id);
}
console.log('Array selectedRecords: '+this.selectedRecords);
}
,forgetRow: function(record) {
this.selectedRecords.remove(record.id);
console.log('Array selectedRecords: '+this.selectedRecords);
}
,refreshSelection: function() {
var rowsToSelect = [];
Ext.each(this.selectedRecords,function(item){
rowsToSelect.push(this.store.indexOfId(item));
},this);
this.getSelectionModel().selectRows(rowsToSelect);
}
,restoreSelection: function() {
// only execute on initial store load!
if (!this.selectionRestoreFinished) {
var collection = this.config.baseParams.collectionIds.split(',');
console.log(this.config.baseParams.collectionInternalName+' from DB: '+this.config.baseParams.collectionIds);
var rowIndex;
for (var i=0; i<collection.length; ++i) {
rowIndex = this.store.find('id',collection[i]);
this.getSelectionModel().selectRow(rowIndex,true);
}
this.selectionRestoreFinished = true;
}
}
,getSelectedAsList: function(){
return this.selectedRecords.join();
}
});
Ext.reg('goodnewsresource-grid-collect-resources',GoodNewsResource.grid.CollectResources);
...
cTabs.push({
id: 'goodnewsresource-collection1-tab'
,autoHeight: true
,title: _('goodnews.mailing_resource_collection')+config.record.collection1Name
,layout: 'form'
,anchor: '100%'
,items: [{
html: '<p>'+_('goodnews.mailing_resource_collection_desc')+'</p>'
,bodyCssClass: 'panel-desc'
,border: false
},{
xtype: 'goodnewsresource-grid-collect-resources'
,baseParams: {
action: 'mgr/collection/getResourceList'
,parentIds: config.record.collection1Parents
,collectionIds: config.record.collection1 || ''
,collectionInternalName: 'collection1'
}
}]
});
...
cTabs.push({
id: 'goodnewsresource-collection2-tab'
,autoHeight: true
,title: _('goodnews.mailing_resource_collection')+config.record.collection2Name
,layout: 'form'
,anchor: '100%'
,items: [{
html: '<p>'+_('goodnews.mailing_resource_collection_desc')+'</p>'
,bodyCssClass: 'panel-desc'
,border: false
},{
xtype: 'goodnewsresource-grid-collect-resources'
,baseParams: {
action: 'mgr/collection/getResourceList'
,parentIds: config.record.collection2Parents
,collectionIds: config.record.collection2 || ''
,collectionInternalName: 'collection2'
}
}]
});
...
var rc1grid = Ext.getCmp('goodnewsresource-collection1-grid');
var rc1IDs = '';
rc1IDs = rc1grid.getSelectedAsList();
var rc2grid = Ext.getCmp('goodnewsresource-collection2-grid');
var rc2IDs = '';
rc2IDs = rc2grid.getSelectedAsList();
This question has been answered by multiple community members. See the first response.
,rememberRow: function(record) {
if (this.selectedRecords[this.config.id].indexOf(record.id) == -1){
this.selectedRecords[this.config.id].push(record.id);
}
console.log('Array selectedRecords: '+this.selectedRecords[this.config.id]);
}
,forgetRow: function(record) {
this.selectedRecords[this.config.id].remove(record.id);
console.log('Array selectedRecords: '+this.selectedRecords[this.config.id]);
}
,refreshSelection: function() {
var rowsToSelect = [];
Ext.each(this.selectedRecords[this.config.id],function(item){
rowsToSelect.push(this.store.indexOfId(item));
},this);
this.getSelectionModel().selectRows(rowsToSelect);
}
,getSelectedAsList: function(){
return this.selectedRecords[this.config.id].join();
}
The thoughts behind are that you'll store the selections to the array based on your grid ID.
...
selectionRestoreFinished: false
,selectedRecords: []
...
GoodNewsResource.grid.CollectResources = function(config) {
config = config || {};
this.key = config.baseParams.collectionInternalName;
this.selectedRecords = {};
this.selectedRecords[this.key] = [];
this.selectionRestoreFinished = {};
this.selectionRestoreFinished[this.key] = false;
...
rememberRow: function(record) {
if (this.selectedRecords[this.key].indexOf(record.id) == -1){
this.selectedRecords[this.key].push(record.id);
}
console.info('Array selectedRecords['+this.key+']: '+this.selectedRecords[this.key]);
}
,forgetRow: function(record) {
this.selectedRecords[this.key].remove(record.id);
console.info('Array selectedRecords['+this.key+']: '+this.selectedRecords[this.key]);
}
,refreshSelection: function() {
var rowsToSelect = [];
Ext.each(this.selectedRecords[this.key],function(item){
rowsToSelect.push(this.store.indexOfId(item));
},this);
this.getSelectionModel().selectRows(rowsToSelect);
}
,restoreSelection: function() {
// only execute on initial store load for each collection!
if (!this.selectionRestoreFinished[this.key]) {
var collection = this.config.baseParams.collectionIds.split(',');
console.info(this.key+' from DB: '+this.config.baseParams.collectionIds);
var rowIndex;
for (var i=0; i<collection.length; ++i) {
rowIndex = this.store.find('id',collection[i]);
this.getSelectionModel().selectRow(rowIndex,true);
}
this.refresh(); // needed because otherwise the selections in the second grid are only shown after manually refreshing!
this.selectionRestoreFinished[this.key] = true;
}
}
,getSelectedAsList: function(){
return this.selectedRecords[this.key].join();
}
...
this.store.on('load',this.restoreSelection,this);
this.getView().on('refresh',this.refreshSelection,this);
...
....
,restoreSelection: function() {
// only execute on initial store load for each collection!
if (!this.selectionRestoreFinished[this.key]) {
var collection = this.config.baseParams.collectionIds.split(',');
console.info(this.key+' from DB: '+this.config.baseParams.collectionIds);
var rowIndex;
for (var i=0; i<collection.length; ++i) {
rowIndex = this.store.find('id',collection[i]);
this.getSelectionModel().selectRow(rowIndex,true);
}
this.refresh(); // needed because otherwise the selections in the second grid are only shown after manually refreshing!
this.selectionRestoreFinished[this.key] = true;
}
}
....
☆ A M B ☆
I know you're not looking for negative Nancy replies, but this type of convoluted problem is so common with ExtJS that it's turned me off to ExtJS entirely. It is possible to build CMP's without ExtJS. I've outlined how to build CMP's without ExtJS using Repoman: https://github.com/craftsmancoding/repoman/wiki/Tutorial--Custom-Manager-Page
Why you don't fill with your IDs the selectedRecords variable and than probably you will need to call refreshSelection method.
/**
* Grid to collect resource content
*
* @class GoodNewsResource.grid.CollectResources
* @extends MODx.grid.Grid
* @param {Object} config An object of config properties
* @xtype goodnewsresource-grid-collect-resources
*/
GoodNewsResource.grid.CollectResources = function(config) {
config = config || {};
this.key = config.baseParams.collectionInternalName;
this.selectedRecords = [];
this.selectedRecords[this.key] = [];
this.selectionRestoreFinished = false;
// Initially fill selectedRecords array with restored ids from database
// (converted to integer as the store holds its record ids as integers!)
var tmpArray = config.baseParams.collectionIds.split(',');
var len = tmpArray.length;
for (var i=0; i<len; ++i) {
var id = parseInt(tmpArray[i],10);
this.rememberRow(id);
}
this.sm = new Ext.grid.CheckboxSelectionModel({
listeners: {
'rowselect': function(sm,rowIndex,record) {
this.rememberRow(record.id);
},scope: this
,'rowdeselect': function(sm,rowIndex,record) {
this.forgetRow(record.id);
},scope: this
}
});
this.exp = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<p>{preview}</p>'
)
});
Ext.applyIf(config,{
title: _('resources_active')
,id: 'goodnewsresource-'+config.baseParams.collectionInternalName+'-grid'
,url: GoodNewsResource.connector_url
,fields: [
'id'
,'pagetitle'
,'preview'
,'publishedon'
,'createdon'
,'parent'
]
,cls: 'main-wrapper'
,remoteSort: true
,sortBy: 'publishedon' // default sort field of grouped grid (this is not the grouping field!)
,sortDir: 'DESC' // (the grouping field is pre-sorted in getlist processor)
,paging: true
,emptyText: _('goodnews.mailing_rc_resources_none')
,preventRender: true
,autoExpandColumn: 'pagetitle'
,sm: this.sm
,plugins: [this.exp]
,columns: [
this.sm
,this.exp
,{
header: _('id')
,dataIndex: 'id'
,width: 40
,sortable: true
},{
header: _('page_title')
,dataIndex: 'pagetitle'
,width: 260
,sortable: true
},{
header: _('publishedon')
,dataIndex: 'publishedon'
,width: 90
,sortable: true
},{
header: _('createdon')
,dataIndex: 'createdon'
,width: 90
,sortable: true
},{
header: _('goodnews.mailing_rc_container')
,dataIndex: 'parent'
,width: 120
,sortable: true
}]
,tbar:['->',{
xtype: 'modx-combo'
,id: 'goodnewsresource-'+config.baseParams.collectionInternalName+'-parent-filter'
,emptyText: _('goodnews.mailing_rc_parent_filter')
,width: 300
,listWidth: 300
,displayField: 'container'
,valueField: 'id'
,value: 'all'
,store: new Ext.data.JsonStore({
url: GoodNewsResource.connector_url
,baseParams: {
action: 'mgr/collection/getParentList'
,addAllOption: true
,parentIds: config.baseParams.parentIds
}
,fields: ['id','container']
,root: 'results'
})
,listeners: {
'select': {fn: this.filterByParent, scope: this}
}
}]
,listeners: {
// little workaround as we cant differentiate if store is loaded for the first time or refreshed
'click': {fn:this.makeDirty,scope:this}
}
});
GoodNewsResource.grid.CollectResources.superclass.constructor.call(this,config);
this.store.on('load',this.refreshSelection,this);
};
Ext.extend(GoodNewsResource.grid.CollectResources,MODx.grid.Grid,{
rememberRow: function(resourceid) {
if (this.selectedRecords[this.key].indexOf(resourceid) == -1){
this.selectedRecords[this.key].push(resourceid);
}
}
,forgetRow: function(resourceid) {
this.selectedRecords[this.key].remove(resourceid);
}
,refreshSelection: function() {
var rowsToSelect = [];
Ext.each(this.selectedRecords[this.key],function(item){
rowsToSelect.push(this.store.indexOfId(item));
},this);
Ext.getCmp(this.config.id).getSelectionModel().selectRows(rowsToSelect);
// workaround:
// @todo: find fix for: checkboxes are only checked in first grid
if (!this.selectionRestoreFinished) {
this.refresh();
this.selectionRestoreFinished = true;
}
}
,getSelectedAsList: function(){
return this.selectedRecords[this.key].join();
}
,makeDirty: function() {
Ext.getCmp('goodnewsresource-'+this.config.baseParams.collectionInternalName).fireEvent('change');
}
,filterByParent: function(combo) {
var s = this.getStore();
s.baseParams.parentfilter = combo.getValue();
this.getBottomToolbar().changePage(1);
this.refresh();
}
});
Ext.reg('goodnewsresource-grid-collect-resources',GoodNewsResource.grid.CollectResources);