i am using checkboxmodel to select rows but i want to make some rows to be selection disabled based on some logic...
here is my what i am trying but 'beforeselect' function doesn't even fires
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode:'multi',
listeners: {
beforeselect:function(grid){
var grid=Ext.getCmp('mylist');
var selectionModel=grid.getSelectionModel();
var selectedRecords=selectionModel.getSelection();
var myValue=selectedRecords[0].get('nowreceive');
var myvalue1=selectedRecords[0].get('received');
if(myValue>myvalue1)
{return false;}
else
return true;
}} }
),
beforecellmousedown event in the view config works for me.This is done in the viewconfig of the grid...
viewConfig: {
listeners: {
beforecellmousedown: function(view, cell, cellIdx, record, row, rowIdx, eOpts){
var myvalue=record.get('quantity_ordered');
var myvalue1=record.get('quantity_received')
if(myvalue==myvalue1)
{
return false;
}
else {
return true;
}
}
}
},
How do you know the event is not firing? It should be, but my guess is that selectedRecords[0] is not defined and that crashes your execution, because getSelection() probably returns an empty array, before any selection has occurred.
What you should do is to use the second argument of beforeselect, which is the record that's going to be added to the selection.
So you can implement your listener in a much simpler way:
beforeselect: function (selModel, record) {
if (record.get('nowreceive') > record.get('received')) {
return false;
}
}
Related
i have done toolpip for compobox list items
listConfig: {
itemTpl: [
'<div data-qtip="{description}">{mydisplayField}</div>'
]
now I'm trying to show tooltip for selected item,current value
i have search many times but I cant can't do to this .
If you have done task like this pleas tell me.
it was so easy
on afterrender
var fieldStore = field.getStore();
Ext.create('Ext.tip.ToolTip', {
target: field,
listeners: {
beforeshow: function updateTipBody(tip) {
var value = field.getValue();
if (!value && value !== 0) {
return false; //not show
}
var record = fieldStore.getById(value);
tip.update(record.get('description'));
}
}
});
The checkchange listener for my checkColumn is not working. Any ideas why not?
var checked = new Ext.grid.CheckColumn({
header: 'Test',
dataIndex: 'condition',
renderer: function(v,p,record){
var content = record.data['info'];
if(content == 'True'){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
},
listeners:{
checkchange: function(column, recordIndex, checked){
alert("checked");
}
}
});
In Ext.ux.grid.CheckColumn, add this initialize method that register a checkchange event:
initComponent: function(){
Ext.ux.grid.CheckColumn.superclass.initComponent.call(this);
this.addEvents(
'checkchange'
);
},
Then in processEvent fire the event:
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {
var record = grid.store.getAt(rowIndex);
record.set(this.dataIndex, !record.data[this.dataIndex]);
// Fire checkchange event
this.fireEvent('checkchange', this, record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},
The resulting CheckColumn component should look like this:
Ext.ns('Ext.ux.grid');
Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
// private
initComponent: function(){
Ext.ux.grid.CheckColumn.superclass.initComponent.call(this);
this.addEvents(
'checkchange'
);
},
processEvent : function(name, e, grid, rowIndex, colIndex){
if (name == 'mousedown') {
var record = grid.store.getAt(rowIndex);
record.set(this.dataIndex, !record.data[this.dataIndex]);
this.fireEvent('checkchange', this, record.data[this.dataIndex]);
return false; // Cancel row selection.
} else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}"> </div>', v ? '-on' : '');
},
// Deprecate use as a plugin. Remove in 4.0
init: Ext.emptyFn
});
// register ptype. Deprecate. Remove in 4.0
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
// backwards compat. Remove in 4.0
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
// register Column xtype
Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;
In ExtJS 3, the checkcolumn plugin does not actually use ExtJS's checkbox component, so checkbox events are not available. The checkcolumn is simply an extended grid column that has added a custom renderer to style the cell like a checkbox.
By default, the only events you can listen to are Ext.grid.Column's events (click, contextmenu, dblclick, and mousedown).
This answer to a similar question shows how to override the CheckColumn and add the beforecheckchange & checkchange events.
Simple Answer
Check box check or uncheck when user click on check box in extjs 3 grid.
use this property in grid: => columnPlugins: [1, 2],
I belive this property use in your code is wornig perfectly.
xtype:grid,
columnPlugins: [1, 2],
I have a problem. I use extjs grid. This grid will be refreshed every seconds.
I refresh with this function:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
But when someone selected a row to highlight it it reset this selection.
How can I remember the selected row and highlight it again after refresh?
This is my grid:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
Thanks guys
I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.
Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
Here is another way to select the previously selected record:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.
Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.
for extjs 4.1.7 users
need a workarround about the statement in
refreshSelection() {
...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])
}
thus setScrollTop no longer exists
so a working soluction is add
me.getView().preserveScrollOnRefresh = true;
in initComponent
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
i have make modification on this code.
If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).
This modification is in the last line of the "refreshSelection" function.
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
I have I view that extends Ext.grid.Panel and I want to be able to ask the user if he really wants to close the panel after he clicks [X]. I tried with
listeners: {
beforedestroy: function() {
//console.log('In');
return false;
}
},
but obviously it's not that simple. Any ideas on how to prevent the closing of the panel?
Thanks
Leron
P.S.
This is what I get from sencha forums, haven't test it yet:
Ext.create( 'Ext.window.Window', {
title: 'test',
width: 200,
height: 200,
listeners: {
beforeclose: function( window ) {
Ext.Msg.confirm( 'Hey', 'Are you sure you want to close?', function( answer ) {
if( answer == "yes" ) {
window.destroy();
}
} );
return false;
}
}
} ).show();
beforeclose event should work. No?
Update:
If you want to have some user interaction (i.e. confirmation question or saving data or something like that) it will be a bit tricky...
First, in the constructor of the view do something like this:
this.on('beforeclose', function() {
return this.myCloseHandler(function() { this.close(); }, this);
});
this.alreadyAsked = false;
Than create handler:
myCloseHandler: function(callback, scope) {
if (this.alreadyAsked === false) {
this.alreadyAsked = true;
Ext.MessageBox.show({
msg: 'Are you sure?',
fn: function(btn) {
if (btn == 'yes')
Ext.callback(callback, scope);
else
this.alreadyAsked = false;
}
});
return false;
}
return true;
}
Idea is - you return false immediately but have some flag and condition to go through the same logic without confirmation.
The technique I use is simply to do a window hide rather than the default destroy of the window and add a beforehide event listener. This prevents that all the components in your window that you want to prevent to destroy, are destroyed anyway. The hide event is a quite innocent event to this with. Then the Ext.msg comes, maybe even only on a certain condition. And your response on the break message finished the job. Otherwise no harm done, because false is returned.
var win = Ext.create('Ext.window.Window', {
.... your window specs ...
closeAction : 'hide',
buttons : [{
text : 'Close',
scope : me,
handler : function() {
win.hide(); // not destroy !!! that comes later !!!
}
}],
listeners : {
scope : me,
'beforehide' : function(window) {
if (some_condition == true) {
Ext.Msg.confirm( 'Confirm close of window', 'You really wanna close this window ?', function( answer ) {
if( answer == "yes" ) {
window.destroy();
}
});
return false;
}
},
'destroy' : function(window) {
// do something after the window destruction //
alert('Another window smashed');
}
}
... rest of your window specs
});
Maybe there is no need in heavy constructions. The following works perfect for me:
beforeclose: function(window) {
Ext.Msg.confirm("Hey", "Are you sure you want to close?", function(answer) {
if (answer == "yes") {
window.events.beforeclose.clearListeners();
window.close();
}
});
return false;
}
I have a problem. I use extjs grid. This grid will be refreshed every seconds.
I refresh with this function:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
But when someone selected a row to highlight it it reset this selection.
How can I remember the selected row and highlight it again after refresh?
This is my grid:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
Thanks guys
I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.
Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
Here is another way to select the previously selected record:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.
Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.
for extjs 4.1.7 users
need a workarround about the statement in
refreshSelection() {
...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])
}
thus setScrollTop no longer exists
so a working soluction is add
me.getView().preserveScrollOnRefresh = true;
in initComponent
Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
i have make modification on this code.
If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).
This modification is in the last line of the "refreshSelection" function.
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}