How to uncheck the checkcolumn of perticular row in Ext grid - extjs

I have a grid which has a column of checkboxes. I have used xtype checkcolumn
for this. follow fiddle here: https://fiddle.sencha.com/#view/editor&fiddle/2ano
Now I want to uncheck checkbox at perticular(in this case 2nd) row on click of given button. I tried getting them using xtypes but no luck.
finally I found a workaround.
store.getAt(1).data.active = false;
grid.getView().refresh();
It works but not sure if its the correct way to do so.
I will be glad for any suggestions.
Thank you.

One way as per your code.
You can use this methods of grid store store.each(), store.clearFilter() and store.filter('active',true).
In this FIDDLE, you can check here uncheck checked columns using record.set('active',false).
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'active'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
active: false
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
active: true
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
active: false
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
active: false
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
itemId: 'test',
renderTo: Ext.getBody(),
store: store,
buttons: [{
text: 'Un check',
handler: function () {
var store = this.up('grid').getStore();
store.clearFilter();
store.filter('active', true);
store.each(function (rec) {
rec.set('active', false);
});
store.clearFilter();
}
}],
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'active'
}]
});
Another way as per your code.
You can use selModel and selType configs for grid.
In this FIDDLE, I have created a demo using selType and selModel config. it will help you or guide you more about grid checkbox selection.
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
id: 'testGrid',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
renderTo: Ext.getBody(),
selModel: {
checkOnly: false,
//injectCheckbox: 'last',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
buttons: [{
text: 'Select All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().selectAll();
}
}, {
text: 'Deselect All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().deselectAll();
}
}]
});

Related

Ext.Net Grid Panel with Selection Model readonly

I have a grid panel with a checkbox selection model. I also have an initial set of data to fill the grid: some of the rows that are inserted from code behind ( in the page load ) are checked (example in the image below);
My problem is that after the initial insertion of the rows I need to make the checkbox uncheckable.
Any suggestions?
I can't use gridPanel.setReadOnly(true) and also
BeforeDeselect Handler="return false;"
(because with that also the initial inserted rows appears unchecked).
Thanks
You can do following code
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'email', 'phone'],
data: [{
id: 1,
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
id: 2,
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
id: 3,
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
id: 4,
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
var records = [store.getById(1), store.getById(3)];
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
selModel: {
selType: 'checkboxmodel'
},
listeners: {
boxready: function() {
this.getSelectionModel().select(records, false, true);
},
selectionchange: function() {
this.getSelectionModel().deselectAll(true);
this.getSelectionModel().select(records, false, true);
}
}
});
Records are rows that you want to be selected all the time
Note: It's in ExtJs not Ext.Net

ComboBox keep visible in Grid editor

I have an editor comboBox in Grid and it only shows when I click row. How to keep it permanent visible in grid? Thanks
How to keep it permanent visible in grid?
If you are using ExtJS version 5.x or higher then you can use widgetcolumn
A widget column is configured with a widget config object which specifies an xtype to indicate which type of Widget or Component belongs in the cells of this column.
I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', {
name: 'checked',
defaultValue: 'AL'
}],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
}),
states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'State',
width: 150,
xtype: 'widgetcolumn',
dataIndex: 'checked',
widget: {
xtype: 'combobox',
flex: 1,
emptyText: 'Select State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
store: states,
listeners: {
select: function (combo, record) {
Ext.Msg.alert('Success', 'Good you have selected <b>' + record.get('name') + '</b>')
var grid = combo.up('grid'),
index = grid.getView().indexOf(combo.el.up('table')),
record = grid.getStore().getAt(index);
console.log(record.getData());
}
}
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

Ext.grid.column.Check click event to the CheckBox itself not the whole cell area

Is there any to way to restrict check column action to only check box and restrict to the cell area. sample code for check column which i have copied from docs.
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', 'active'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
active: true
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
active: true
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
active: false
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
active: true
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
height: 200,
width: 400,
renderTo: Ext.getBody(),
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'active'
}]
});
Kindly help me on this.
This solution will work on every version of ExtJS from 4.2.0 to 4.2.6.
Ext.define('CheckColumn', {
override: 'Ext.grid.column.' + (!!Ext.grid.column.Check ? 'Check': 'CheckColumn'),
processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
var me = this,
key = type === 'keydown' && e.getKey(),
mousedown = type == 'mousedown';
if (mousedown && !Ext.fly(e.getTarget()).hasCls('x-grid-checkcolumn')) {
return !me.stopSelection;
}
me.callParent([type, view, cell, recordIndex, cellIndex, e, record, row]);
}
});
Based on Guiherme lopes answer I have applied the fix in beforecheckchange.
beforecheckchange: function(me , rowIndex , checked , record , e , eOpts){
if(!Ext.fly(e.getTarget()).hasCls('x-grid-checkcolumn')){
return false;
}
return true;
}

Renderer component column grid in Sencha ExtJs 5.1.0

I has problem about renderer, I use renderer to create numberfield in column of grid, but it doesn't work, please see code and help me where I wrong.
xtype:'gridcolumn',
header: 'Quantity',
dataIndex: 'qty',
hideable: false,
sortable : true,
renderer:function(value) {
var id = Ext.id();
var numberField = Ext.create('Ext.form.field.Number', {
height:100,
});
return '<div id="' + id + '"></div>';
}
Thanks for your help.
I think you should be looking at the Cell Editing plugin. In the code above you are creating an instance of a number field but not actually applying it to anything.
The cell editing plugin allows you to use field components such as text field, number field etc in a column and helps manage edited data.
Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
number: 0
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
num: 1
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
num: 2
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
num: 3
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Number',
dataIndex: 'num',
editor: 'numberfield'
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});

ExtJS Gridpanel selected rows

I am design ExtJs Gridpanel with Checkboxes...
How to get checked records for save the data
Use getSelections to get all selected records and getSelected to get the first record.
var selected = checkBoxSelectionModelObj.getSelections();
for (var i = 0; i < selected.length; i++)
{
alert(selected[i].data.code);
}
In ExtJs docs provide method to get selected record in grid grid.getSelection(). You can refer ExtJs docs
I have create small demo to show you, how it work. Sencha fiddle example
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}, {
name: 'AMargeia',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
id: 'testGrid',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
selModel: {
checkOnly: false,
injectCheckbox: 'last',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
buttons: [{
text: 'Select All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().selectAll();
}
}, {
text: 'Deselect All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().deselectAll();
}
},{
text:'Print Selected Recod',
handler:function(){
var selection = Ext.getCmp('testGrid').getSelection();
if(selection.length){
let name='';
selection.map(item=>{
name+=item.get('name')+'<br>';
});
Ext.Msg.alert('Selected Record',name);
}else{
Ext.Msg.alert('Error','Please select record');
}
}
}]
});

Resources