Can I add a new unique property to gridcolumn in Ext JS? I want to use that property in some other place
{
xtype: 'gridcolumn',
dataIndex: 'startupPercent',
sortable: true,
'property': 'value', // so that i can access it later
text: 'StartUp%'
}
Can I add a new unique property to gridcolumn
Yes you can and you use that property other place.
In this FIDDLE, I have created a demo provide a custom config and get on header click. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.grid.Panel', {
title: 'Demo',
store: {
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'
}]
},
columns: [{
text: 'Name',
dataIndex: 'name',
isName: true
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
renderTo: Ext.getBody(),
listeners: {
headerclick: function (ct, column, e, t, eOpts) {
if (column.isName) {
console.log(column.isName);
}
}
}
});
}
});
Related
I'm still finding my way around Extjs, I'm currently displaying text data to a UI like so:
reference: 'agentLogGrid',
store: {
xclass: 'Ext.data.ChainedStore',
source: 'LogViewSource',
},
itemConfig: {
viewModel: true,
},
columns: [{
text: 'Timestamp',
xtype: 'templatecolumn',
tpl: '{timestamp}',
flex: 1,
}, {
text: 'Data',
xtype: 'templatecolumn',
tpl: '{data}',
flex: 1,
}],...
But the texts are not highlightable, that means I can't highlight them and copy, or select and copy. When I mouse over, the pointer sees it as a link, but I can't highlight or select. How do I make just the {data} highlightable?
In classic toolkit you can use enableTextSelection property. Something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'department'],
groupField: 'department',
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
department: "Management"
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
department: "Sales"
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
department: "Sales"
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
department: "Accounting"
}, {
firstname: "Angela",
lastname: "Martin",
seniority: 5,
department: "Accounting"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'Full Name',
xtype: 'templatecolumn',
tpl: '{firstname} {lastname}',
flex: 1
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{department} ({seniority})'
}],
// USE viewConfig enableTextSelection property
viewConfig: {
enableTextSelection: true
},
height: 200,
width: 300,
renderTo: Ext.getBody()
});
}
});
In my grid I have activated the editing of the rows in the configuration. But now I want to remove this option, because only certain users should edit the table.
How can I disable or remove the plugin?
Ext.define('mdb.view.Mapping', {
extend: 'Ext.grid.Panel',
xtype: 'array-grid',
requires: [
'Ext.grid.column.Action'
],
plugins: {
gridfilters: true,
rowediting: {
clicksToMoveEditor: 1,
autoCancel: false,
//autoUpdate: false,
saveBtnText : "Speichern",
cancelBtnText: 'Abbrechen',
listeners: {
edit: 'editItem'
}
}
},
What I try is something like this
Ext.getCmp('mappingGrid').editingPlugin.editor.disable
The beforeedit event on the rowediting plugin. Return false to not allow edit return true to allow edit.
Here is a fiddle Fiddle
Try grid.getPlugin('rowediting').enable() or .disable();
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'
}, {
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: 'Grid Row Editing',
store: "simpsonsStore",
renderTo: Ext.getBody(),
height: 300,
plugins: {
rowediting: {
clicksToMoveEditor: 1,
autoCancel: false
}
},
dockedItems: [{
xtype: 'toolbar',
items: [{
text: "Disabled Row Editing",
toggledText: "Enable Row Editing",
enableToggle: true,
toggleHandler: function (button, state) {
let rowEditingPlugin = this.up('grid').getPlugin('rowediting');
rowEditingPlugin.cancelEdit();
[
button.text,
button.toggledText
] = [
button.toggledText,
button.text
];
button.updateText(button.text);
if (state) {
rowEditingPlugin.disable();
} else {
rowEditingPlugin.enable();
}
}
}]
}],
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'textfield',
allowBlank: false
}
}]
});
}
});
So i have an usual grid, with some columns:
{
xtype : 'gridpanel',
mode : "MULTI",
region : 'center',
title : "grid",
id : 'datagridResult',
margin : '10 5 5 5',
columns : [
{
xtype : 'gridcolumn',
dataIndex: 'TEST',
flex : 0.25
},
{
xtype : 'gridcolumn',
dataIndex: 'Test2'
flex : 2
},
//...
What i want is to add 3 more columns which are radiobuttons (one button per column). I tried something like this:
{
xtype : 'gridcolumn',
text : "FOR"
dataIndex: 'for',
flex : 1,
editor: {
xtype : 'radiofield',
name : 'Regex',
inputValue: 'Checked'
},
}
And it doesn't work. So i am here to ask any sugestions.
And it doesn't work. So i am here to ask any sugestions
In ExtJS have xtype :'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. It will show how is working. Hope this will help you.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', {
name: 'checked',
type: 'boolean',
defaultValue: true
}],
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'
}, {
text: 'Status',
width: 150,
xtype: 'widgetcolumn',
dataIndex: 'checked',
onWidgetAttach: function (column, widget, record) {
widget.down(`[inputValue=${record.get('checked')}]`).setValue(true);
},
widget: {
xtype: 'radiogroup',
items: [{
boxLabel: 'Yes',
inputValue: true
}, {
boxLabel: 'No',
inputValue: false
}]
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Let's assume I have a window with a grid inside.
I code this via ExtJS, version 5.1.3.
This grid has four columns and the last one has the property flex:1.
Perfect, everything is aligned.
Now I have the possibility to hide the last column. As the other columns do not have the property flex, the grid is cut inside the window.
The window looks then similar to the last screenshot in this link.
Now my question: Is it somehow possible to define kind of a temporary flex property if no column with flex is available and then reset as soon as it is again?
You can specify forceFit : true configuration in grid object.
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',
forceFit : true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 500,
width: 600,
renderTo: Ext.getBody()
});
I am using the store.group() to provide option to the user to group the grid by various fields.
Using extjs4.2.3 now after having faced many bugs in 4.2.1, store.group() does not seem to be working at all.
How to replicate:
Press the "Group" button, which should group the grid. Only sorts the data.
Choose "Group by this field" from the column menu and the grouping starts to work fine.
Similarly store.clearGrouping() behaves the same way.
Here is sample code:
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});
Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
itemId: 'gridtest',
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
itemId: 'testStore',
//groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
}, {
student: 'Student 1',
subject: 'Science',
mark: 72
}, {
student: 'Student 2',
subject: 'Math',
mark: 96
}, {
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value) {
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}],
tbar: [{
xtype: 'button',
text: 'Group',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.group('subject');
}
}, {
xtype: 'button',
text: 'clear',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.clearGrouping();
}
}]
});
Running the code in ExtJS 4.2.1 works fine on the sencha fiddle, but not on 4.2.3
I tested using the code preview option on http://docs.sencha.com/extjs/4.2.3/.
Above code is working fine in extjs-4.2.3.
Open http://docs.sencha.com/extjs/4.2.3/ and in Developer tools Console tab execute following code:-
Group on 'Group' button is working fine.
Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});
var grpGrid = Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
itemId: 'gridtest',
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
itemId: 'testStore',
//groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
}, {
student: 'Student 1',
subject: 'Science',
mark: 72
}, {
student: 'Student 2',
subject: 'Math',
mark: 96
}, {
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value) {
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}],
tbar: [{
xtype: 'button',
text: 'Group',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.group('subject');
}
}, {
xtype: 'button',
text: 'clear',
handler: function(button, e) {
var store = Ext.ComponentQuery.query('#gridtest')[0].getStore();
store.clearGrouping();
}
}]
});
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: [grpGrid]
}).show();
Issue is resolved in nightly build for ExtJS 4.2.4
Defect Id: EXTJS-15190 link