#extjs #extjs6.2
#extjs #extjs6.2
Вопрос:
Условно мне нужно отключить кнопку панели инструментов на основе данных grid json, если статус не «Новый»
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
Есть идеи, как это сделать? Спасибо
Комментарии:
1. Вам нужно отключить панель инструментов на основе всех записей или выбранных записей?
2. Обычно отключают панель инструментов на основе всех записей.
3. @Jam.k можете ли вы предоставить больше кода? Находится ли tbar в пределах видимости? Где определяется tbar? Одним из способов было бы использование Ext.ComponentQuery. запрос(‘#tbarId’)[0].setDisabled(истина). Где tbarId будет идентификатором элемента: ‘id’, который вы определили. В любом случае вам нужен setDisabled (true), чтобы отключить его.
Ответ №1:
я сделал пример в sencha fiddle. Взгляните:
https://fiddle.sencha.com/#view/editoramp;fiddle/2qs3
Вы можете привязать отключенный параметр к параметру из ViewModel, в то время как ViewModel может обновляться, например, при изменении данных в хранилище (срабатывает событие datachanged
).
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;
},
Комментарии:
1. я попробовал код, но кнопка остается отключенной, хотя у меня есть запись со статусом «новая»
2. Ой, извините, я не сохранил последнюю правку. Пожалуйста, проверьте сейчас.
3. я использую this.store = pimcore.helpers.grid.buildDefaultStore, поэтому, если я изменил на store.each> this.store.each, я получаю ошибку. есть идеи, почему?
4. Вместо определения следует использовать экземпляр хранилища. Возможно, использовать
this.store = Ext.getStore("pimcore.helpers.grid.buildDefaultStore");
. Можете ли вы прикрепить кодpimcore.helpers.grid.buildDefaultStore
?5. Вы должны использовать
this.store.on('update', function (s) { check(); });
вместоstore.on('update', function (s) { check(); });
и то же самое дляstore.on('datachanged'...
.