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