I'm currently implementing part of a project in ExtJS, the requires me to modify an existing grid to only show checkboxes on rows with a certain status(different than AN, NP, RS), this status is determined by the value in record.data.codiceStato :
selectionModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
select: function (sm, idx, rec) {
alert("Look ma!");
},
beforeSelect: function (sm, idx, rec) {
if (idx.data.codiceStato == 'RS' || idx.data.codiceStato == 'AN' || idx.data.codiceStato == 'NP')
return false;
}
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
if (record.data.codiceStato != 'RS' && record.data.codiceStato != 'AN' && record.data.codiceStato != 'NP')
return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
else
return '';
}
});
I have written a check in my beforeSelect listener in order to avoid the checkbox selecting the rows that do not have this status and it works. The only problem is with the header checkbox now, in fact, when I click on it the first time it enables all the rows with a checkbox, but then it doesn't uncheck them when I click on it again. Any solutions ? Thank you
Basically there's a bit of code (Ext.selection.CheckboxModel.updateHeaderState) that determines whether the header needs to be checked by seeing whether selected.count = store.count. In your case it doesn't, so you need to override this function in your code so that selected.count = selectable.count.
It's a private method though, so Sencha don't guarantee keeping it around across versions, so you need to keep an eye on it once you upgrade.
Basically take your selmodel and add an object. This will overwrite the one that normally exists in the framework.
var selModel = Ext.create('Ext.selection.CheckboxModel', {
...
updateHeaderState: function() {
// copy code from your Ext framework here, but modified for your use case
}
});
Related
{
text: "current",
renderer:function (value, metaData, record, rowIdx, colIndex ){
return record.data.Resource[(colIndex-6)/2].current;
},
editor:{
xtype:'numberfield',
listeners:{
change:{
fn:function(me, newValue, oldValue, eOpts){
var form = this.up('form').getForm();
//here I want to get the index of current column
// form._record.data.Resource[colIdx].current=newValue;
}
}
}
}
}
In the function of event 'change' I want to get the index of my column where is my editor then the current column.
the word current is the name of my column.
and here my example :http://jsfiddle.net/D5UsU/32/
Thanx.
Can't see an elegant solution right now (though I doubt it is possible without overrides or thick derived classes). As a quick workaround I would suggest to mark your subcolumns with some additional field, say "subcolumn". Then you will be able to read it and identify which subcolumn triggered the change event:
editor: {
xtype: 'numberfield',
subcolumn: 1,
listeners: {
change: function (me, newValue, oldValue, eOpts) {
var form = this.up('form').getForm();
// use me.subcolumn here
}
}
}
I'm using Sencha ExtJS and I added grid panel with check box model. I want to disable some check boxes based on grid panel value. I haven't seen renderer option for checkbox model.
Finally I found a solution. Override the checkbox selection model
renderer: function(val, meta, record, rowIndex, colIndex, store, view) {
var status = record.data['status'];
if(status == 's'){
meta.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
} else {
return null;
}
}
source: http://extjswithsandeesh.blogspot.com/2012/05/display-checkboxes-for-selected-rows.html
If you are using extJs-4, it is there: checkbox model
and for extJs-3 you find it here: checkbox model
I have an ExtJS 4.1 combo box with a JsonStore and queryMode: 'remote', with paging and filtering, as such:
...
queryMode: 'remote',
allowBlank: true,
forceSelection: true,
autoSelect: false,
pageSize: 25,
typeAhead: true,
minChars: 2,
...
When I load my form with a saved value in this combo box, I load the store passing the saved value as a query (filtering) parameter, to make sure that the selected value is definitely within the returned records, and then I set that value as the combo selected value as such:
mycombo.getStore().load({
params: {
query: displayField
},
scope: {
field: combo,
valueField: valueField,
displayField: displayField
},
callback: function(records, operation, success) {
this.field.setValue(this.valueField);
}
});
So far, so good, the above works fine. The problem is, that if the user then clicks on the dropdown arrow to select another value for the combo, the 1st page of the store is loaded, erasing all previously selected values, and even if nothing is selected, the previously selected value is lost.
This problem is generic, and is quite similar to this question:
ExtJS paged combo with remote JSON store. Display selected value with paging
and can be summarized as such:
In an ExtJS combo box with a remote store and paging, selected values are lost when the loaded page changes.
I tried setting clearOnPageLoad: false for the store, but then each time a new page is loaded, the records are appended to the end of the list. I would have expected this parameter to cache the loaded pages and still show me the correct page while moving back and forth.
So, any ideas on how to keep the selected value while moving between pages? I suppose I could create a record with the selected value manually and append it to the store on each page load until a new value is selected, but this sounds like too much effort for something so basic.
We ended up contacting Sencha support since we have a paid license. This is the answer we got back:
Ext.override(Ext.form.field.ComboBox, {
onLoad: function() {
var me = this,
value = me.value;
if (me.ignoreSelection > 0) {
--me.ignoreSelection;
}
if (me.rawQuery) {
me.rawQuery = false;
me.syncSelection();
if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
me.doAutoSelect();
}
}
else {
if (me.value || me.value === 0) {
if (me.pageSize === 0) { // added for paging; do not execute on page change
me.setValue(me.value);
}
} else {
if (me.store.getCount()) {
me.doAutoSelect();
} else {
me.setValue(me.value);
}
}
}
}
});
Had the same problem, and 'pruneRemoved: false' didn't work (it seems to be used only in grids). This is the solution:
Ext.override(Ext.form.field.ComboBox,{
// lastSelection is searched for records
// (together with store's records which are searched in the parent call)
findRecord: function(field, value) {
var foundRec = null;
Ext.each(this.lastSelection, function(rec) {
if (rec.get(field) === value) {
foundRec = rec;
return false; // stop 'each' loop
}
});
if (foundRec) {
return foundRec;
} else {
return this.callParent(arguments);
}
}
});
Hope it doesn't have negative side effects. I've tested it a bit and it seems OK.
I am experiencing this issue in extjs 6.0.1.
I discovered a work around that might be helpful for others.
I used override for onLoad to add the selected record from the combo to the store prior to calling the base onLoad.
This works because if the selected record is in the page being viewed, the combo is smart enough to not clear the selection. In other words, the reason the selection is being cleared as you page is because the selected record is not in the page you are viewing.
onLoad: function (store, records, success)
{
var selection = this.getSelection();
if (selection)
{
records.unshift(selection);
store.insert(0, records);
}
this.callParent(arguments);
}
What is the event that fires when the data in a DataGrid are recharged or rendered?
For example, a DataGrid showing the results of a filtered search. Every time you click on the Search button with a different filter, the results (number of rows) of the DataGrid are different.
what are you trying to do? You can add a renderer on each of your columns like this:
{
text: 'ChangedCaption',
dataIndex: 'myBoolean',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (value == true) {
return 'Y'
} else {
return 'N'
}
}
},
I've posted this over on the Sencha forums, wanted to also post it here just in case:
I have a GridPanel that utilizes a PagingToolbar and a CheckboxSelectionModel. I want to keep track of selections across pages. I'm nearly there, but I'm running into issues with the PagingToolbar controls (such as next page) firing a 'selectionchange' event on the my selection model.
Here's a simplified sample of my code:
Code:
var sm = Ext.create('Ext.selection.CheckboxModel', {
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
console.log("Selection Change!!");
// CODE HERE TO KEEP TRACK OF SELECTIONS/DESELECTIONS
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
store: store,
defaults: {
sortable:true
},
selModel: sm,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
listeners: {'beforerender' : {fn:function(){
store.load({params:params});
}}}
});
store.on('load', function() {
console.log('loading');
console.log(params);
console.log('selecting...');
var records = this.getNewRecords();
var recordsToSelect = getRecordsToSelect(records);
sm.select(recordsToSelect, true, true);
});
I assumed that I could select the records on the load event and not trigger any events.
What's happening here is that the selectionchange event is being triggered on changing the page of data and I don't want that to occur. Ideally, only user clicking would be tracked as 'selectionchange' events, not any other component's events bubbling up and triggering the event on my selection model. Looking at the source code, the only event I could see that fires on the PagingToolbar is 'change'. I was trying to follow how that is handled by the GridPanel, TablePanel, Gridview, etc, but I'm just not seeing the path of the event. Even then, I'm not sure how to suppress events from the PagingToolbar to the SelectionModel.
Thanks in advance,
Tom
I've managed to handle that. The key is to detect where page changes. Easiest solution is to set buffer for selection listener and check for Store.loading property.
Here is my implementation of selection model:
var selModel = Ext.create('Ext.selection.CheckboxModel', {
multipageSelection: {},
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
// do not change selection on page change
if (selectedRecords.length == 0 && this.store.loading == true && this.store.currentPage != this.page) {
return;
}
// remove selection on refresh
if (this.store.loading == true) {
this.multipageSelection = {};
return;
}
// remove old selection from this page
this.store.data.each(function(i) {
delete this.multipageSelection[i.id];
}, this);
// select records
Ext.each(selectedRecords, function(i) {
this.multipageSelection[i.id] = true;
}, this);
},
buffer: 5
},
restoreSelection: function() {
this.store.data.each(function(i) {
if (this.multipageSelection[i.id] == true) {
this.select(i, true, true);
}
}, this);
this.page = this.store.currentPage;
}
And additional binding to store is required:
store.on('load', grid.getSelectionModel().restoreSelection, grid.getSelectionModel());
Working sample: http://jsfiddle.net/pqVmb/
Lolo's solution is great but it seems that it doesn't work anymore with ExtJS 4.2.1.
Instead of 'selectionchange' use this:
deselect: function( selectionModel, record, index, eOpts ) {
delete this.multipageSelection[i.id];
},
select: function( selectionModel, record, index, eOpts ) {
this.multipageSelection[i.id] = true;
},
This is a solution for ExtJs5, utilizing MVVC create a local store named 'selectedObjects' in the View Model with the same model as the paged grid.
Add select and deselect listeners on the checkboxmodel. In these functions add or remove the selected or deselected record from this local store.
onCheckboxModelSelect: function(rowmodel, record, index, eOpts) {
// Add selected record to the view model store
this.getViewModel().getStore('selectedObjects').add(record);
},
onCheckboxModelDeselect: function(rowmodel, record, index, eOpts) {
// Remove selected record from the view model store
this.getViewModel().getStore('selectedObjects').remove(record);
},
On the pagingtoolbar, add a change listener to reselect previously seleted records when appear in the page.
onPagingtoolbarChange: function(pagingtoolbar, pageData, eOpts) {
// Select any records on the page that have been previously selected
var checkboxSelectionModel = this.lookupReference('grid').getSelectionModel(),
selectedObjects = this.getViewModel().getStore('selectedObjects').getRange();
// true, true params. keepselections if any and suppresses select event. Don't want infinite loop listeners.
checkboxSelectionModel.select(selectedObjects, true, true);
},
After whatever action is complete where these selections are no longer needed. Call deselectAll on the checkboxmodel and removeAll from the local store if it will not be a destroyed view. (Windows being closed, they default set to call destroy and will take care of local store data cleanup, if that is your case)