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()
});
}
});
Related
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
}
}]
});
}
});
I'm new to ExtJs, tried the getting started and still reach problems quick. Maybe someone can help me with that easy example. I can't visualize the data of the data store. Panel and columns are working fine but no data. Do you find my mistake?
Main.js:
Ext.define('QuickApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'tabpanel',
items: [{
title: 'Employee Directory',
xtype: 'grid',
iconCls: 'x-fa fa-users',
store: 'QuickApp.store.Employee', //change here
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
},{
title: 'About Sencha',
iconCls: 'x-fa fa-info-circle'
}]
});
Store:
Ext.define('QuickApp.store.Employee', {
extend: 'Ext.data.Store',
model: 'QuickApp.model.Employee',
data: [{
"firstName": "Jean",
"lastName": "Grey",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(372) 792-6728"
}, {
"firstName": "Phillip",
"lastName": "Fry",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(318) 224-8644"
}, {
"firstName": "Peter",
"lastName": "Quill",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(718) 480-8560"
}]
});
Model:
Ext.define('QuickApp.model.Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'officeLocation', type: 'int'},
{name: 'phoneNumber', type: 'string'}
]
});
Thanks!
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);
}
}
}
});
}
});
I try to enable paging with ExtJs4 grid. Paging toolbar looks like it is working but paging is not enabled in grid.Can you help me about what I am missing?
Ext.onReady(function () {
var i = 1;
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'age', type: 'int' },
{ name: 'eyeColor', type: 'string' }
]
});
It looks that the problem is with totalCount but, there is something more.
var store= Ext.create('Ext.data.Store', {
model: 'User',
totalCount:50,
pageSize: 10,
autoLoad: { start: 0, limit: 10 },
proxy: {
type: 'memory',
reader: {
root: 'users',
totalProperty: 'totalCount'
}
},
data: [
{ id: i++, firstName: 'Ed', lastName: 'Spencer', age:20, eyeColor: 'blue' },
{ id: i++, firstName: 'Tommy', lastName: 'Maintz', age: 30, eyeColor: 'black' },
{ id: i++, firstName: 'Aaron', lastName: 'Conran', age: 40, eyeColor: 'blue' },
{ id: i++, firstName: 'Jamie', lastName: 'Avins', age: 50, eyeColor: 'black' },
{ id: i++, firstName: 'Ed', lastName: 'Spencer', age: 20, eyeColor: 'blue' }
.
.
.
]
});
Paging toolbar looks like it is working but grid values does not change according to the page numbers.
Ext.create('Ext.grid.Panel', {
title: 'Users',
store: store,
proxy: {
type: 'memory',
enablePaging: true
},
columns: [
{ header: 'ID', dataIndex: 'id', width:50 },
{ header: 'Name', dataIndex: 'firstName' },
{ header: 'Last Name', dataIndex: 'lastName' },
{ header: 'Age', dataIndex: 'age', width: 50 },
{ header: 'Eye Color', dataIndex: 'eyeColor' }
],
height: 600,
width: 800,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
pageSize: 10,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
});
You need proxy: 'pagingmemory' which is Ext.ux.data.PagingMemoryProxy.
From doc:
Paging with Local Data
Paging can also be accomplished with local data using extensions:
Ext.ux.data.PagingStore
Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
Also note that there is no need to have:
totalCount in the store config (it will be provided by the proxy);
proxy on the grid (it's already within the store);
pageSize in the paging toolbar config (will be taken from the store).
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