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

What is the proper way to filtering ViewModel stores and implement to ExtJS Panel?

Through ViewModel stores I'm getting this JSON data;
{
"success": true,
"msg": "OK",
"count": 2,
"data": [
{
"firstname": "BLA",
"lastname": "BLALA",
"isactive": true,
...
},
{
"firstname": "BLAAA",
"lastname": "BLALAAA",
"isactive": false,
...
}
I have two grids on one panel and one of them will load data only with isactive: true field, other grid will load only with false. So where and how I need to filtering store to load specified data to grids?
Here is VM;
Ext.define('MyApp.view.ListingVM', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.listing',
requires: [...],
reference: 'loyaltyvm',
stores: {
// Should I define the filter on here?
bonusTrans: {
storeId: 'bonusTrans',
// reference: 'bonusTrans',
model: 'MyApp.model.BonusTrans',
autoLoad: true,
session: true,
pageSize: MyApp.Globals.LIST_PAGE_SIZE
}
}
});
This is panel's grid sample where defined both of Grids. I've tried several way to get store and filtering but couldn't be succes;
getColumns: function () {
var me = this;
var panelItems = [
{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch', pack: 'start'},
items: [
xtype: 'bonustrans',
flex: 1,
title: 'Current Bonus',
getListCols: function () {
var me = this;
debugger;
// var activeStore = Ext.getStore('bonusTrans');
// var activeStore = me.viewModel.get('bonusTrans');
// var view = me.getView();
// var vm = view.getViewModel();
// var vm.getStore('bonusTrans')
// var activeStore = me.getViewModel().getStore('bonusTrans');
var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
activeStore.filter('isactive', 'true');
var listCols = [
{
xtype: 'firstnamecol',
flex: 1
},
{
xtype: 'checkoutcol'
},
{
xtype: 'bonustotalcol'
}
];
return listCols;
}
//... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Use chained stores, fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
new Ext.container.Viewport({
layout: {
type: 'hbox',
align: 'stretch'
},
viewModel: {
stores: {
everything: {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json'
}
},
active: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: true
}]
},
inactive: {
type: 'chained',
source: '{everything}',
filters: [{
property: 'active',
value: false
}]
}
}
},
items: [{
flex: 1,
xtype: 'gridpanel',
title: 'Active',
bind: '{active}',
columns: [{
dataIndex: 'name'
}]
}, {
flex: 1,
xtype: 'gridpanel',
title: 'Inactive',
bind: '{inactive}',
columns: [{
dataIndex: 'name'
}]
}]
});
}
});

The way of chained stores is surely the best,
here you can see a working fiddle on classic
and here is the code:
Ext.application({
name: 'Fiddle',
launch: function () {
var storeAll = Ext.create('Ext.data.Store', {
storeId: 'storeAll',
fields: [{
name: 'firstname'
}, {
name: 'lastname'
}, {
name: 'active'
}],
data: [{
firstname: 'test1',
lastname: 'test1',
active: true
}, {
firstname: 'test2',
lastname: 'test2',
active: true
}, {
firstname: 'test3',
lastname: 'test3',
active: false
}]
}),
chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: true
}]
}),
chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
source: storeAll,
filters: [{
property: 'active',
value: false
}]
});
Ext.create({
xtype: 'viewport',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'gridpanel',
title: 'grid ALL',
store: storeAll,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid active',
store: chainedStoreActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}, {
xtype: 'gridpanel',
title: 'grid inactive',
store: chainedStoreNoActive,
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}],
flex: 1
}],
renderTo: Ext.getBody()
});
}
});
The global or the "allelements" store, need to be a global store, the chained ones can be created in a viewmodel of a view.

EXT JS Get ID on selection by column renderer

Using ExtJS 4.2.3, I have GRID PANEL with list of attachments. Grid panel has cellclick listener which start to download file after selection cell. Need to remake code for image click in column renderer (column name 'Save')
Example of current code with cell click:
FileGrid = new Ext.grid.Panel({
renderTo: "EXT-CONTENT",
width: 500,
height: 600,
listeners: {
cellclick: function (table, td, cellIndex, record, tr, rowIndex, e) {
var url = 'http://.../Attachment/Get?document_GUID=' + record.get("document_GUID");
console.log(url);
window.location = url;
}
},
Code with column 'Save' where I need to reproduce cellclick function by column renderer:
},
columns: {
defaults: { filter: true },
items: [
{
text: 'Attachname', dataIndex: 'attachment_fileName', width: 395, cellWrap: true,
},
{
text: 'Save', width: 100, align: 'center', sortable: false, menuDisabled: true, cellWrap: true,
renderer: function (val) {
return '<a href="http://.../Attachment/Get?document" onclick="????">' + "<img src='/APPLICATION/Images/Save24.gif'/>" +
'</a>';
}
},
]
},
store: Ext.data.StoreManager.lookup('FileStore')
});

