Disable tbar button based on grid data extjs 6.2 - extjs

Question

Conditionally i need to disable the toolbar button based on the grid json data, if status not "New"
tbarItems.push(
"->",
{
text: t('import'),
id: 'masterdata_import',
iconCls: 'pimcore_icon_import',
disabled: false,
scale: 'small',
handler: this.importJob.bind(this),
dataIndex: 'status',
renderer: function (value, rowIndex, record) {
if (value !== 'New') {
tbar.disable();
}
},
}
);
https://i.stack.imgur.com/8hVmN.png
Any idea how to do this?
Thanks

Answer 1

i made an example at sencha fiddle. Take a look:
https://fiddle.sencha.com/#view/editor&fiddle/2qs3
You can bind disabled parameter to parameter from viewModel, while viewModel can be updated e.g when data in store changed (event datachanged is fired).
getLayout: function () {
if (this.layout == null) {
var itemsPerPage = pimcore.helpers.grid.getDefaultPageSize(70);
this.store = pimcore.helpers.grid.buildDefaultStore(
'/admin/referenceapp/import/get-import-files?processed=0',
['date','time','sourceFileLocation','sizeReadable','status','jobReference'],
itemsPerPage,
{autoLoad: true}
);
// only when used in element context
if(this.inElementContext) {
var proxy = this.store.getProxy();
proxy.extraParams["folderDate"] = this.element.folderDate;
} else {
}
this.pagingtoolbar = pimcore.helpers.grid.buildDefaultPagingToolbar(this.store);
var tbarItems = [];
tbarItems.push(
"->",
{
text: t('import'),
id: 'masterdata_import',
iconCls: 'pimcore_icon_import',
//disabled: false,
scale: 'small',
bind: {
disabled: "{one_different_than_new}"
},
handler: this.importJob.bind(this)
}
);
var tbar = Ext.create('Ext.Toolbar', {
cls: 'main-toolbar',
items: tbarItems
});
var columns = [
{text: t("date"), sortable: true, dataIndex: 'date', flex: 100, filter: 'date'},
{text: t("time"), sortable: true, dataIndex: 'time', flex: 100, filter: 'string'},
{text: t("source_file_location"), sortable: true, dataIndex: 'sourceFileLocation', filter: 'string', flex: 200},
{text: t("size"), sortable: true, dataIndex: 'sizeReadable', filter: 'string', flex: 200},
{text: t("status"), sortable: true, dataIndex: 'status', filter: 'string', flex: 200},
{text: t("jobReference"), sortable: true, dataIndex: 'jobReference', filter: 'string', flex: 200},
];
columns.push({
xtype: 'actioncolumn',
menuText: t('delete'),
width: 40,
dataIndex: 'status',
renderer: function (value, rowIndex, record) {
if (value !== 'New') {
rowIndex.tdCls = 'importnotdelete'
}
},
disabled:false,
items: [{
tooltip: t('icon_delete_import'),
icon: "/bundles/pimcoreadmin/img/flat-color-icons/delete.svg",
handler: this.removeVersion.bind(this)
}]
});
var plugins = [];
this.grid = new Ext.grid.GridPanel({
frame: false,
title: t('plugin_referenceapp_masterdataname_importview'),
store: this.store,
region: "center",
columns: columns,
columnLines: true,
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 0,
store: this.store,
displayInfo: true,
limit:0
}),
tbar: tbar,
stripeRows: true,
autoScroll: true,
plugins: plugins,
viewConfig: {
forceFit: true
},
viewModel: {
data: {
"one_different_than_new": false
}
},
//listeners: {
// afterrender : function(model) {
// console.log(model.store.data.items);
//
// for(i = 0; i<model.store.data.items.length; i++){
//
// if (model.store.data.items[i].status !== 'New') {
// tbar.disable();
// //console.log('test');
// }
//
// else{
// //console.log('no new');
// }
// }
//
// }
//}
});
this.grid.on("rowclick", this.showDetail.bind(this));
this.detailView = new Ext.Panel({
region: "east",
minWidth: 350,
width: 350,
split: true,
layout: "fit"
});
var layoutConf = {
items: [this.grid, this.detailView],
layout: "border",
//closable: !this.inElementContext
};
if(!this.inElementContext) {
//layoutConf["title"] = t('product_versions');
}
this.layout = new Ext.Panel(layoutConf);
this.layout.on("activate", function () {
this.store.load();
var check = function () {
var isDifferentThanNew = false;
this.store.each(function (r) {
if (r.get('status') != 'New') {
isDifferentThanNew = true;
}
});
this.grid.getViewModel().set('one_different_than_new', isDifferentThanNew);
}
// Listen on datachanged and update
this.store.on('update', function (s) {
check();
});
this.store.on('datachanged', function (s) {
check();
});
check();
}.bind(this));
}
return this.layout;
},