ExtJS Gridpanel selected rows - extjs

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');
}
}
}]
});

Related

How to add tree panel to a grid panel column in extjs

I have grid panel. I want to add a tree panel to a column in that grid panel.
Grid Panel
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
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' }
]
});
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' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Tree Store
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: 'detention', leaf: true },
{ text: 'homework', expanded: true, children: [
{ text: 'book report', leaf: true },
{ text: 'algebra', leaf: true}
] },
{ text: 'buy lottery tickets', leaf: true }
]
}
});
For example,
If I want to this tree store to come under Name: Lisa i.e, tree expands when we click on Lisa. How can we do it.
Thank you.
What you are searching for is treegrid.
For modern toolkit, check modern treegrid.
For classic toolkit, check classic treepanel with multiple columns.

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

How to uncheck the checkcolumn of perticular row in Ext grid

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();
}
}]
});

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;
}

Set a renderer for a column with a click of a button

I want to create a button that when I click on it, it will set a renderer for a column on my grid. I'm looking through the API for columns http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.grid.column.Column
and I do not see a method that says setRenderer, how can I achieve this?
Edit: I do not want to set it when I create the column ( i know there is a property to set the renderer)
You could try simply changing the renderer, no need for a setRenderer
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
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' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name',
renderer: function (value) {
return value + ' Simpson';
}},
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 400,
width: 400,
renderTo: Ext.getBody(),
bbar: [{
text: 'Change First Column Renderer',
handler: function(b) {
var grid = b.up('grid'),
columns = grid.getColumnManager().getColumns(),
column = columns[0];
column.renderer = function(value) {
return value === 'Lisa' ? 'L Simpson' : value;
}
grid.view.refreshView();
}
}]
});
Fiddle: https://fiddle.sencha.com/#fiddle/1a5e

Resources