You need to use actioncolumn for this.
In this FIDDLE, I have create a demo using your code and put modification. I hope this will help or guide you to achieve your requirement.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'document_GUID'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"document_GUID": 123
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234",
"document_GUID": 124
}, {
'name': 'Homer',
"email": "homer#simpsons.com",
"phone": "555-222-1244",
"document_GUID": 125
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254",
"document_GUID": 126
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
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'
}, {
xtype: 'actioncolumn',
width: 50,
text: 'Save',
items: [{
icon: 'https://image.flaticon.com/icons/svg/69/69656.svg', // Use a URL in the icon config
itemId: 'save',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var url = 'http://Attachment/Get?document_GUID=' + rec.get("document_GUID") + '_' + rec.get("name");
alert(url);
console.log(url);
}
}]
}],
height: 200,
renderTo: Ext.getBody()
});

Have you tried to use a action column instead?
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'urlToMyImage/image.png',
tooltip: 'Do Stuff',
handler: function(grid, rowIndex, colIndex) {
//The hole record to play with
var rec = grid.getStore().getAt(rowIndex);
//the ID
alert("My ID" + rec.get('MyIDColumn'));
}
}]
}

Confirmation box click No button, uncheck the Grid check box cell ExtJs

In Grid, I want to uncheck the checkbox if in confirmation box, I click 'No' button, I am trying by setting checked false. Its not working.
Ext.create('Ext.grid.Panel', {
columns : [
{
xtype: 'checkcolumn',
id: 'device',
text: 'Device',
dataIndex: 'device',
checkboxToggle: true,
hidden: false,
action: "checkchange"
} ]
});
Action is defined in controller file
'Grid [action=checkchange]' {
checkchange: function (column, rowIndex) {
if (checked == true) {
Ext.MessageBox.confirm({
cls: 'window-alert',
buttons: Ext.Msg.YESNO,
msg: 'Are you sure?',
fn: function (btn) {
if (btn === 'yes') {
} else {
var grid = column.up('Grid');
var gridStore = grid.getStore();
var rec = gridStore.getAt(rowIndex);
rec.get('device').checked = false;
}
}
});
}
}
}
});
}

Try to use listeners for checkchange of checkcolumn
I have created an demo how it is working in ExtJs4.2 you can see here Sencha Fiddle
Hope it will help you to solve your problem.
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone', {
name: 'isChecked',
type: 'boolean',
defaultValue: false
}],
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: store,
columns: [{
xtype: 'checkcolumn',
width: 30,
sortable: false,
dataIndex: 'isChecked',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, rowIndex, checked, record, e, eOpts) {
if (checked) {
Ext.MessageBox.confirm({
cls: 'window-alert',
buttons: Ext.Msg.YESNO,
msg: 'Are you sure?',
fn: function (btn) {
if (btn === 'yes') {
column.up('grid').getSelectionModel().select(record, true, true)
} else {
column.up('grid').getStore().getAt(rowIndex).set('isChecked', false);
}
}
});
}
}
}
}, {
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 500,
width: '100%',
renderTo: Ext.getBody()
});

Extjs - displaying date in grid column and click event for grid row

I have tried different ways of displaying date in grid column and implementing click event for grid row.
My requirements are:
1 Display date in grid column when date in my object is of form: "dateval": "2014-09-05T16:19:39 +04:00"
My data:
data: [
{
"age": 13,
"name": "Ben Watson",
"gender": "male",
"phone": "+1 (548) 314-8928",
"registered": "2014-09-05T16:19:39 +04:00"
}
code:
function render_date(val) {
val = Ext.util.Format.date(val, 'Y-m-d');
return val;
}
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Age', dataIndex: 'age' },
{
text: 'Registered',
dataIndex: 'registered',
type: 'date',
dateFormat: 'timestamp',
renderer: render_date
}
]
2 When the user clicks a grid row in a panel, display the data in the row in the adjacent panel.
I am using ext.define and extend in this application

I had a play around with your code and discovered that the date is not being parsed by javascript correctly with the space in the datetime string. I removed all spaces and it worked fine for me.
See this Fiddle (code below in case of broken link)
Ext.application({
name: 'MyApp',
launch: function() {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'registered'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
});
function render_date(val) {
var date = new Date(val.replace(" ", ""));
val = Ext.util.Format.date(date, 'Y-m-d');
return val;
}
Ext.create("Ext.grid.Panel", {
title: 'Simpsons',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selModel: new Ext.selection.RowModel({
mode: "SINGLE"
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'Registered',
dataIndex: 'registered',
type: 'date',
dateFormat: 'timestamp',
renderer: render_date
}],
height: 200,
width: 800,
});
}
});
// data1.json
{
"items": [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"registered": "2014-09-05T16:19:39 +04:00"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234",
"registered": "2014-09-05T16:19:39 +04:00"
}, {
'name': 'Homer',
"email": "homer#simpsons.com",
"phone": "555-222-1244",
"registered": "2014-09-05T16:19:39 +04:00"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254",
"registered": "2014-09-05T16:19:39 +04:00"
}]
}