We Keep Coding

extjs grid rowediting remove

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

Adding new property to Ext JS Grid column

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

ExtJS GridPanel with radiobutton on the columns

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

Association between models failing in Ext js 6

I am working on small example to understand association which is working fine in Ext js 5 but failing in Ext js 6 version.
Ext.onReady(function() {
// parent model
Ext.define('Continent', {
extend: 'Ext.data.Model',
field: ['name'],
hasMany: {
model: 'Country',
name: 'countries'
}
});
//child model
Ext.define('Country', {
extend: 'Ext.data.Model',
field: ['name'],
associations: [{
type: 'belongsTo',
model: 'Continent',
associationKey: 'countries',
}]
});
//created store for parent which contains child data
Ext.define('ContinentStore', {
extend: 'Ext.data.Store',
storeId: 'continent',
model: 'Continent',
autoLoad: true,
proxy: {
type: 'memory',
data: [{
name: 'Asia',
countries: [{
name: 'India'
}, {
name: 'Srilanka'
}, {
name: 'Bangladesh'
}]
}, {
name: 'Africa',
countries: [{
name: 'Nigeria'
}, {
name: 'Kenya'
}, {
name: 'South Africa'
}]
}, {
name: 'America',
countries: [{
name: 'West'
}, {
name: 'East'
}, {
name: 'South'
}]
}]
}
});
var continentGrid = Ext.create('Ext.grid.Panel', {
title: 'Continent Grid',
store: Ext.create('ContinentStore'),
width: '50%',
height: '100%',
listeners: {
select: function(cmp, record, index) {
//record.countries() will return new store.
// to append new store I have used reconfigure method.
Ext.getCmp('CountryGrid').reconfigure(record.countries());;
}
},
columns: [{
dataIndex: 'name',
text: 'Continent',
flex: 1
}]
});
var countryGrid = Ext.create('Ext.grid.Panel', {
title: 'Country Grid',
id: 'CountryGrid',
width: '50%',
height: '100%',
columns: [{
dataIndex: 'name',
text: 'Country',
flex: 1
}]
});
Ext.create('Ext.window.Window', {
width: 500,
height: 400,
layout: 'hbox',
autoShow: true,
items: [continentGrid, countryGrid]
})
//console.log(continent);
});
when I try to run the example in Ext js 6 verison getting below error.
Uncaught Error: hasMany ("Continent") and belongsTo ("Country") should not be used in conjunction to declare a relatextionship. Use only one.(…)
working fiddle

Ext js paging with local data does not work

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).