ucan-ext-js-kitchen-sink
Version:
my-ext-gen-app description for Ext JS app MyExtGenApp
85 lines (82 loc) • 2.59 kB
JavaScript
Ext.define('UCANSink.view.componentDetail.ComponentDetail', {
extend: 'Ext.Panel',
xtype: 'componentdetail',
defaultListenerScope: this,
viewModel: true,
padding: '10px',
listeners: {
activate: 'initializeDemo'
},
scrollable: true,
tbar: [{
xtype: 'component'
},
{
xtype: 'button',
iconCls: 'x-fa fa-angle-left',
text: 'Zurück zur Übersicht',
handler: function() {
this.up('mainview').getController().redirectTo('componentoverview');
}
}],
items: [
{
xtype: 'button',
width: '100%',
height: '48px',
textAlign: 'left',
cls: 'componentDetailButton',
enableToggle: true,
text: '<b>Metadaten</b>',
handler: function(button) {
button.up().down('#metaDataPanel').toggleCollapsed(!button.isPressed());
}
},
{
xtype: 'panel',
itemId: 'metaDataPanel',
cls: 'componentDetailPanel',
bind: {
html: '<p style="font-size:18px"> <b>NPM-Name:</b> {ucanComponent.data.items.0.name} </p> ' +
'<p style="font-size:18px"> <b>Sencha-Name:</b> {ucanComponent.data.items.0.sencha.name} </p>' +
'<p style="font-size:18px"> <b>Kurzbeschreibung:</b> {ucanComponent.data.items.0.sencha.summary} </p>' +
'<p style="font-size:18px"> <b>Beschreibung:</b> {ucanComponent.data.items.0.sencha.detailedDescription} </p>' +
'<p style="font-size:18px"> <b>NPM-Version:</b> {ucanComponent.data.items.0.version} </p>' +
'<p style="font-size:18px"> <b>Sencha-Version:</b> {ucanComponent.data.items.0.sencha.version} </p>' +
'<p style="font-size:18px"> <b>Kompatible ExtJS Version:</b> {ucanComponent.data.items.0.sencha.compatVersion} </p>'
},
title: '<b>Metadaten</b>',
collapsed: true,
header: false,
collapsible: {
direction: 'top',
dynamic: true,
useDrawer: false
}
},
{
xtype: 'spacer',
height: '5px'
},
{
cls: 'componentDetailPanel',
itemId: 'demoAppPanel',
xtype: 'panel',
bind: {
title:
'<b>Demoanwendung:</b>'
}
}
],
initializeDemo: function() {
let packageName = this.getViewModel().get('ucanComponent.data.items.0.sencha.name');
if (packageName === null) {
this.up('mainview').getController().redirectTo('componentoverview');
} else {
this.down('#demoAppPanel').removeAll();
this.down('#demoAppPanel').add({
xtype: 'ucan' + packageName + 'exampleview'
});
}
}
});