My checkbox column:
{
xtype: 'widgetcolumn',
text: 'Selection',
tdCls: 'actions',
header: 'Selection',
width: '5%',
dataIndex: 'selection',
widget: {
xtype: 'checkbox',
defaultBindProperty: 'disabled',
listeners: {
afterrender: function (chb) {
var rec = chb.getWidgetRecord();
chb.setValue(rec.get('selection'));
chb.on('change', this.checkHandler);
chb.setDisabled(rec.get('selection_disabled'));
},
scope: this
}
}
}
How get checkbox in cellclick grid event for set value proggramatically? In cellclick me need change value of checkbox(cbox.setValue(!cbox.getValue()); or the same).
Not sure if it is best solution, but you can do something like this:
{
xtype: 'widgetcolumn',
dataIndex: 'checked',
flex: 1,
text: 'Checked',
widget: {
xtype: 'checkbox'
},
onWidgetAttach: function(column, widget, record) {
// Make sure your property / id pair is unique
// You can use Ext.id() to generate id for your record and widget
widget.widgetId = record.get('id');
}
}
and
grid.on('cellclick', function(view, td, cellIndex, record) {
var rowWidget = Ext.ComponentQuery.query('checkbox[widgetId=' + record.get('id') + ']')[0];
if(rowWidget) {
rowWidget.setValue(!rowWidget.getValue());
}
});
Working fiddle
Related
I have grid panel, its having check all options. But I'm stuck on the selected dataIndex which having value = 'N'. There is Y or N. If some rows having value N, it must not check when I click check all. I had already make validation on it. it's work. But I want also the uncheck is appear when i click check all if it's value is 'N'. This is my code
var sm;
sm = Ext.create('Ext.selection.CheckboxModel');
gridMain = Ext.create('Ext.grid.Panel', {
id: 'gridMyapproval',
renderTo: Ext.get("sa-grid"),
store: 'myapproval-store',
selModel: sm,
height: mainContentHeight - 63, //480//mainContentHeight-138,
//title: 'Request',
columns: [{
text: 'Request Type',
width: 100,
dataIndex: 'WorkflowType'
}, {
text: 'Requestor ID',
width: 100,
dataIndex: 'RequestedByID'
}, {
text: 'Requestor Name',
width: 200,
dataIndex: 'RequestedByName'
}, {
text: 'Description',
flex: 1,
dataIndex: 'RequestDescription'
}, {
text: 'Status',
width: 150,
dataIndex: 'RequestStatusDescription'
},
{
text: 'EnableApprove',
width: 150,
dataIndex: 'EnableApprove'
},
],
dockedItems: [{
xtype: 'toolbar',
items: [actApproveAll]
}],
listeners: {
itemdblclick: function (view, record, item, index, e, eOpts) {
isGridClicked = true;
ViewDetails(FormState.VIEW);
},
afterrender: function (row, model, index) {
//$('.x-column-header-checkbox').css('display','none');
if (model.data.EnableApprove == 'N') {
grid.getSelectionModel().deselect();
}
},
selectionchange: function (row, model, index) {
if (model.data.EnableApprove == 'N') {
grid.getSelectionModel().deselect();
}
},
beforeselect: function (row, model, index) {
if (model.data.EnableApprove == 'N') {
MsgBox("Enable Approve !");
return false;
}
}
}
});
I tried to write it on afterrenderer, but it's not work.
I think you have to overrite selectAll (source) and deselectAll (source) methods of Ext.selection.CheckboxModelView.
Check this question and answer, I guess solution is somewhat you need.
I have a gridpanel with rowediting plugin enabled. I was wondering if it is possible to display in the same cell either checkbox control or numberfield based on data that's being returned from server. I have not seen anything like that before and googling has not yield any results so it may be impossible at all. It looks like I have to specify different editor types not per each column but per each cell.
How can I achieve that?
P.S. I must have a chance to edit that cell, i.e. change number value or check/uncheck checkbox.
That is very easy to achieve, you will need to use the getEditor method of your grid column and get it to return the form field you want:
Example:
{
xtype: 'gridcolumn',
getEditor: function(record) {
var grid = this.up('grid'),
cellediting = grid.findPlugin('cellediting'),
editors = cellediting.editors,
editor = editors.getByKey(this.id),
fieldType;
if (editor) {
// Do this to avoid memory leaks
editors.remove(editor);
}
fieldType = isNaN(parseFloat(record.get('salary'))) ? 'textfield' : 'numberfield';
return {
xtype: fieldType,
allowBlank: false
};
},
dataIndex: 'salary',
text: 'Salary',
flex: 1
}
I have created a fiddle demonstrating the use of this method, if the column Salary holds a string it will edit with a textfield, if it holds a number, it will edit with a Numberfield.
Hope it helps
Fiddle: https://fiddle.sencha.com/#fiddle/c2m
My fiddle is working with the CellEditor plugin, you will have to make the adjustments to make it work with your RowEditor plugin, for further reference, check the documentation for Grid Column and the getEditor method.
Many thanks to Guilherme Lopes for the nice code to begin with. Here is the sample of what I finally got:
var data = [{
name: 'Richard Wallace',
age: 24,
hired: '9/21/2013',
active: true,
salary: 1,
checkbox: true
}, {
name: 'Phyllis Diaz',
age: 29,
hired: '1/27/2009',
active: false,
salary: 41244,
checkbox: false
}, {
name: 'Kathryn Kelley',
age: 23,
hired: '9/14/2011',
active: false,
salary: 98599.9,
checkbox: false
}, {
name: 'Annie Willis',
age: 36,
hired: '4/11/2011',
active: true,
salary: 0,
checkbox: true
}];
var store = Ext.create('Ext.data.Store', {
data: data,
fields: [{
name: 'name'
}, {
type: 'float',
name: 'age'
}, {
type: 'date',
name: 'hired'
}, {
type: 'boolean',
name: 'active'
}, {
name: 'salary'
}]
});
Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel',
height: 315,
width: 784,
title: 'Employees',
store: store,
viewConfig: {
listeners: {
beforecellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
if (cellIndex == 4 && record.get('checkbox')) {
if (record.get('salary')) {
record.set('salary', 0);
} else {
record.set('salary', 1);
}
return false;
}
return true;
}
}
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
flex: 1,
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
}, {
xtype: 'datecolumn',
dataIndex: 'hired',
text: 'Hired',
flex: 1
}, {
xtype: 'checkcolumn',
dataIndex: 'active',
text: 'Active'
}, {
xtype: 'gridcolumn',
getEditor: function (record) {
var fieldType = record.get('checkbox') ? 'checkboxfield' : 'textfield';
return Ext.create('Ext.grid.CellEditor', {
field: {
xtype: fieldType,
allowBlank: false
}
});
},
renderer: function (value, metaData) {
if (metaData.record.get('checkbox')) {
if (metaData.record.get('salary')) {
return '<div style="text-align: center"><img class="x-grid-checkcolumn x-grid-checkcolumn-checked" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
} else {
return '<div style="text-align: center"><img class="x-grid-checkcolumn" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
}
}
return value;
},
dataIndex: 'salary',
text: 'Salary',
flex: 1
}],
plugins: [{
ptype: 'cellediting',
autoCancel: false,
clicksToEdit: 1
}]
});
Ext.create('MyApp.view.MyGridPanel', {
renderTo: Ext.getBody()
});
Working example on Sencha's fiddle https://fiddle.sencha.com/#fiddle/c3p
Editor contains one field, and this editor is used for the whole column. You can't specify two xtypes or multiple editors for one column.
That said, it is not completely impossible, but it will require some work.
You will have to define a new custom field with custom xtype.
Tell this field to either render a checkboxfield or a numberfield, depending on the value.
This will require you to override/implement most if not all functions that a Ext.form.field.Base has...
i'm new comer in ext js..
i want to display one of field in grid ext js. the field type is smallint. let's say it "Dayfrom". I want to display DayFrom in Grid like (-3) days in minus without calculate the value. only display in grid.
i have try to for this. but not work
var s = Ext.String.format('<div class="{0}">{1}</div>','-','--');
storePendingApprovalDetail = Ext.create('Ext.data.Store', {
storeId: 'pendingapprovaldetail-store',
model: 'pendingapprovaldetail-model',
sorters: ['DayFrom']
});
gridPendingApprovalDetail = Ext.create('Ext.grid.Panel', {
store: 'pendingapprovaldetail-store',
columns: [{
text: 'Day From',
flex: 1,
renderer: s,
dataIndex: 'DayFrom'
}, {
text: 'Day To',
flex: 1,
dataIndex: 'DayTo'
}, {
text: 'Frequent',
flex: 1,
dataIndex: 'Frequent'
}],
dockedItems: [{
xtype: 'toolbar',
items: [actAddPendingApprovalDetail, actEditPendingApprovalDetail, actDeletePendingApprovalDetail]
}],
listeners: {
}
});
Have you looked at the renderer example at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer ?
Do you actually know what Ext.String.format does? If not, please read http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.String-method-format
If you had done so, and understood, your code for the renderer would be sth like this:
renderer: function(value){
if(typeof value=="number") return -value;
return value;
}
many thanks buddies... :)
i'm using this and it works
gridPendingApprovalDetail = Ext.create('Ext.grid.Panel', {
store: 'pendingapprovaldetail-store',
columns: [{
text: 'Day From',
flex: 1,
dataIndex: 'DayFrom', renderer: function (value, metaData, record, rowIndex, colIndex, store) {
var returnString = "-" + value;
return returnString;
}
}, {
text: 'Day To',
flex: 1,
dataIndex: 'DayTo'
}, {
text: 'Frequent',
flex: 1,
dataIndex: 'Frequent'
}],
dockedItems: [{
xtype: 'toolbar',
items: [actAddPendingApprovalDetail, actEditPendingApprovalDetail, actDeletePendingApprovalDetail]
}],
listeners: {
}
});
I am on ExtJs3.2.
There is a gridpanel with a column having a textField as an editor.
On change of value in the textfield - i need the corresponding row to be highlighted.
How do I get the 'owning' row index of the text field?
columns: [
...........
{header: 'Revenues',dataIndex: 'percentage',
editor: new Ext.form.TextField({
listeners: {
'change' : function (field, newValue, oldValue) {
if(oldValue!=newValue){
.......
//How do I get the row index?
Ext.fly(grid.getView().getRow(row)).addClass('yellow-row');
}
}
}
Is there any other way to achieve this?
Could you please try below?
var grid = Ext.grid.GridPanel({
store: yourStore,
id: 'myGrid',
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'Company', header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Change', dataIndex: 'change'},
{
header: 'Revenue',
dataIndex: 'percentage',
editor: new Ext.form.TextField({
listeners: {
'change': function(field, newValue, oldValue) {
if (oldValue != newValue) {
var sel = Ext.getCmp('myGrid').getSelectionModel().getSelected();
// if you select more than one record use getSelections instead of getSelected
console.log(sel);
}
}
}
})
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
width: 500,
height: 300,
frame: true,
title: 'My Grid'
});
I can't find how to open the context menu correctly in a grid with checkbox columns. Whenever the right click is performed on a checkbox cell, the checkbox is toggled. This is not what one expects for a context menu.
onAdminListCellContextMenu: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
e.stopEvent(); // this is where the right click should have been stopped from toggling the button underneath!?
var sample = Ext.getCmp('AdminListContextMenu') || new Admin.view.AdminListContextMenu;
sample.showAt(e.xy);
}
Which is called from my Grid Panel:
xtype: 'gridpanel',
flex: 1,
id: 'AdminList',
store: 'AdminStore',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'user',
text: 'User',
editor: {xtype: 'textfield'}
},{
xtype: 'checkcolumn',
dataIndex: 'admins',
text: 'Grant admin rights'
}],
listeners: {
cellcontextmenu: {
fn: me.onAdminListCellContextMenu,
scope: me
}
}
Try this and let me know the result.
xtype: 'gridpanel',
flex: 1,
id: 'AdminList',
store: 'AdminStore',
selModel: Ext.create('Ext.selection.CheckboxModel', {
selType: 'checkboxmodel',
mode: 'SIMPLE',
checkOnly: true,
allowDeselect: true,
ignoreRightMouseSelection: true
},
multiSelect: true,
columns: [{
xtype: 'gridcolumn',
dataIndex: 'user',
text: 'User',
editor: {xtype: 'textfield'}
},{
xtype: 'checkcolumn',
dataIndex: 'admins',
text: 'Grant admin rights'
}],
listeners: {
beforeitemmousedown: {
function(grid, record, item, index, e, eOpts) {
if (e.button == 0) {
allowSelection = true;
} else {
allowSelection = false;
return false;
}
}
},
cellcontextmenu: {
fn: me.onAdminListCellContextMenu,
scope: me
}
}
Ext.define('Ext.override.CheckColumn',{
override:'Ext.grid.column.Check',
processEvent:function(type, view, cell, recordIndex, cellIndex, e, record, row) {
if(type == "mousedown" && e.button > 0) return; // prevent mousedown event if mouse button not the left button.
return this.callParent(arguments);
}
});
Tested in ExtJS 6.0.1, use at your own risk.