Hello,
I have experimented to add a tab in manager resource page.
This shows only a grid with some data (resources joined).
The tab is only shown for resources with special parent ID. This is down via plugin and the Event ‘OnDocFormPrerender’.
There add the JS with definitions.
If I commented out the JS includes, there is no problem. But I dont understand why the grid JS produces this error while want to save resource.
Here the definitions:
var Distributor = function(config) {
config = config || {};
config.record = {};
Distributor.superclass.constructor.call(this,config);
};
Ext.extend(Distributor,Ext.Component,{
page:{},window:{},grid:{},tree:{},panel:{},combo:{},config: {},view: {}
,isHidden: function(field){
if(Ext.getCmp(field).isVisible()){
return false;
}else{
return true;
}
}
});
Ext.reg('distributor',Distributor);
Distributor = new Distributor();
Ext.onReady(function() {
//Hide unwanted fields
//MODx.hideField("modx-panel-resource",["uri_override"]);
//MODx.hideField("modx-panel-resource", ["searchable"]);
//Add new tab
MODx.addTab("modx-resource-tabs",{
title:_('brandstab')
,id:"brands-tab"
,bodyStyle: 'padding:0;'
,items: [{
xtype: 'stercseo-vtabs-options'
,bodyStyle: 'min-height:300px;'
,items:[{
title: _('brandstab')
,id: '301-redirects'
,items: [{
xtype: 'container'
,layout: 'form'
,labelAlign: 'top'
,labelSeparator: ''
,items: [{
xtype: 'stercseo-grid-items'
,bodyStyle: 'margin-bottom: 10px;'
,bbar: false
,store: Distributor.record.test
},{
xtype: 'label'
,forId: 'pagetitle'
,text: _('brand')
,cls: 'desc-under'
},{
xtype: 'hidden',
name: 'id',
id: 'sterceseo-urls',
value: 'false'
}]
}]
}]
}]
});
});
Distributor.grid.Items = function(config) {
config = config || {};
Ext.applyIf(config, {
id: 'brands-grid-items',
cls: 'brands-grid',
url: Distributor.config.connector_url,
baseParams: {
action: 'mgr/brands/getlist',
resource_id: MODx.request.id,
sort: 'id'
},
loaded: 0,
fields: ['id', 'pagetitle', 'url'],
emptyText : '<div class="empty-msg">'+_('grid_noresults')+'</div>',
autoHeight: true,
paging: true,
remoteSort: true,
forceFit: true,
enableColumnMove: false,
enableColumnResize: true,
enableColumnHide: false,
enableHdMenu: false,
columns: [{
header: _('brand'),
dataIndex: 'pagetitle',
sortable: true,
width: 700,
renderer: function(value) { return '<b>' + value +'</b>'; }
},
{
header: _('id'),
dataIndex: 'id',
sortable: true,
width: 700,
renderer: function(value) { return '<a href="?a=resource/update&id=' + value +'" target="_blank" rel="noopener">' + value + '</a>'; }
},
{
header: _('url'),
dataIndex: 'url',
width: 700,
renderer: function(value) { return '<a href="' + value +'" target="_blank" rel="noopener">' + value + '</a>'; }
}],
tbar: [{
text: _('brand_add'),
handler: this.createItem,
scope: this
}]
});
Distributor.grid.Items.superclass.constructor.call(this, config);
};
Ext.extend(Distributor.grid.Items, MODx.grid.Grid, {
windows: {},
getMenu: function() {
var m = [];
m.push({
text: _('remove'),
handler: this.removeItem
});
this.addContextMenuItem(m);
},
removeItem: function(btn, e) {
var id = this.id;
if (!this.menu.record) return false;
var selectedId = this.menu.record.id;
var selectedRow = this.getSelectionModel().getSelected();
Ext.Msg.show({
title: _('brands.uri_remove'),
msg: _('brands.uri_remove_confirm'),
buttons: Ext.Msg.YESNO,
fn: function (btn){
if (btn == 'yes') {
if (selectedId) {
Ext.Ajax.request({
url: StercSEO.config.connectorUrl,
params: {
action: 'mgr/brands/remove',
id: selectedId
}
});
}
var store = Ext.getCmp(id).getStore();
store.remove(selectedRow);
var JsonData = Ext.encode(Ext.pluck(store.data.items, 'data'));
Ext.getCmp('brands-urls').setValue(JsonData);
}
},
animEl: 'elId',
icon: Ext.MessageBox.QUESTION
});
MODx.fireResourceFormChange();
}
});
Ext.reg('brands-grid-items', Distributor.grid.Items);
Distributor.panel.Options = function(config) {
config = config || {};
Ext.applyIf(config,{
cls: 'vertical-tabs-panel'
,anchor: '100%'
,monitorResize: true
,border: false
,defaults: {
bodyCssClass: 'vertical-tabs-body'
,autoScroll: true
,autoHeight: true
,autoWidth: true
,border: false
}
,listeners:{ //Dirty fix
tabchange: function(tb, pnl){
this.fixPanelWidth();
if(pnl.id == 'brands'){
if(Ext.getCmp('brands-grid-items').loaded == 0){
Ext.getCmp('brands-grid-items').loaded = 1;
Ext.getCmp('brands-grid-items').refresh();
}
}
}
,resize: function(){
var pnl = this.getActiveTab();
if(pnl != null){ this.fixPanelWidth(); }
}
,scope: this
}
});
Distributor.panel.Options.superclass.constructor.call(this,config);
};
Ext.extend(Distributor.panel.Options,MODx.VerticalTabs,{
fixPanelWidth: function(){
var pnl = this;
var w = this.bwrap.getWidth();
pnl.body.setWidth(w);
pnl.doLayout();
}
});
Ext.reg('brands-vtabs-options',Distributor.panel.Options);
Any idea?
thank you in advance.
bye
Chris