Fujitsu HPC Gateway Addon - How To Use Separate Files - extjs

Question

How can I split the logic for an HPC Gateway Addon into separate files? i.e. I'd like to do something like this:
Main.js
Ext.define('App.view.main.Main', {
extend: 'Ext.tab.Panel',
items: [{
title: 'Stuff',
xtype: 'stuff',
iconCls: 'x-fa fa-object-group'
}, {
title: 'About',
xtype: 'about',
iconCls: 'x-fa fa-info-circle',
}]
});
Stuff.js
Ext.define('App.widget.Stuff', {
extend: 'Ext.panel.Panel',
alias: 'widget.stuff',
html: '<h1>Stuff'
});
About.js
Ext.define('App.widget.About', {
extend: 'Ext.panel.Panel',
alias: 'widget.about',
html: '<h1>Version: x.y.z'
});
According to the official fujitsu docs for creating an addon, there are no examples of separating your logic into multiple files, just two monolithic files which contain the view & the controller logic:
appModule.js
Ext.define('desktop.addons.app_abcdef12.view.appModule', {
extend: 'desktop.core.utils.Module',
requires:[],
/**
* Create window
* #param taskBar the task bar
* #returns {desktop.core.view.utils.ModuleView} the module view
*/
createWindow: function (taskBar) {
var me = this;
return Ext.create('desktop.core.view.utils.ModuleView', {
title: me.title,
iconCls: me.iconCls,
stateId: 'app-module',
name: 'app-window',
taskBar: taskBar,
multipleView: false,
width: 320,
height: 150,
items:me.buildItems(),
buttons: [
]
});
},
/**
* Build items
* #returns {{xtype: string, layout: {type: string, align: string}, items: *[]}} items in json format
*/
buildItems:function(){
return {
xtype: 'panel',
layout: 'center',
items: [{
xtype: 'textfield',
name: 'value',
fieldLabel: desktop.core.utils.Symbols.getText('app_abcdef12.textfield.input')+" *",
allowBlank:false,
listeners: {
change: function(textfield, newValue){
var window = textfield.up('window');
window.fireEvent('textfieldChanged', textfield, newValue);
}
}
}]
};
}
});
appController.js
Ext.define('desktop.addons.app_abcdef12.controller.appController', {
extend: 'desktop.core.controller.abstract.AbstractToriiController',
requires: [],
control: {
'window[name=app-window]': {
textfieldChanged: 'performTextfieldChanged'
}
},
performTextfieldChanged: function (textfield, newValue) {
if (Ext.isEmpty(newValue)) {
textfield.up('window').down('button[name=save]').disable();
} else {
textfield.up('window').down('button[name=save]').enable();
}
}
});
When I tried to create something like desktop.addons.app_abcdef12.view.Stuff with an xtype of widget.stuff I crashed the HPC instance, and had to delete the addon listed in mongodb and restart the services. This seriously reduces the number of times I can use trial and error to find out what works.
Anybody done this before?

Answer 1

In the end I didn't manage to get anything working using xtype but I did when using Ext.create directly:
appModule.js
buildItems:function(){
return {
xtype: 'tabpanel',
items: [
Ext.create('desktop.addons.app_abcdef12.view.Stuff'),
Ext.create('desktop.addons.app_abcdef12.view.About'),
]
};
}
Stuff.js
Ext.define('desktop.addons.app_abcdef12.view.Stuff', {
title: 'Stuff',
extend: 'Ext.panel.Panel',
iconCls: 'x-fa fa-id-card',
html: '<h1>Stuff'
});
About.js
Ext.define('desktop.addons.app_abcdef12.view.About', {
title: 'About',
extend: 'Ext.panel.Panel',
iconCls: 'x-fa fa-info',
html: '<h1>About'
});