diff --git a/spk/simpleextjswidget/Makefile b/spk/simpleextjswidget/Makefile
new file mode 100644
index 00000000000..308e7974003
--- /dev/null
+++ b/spk/simpleextjswidget/Makefile
@@ -0,0 +1,35 @@
+SPK_NAME = simpleextjswidget
+SPK_VERS = 0.1
+SPK_REV = 1
+SPK_ICON = src/simpleextjswidget.png
+WIZARDS_DIR = WIZARD_UIFILES
+DSM_UI_DIR = app
+
+DEPENDS =
+WHEELS = flask
+
+override ARCH=
+
+MAINTAINER = DigitalBox98
+
+DESCRIPTION = SimpleExtJS Widget demo to illustrate the usage of Syno ExtJS framework for DSM. This package is for experienced users.
+STARTABLE = no
+DISPLAY_NAME = SimpleExtJSWidget
+
+HOMEPAGE = https://github.com/DigitalBox98/SimpleExtJSApp
+
+POST_STRIP_TARGET = simpleextjswidget_install
+
+include ../../mk/spksrc.spk.mk
+
+.PHONY: simpleextjswidget_install
+simpleextjswidget_install:
+ install -m 755 -d $(STAGING_DIR)/var/
+ install -m 755 -d $(STAGING_DIR)/app/
+ install -m 644 src/app/config $(STAGING_DIR)/app/config
+ install -m 644 src/app/simpleextjswidget.js $(STAGING_DIR)/app/simpleextjswidget.js
+ install -m 755 -d $(STAGING_DIR)/app/texts
+ for language in enu fre; do \
+ install -m 755 -d $(STAGING_DIR)/app/texts/$${language}; \
+ install -m 644 src/app/texts/$${language}/strings $(STAGING_DIR)/app/texts/$${language}/strings; \
+ done
diff --git a/spk/simpleextjswidget/PLIST b/spk/simpleextjswidget/PLIST
new file mode 100644
index 00000000000..54ecd09729a
--- /dev/null
+++ b/spk/simpleextjswidget/PLIST
@@ -0,0 +1 @@
+rsc:README
diff --git a/spk/simpleextjswidget/WIZARD_UIFILES/install_uifile b/spk/simpleextjswidget/WIZARD_UIFILES/install_uifile
new file mode 100644
index 00000000000..cc3a6b355ec
--- /dev/null
+++ b/spk/simpleextjswidget/WIZARD_UIFILES/install_uifile
@@ -0,0 +1,10 @@
+[
+ {
+ "step_title": "Information",
+ "items": [
+ {
+ "desc": "SimpleExtJSWidget is a demo DSM widget aimed to document Synology's GUI framework based on ExtJS.
For more information, you can visit the SimpleExtJSApp Github page."
+ }
+ ]
+ }
+]
diff --git a/spk/simpleextjswidget/src/app/config b/spk/simpleextjswidget/src/app/config
new file mode 100644
index 00000000000..2c3acc998c2
--- /dev/null
+++ b/spk/simpleextjswidget/src/app/config
@@ -0,0 +1,13 @@
+{
+ "simpleextjswidget.js": {
+ "SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom": {
+ "type": "widget",
+ "title": "Customized",
+ "icon": "images\/{1}\/wdgt_icn_title_system_info.png",
+ "appInstance": "SYNO.SDS.AdminCenter.Application",
+ "launchParam": "{\"fn\":\"SYNO.SDS.AdminCenter.InfoCenter.Main\"}",
+ "depend": ["SYNO.SDS._Widget.GridPanel"],
+ "texts": "texts"
+ }
+ }
+}
diff --git a/spk/simpleextjswidget/src/app/simpleextjswidget.js b/spk/simpleextjswidget/src/app/simpleextjswidget.js
new file mode 100644
index 00000000000..c3b4cd7f627
--- /dev/null
+++ b/spk/simpleextjswidget/src/app/simpleextjswidget.js
@@ -0,0 +1,133 @@
+// Namespace definition
+Ext.ns("SYNOCOMMUNITY.SimpleExtJSApp");
+
+// Translator
+_V = function (category, element) {
+ return _TT("SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom", category, element)
+}
+
+Ext.ns("SYNO.SDS.SystemInfoApp");
+
+Ext.define("SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom", {
+ extend: "Ext.Panel",
+ minimizable: true,
+ taskButton: undefined,
+ constructor: function constructor(a) {
+ this.initializeSouthTable();
+ var b = Ext.apply(this.getConfig(), a);
+ SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom.superclass.constructor.call(this, b);
+ this.westIcon = this.getIconComponent();
+ this.centerContent = this.getContentComponent();
+ this.isActive = false;
+ this.timestamp = null;
+ this.uptime = null;
+ this.appSetting = SYNO.SDS.SystemInfoApp.SystemHealthDefaultApp
+ },
+ getConfig: function getConfig() {
+ return {
+ layout: "fit",
+ border: false,
+ defaults: {
+ border: false
+ },
+ items: [this.getViewConfig()]
+ }
+ },
+ getViewConfig: function getViewConfig() {
+ return {
+ itemId: "layoutPanel",
+ layout: "vbox",
+ height: "100%",
+ border: false,
+ padding: "4px 12px 5px 12px",
+ cls: "syno-sysinfo-system-health",
+ defaults: {
+ border: false
+ },
+ items: [{
+ xtype: "container",
+ itemId: "northPanel",
+ height: 20,
+ width: 296,
+ cls: "syno-sysinfo-system-health-status",
+ items: [{
+ xtype: "box",
+ itemId: "westIcon"
+ }, {
+ xtype: "box",
+ itemId: "centerContent",
+ region: "center"
+ }]
+ }, {
+ region: "south",
+ height: 84,
+ width: 296,
+ items: this.southTable
+ }]
+ }
+ },
+ doCollapse: function doCollapse() {
+ this.getEl().setHeight(84);
+ this.doLayout()
+ },
+ doExpand: function doExpand() {
+ this.getEl().setHeight(172);
+ this.doLayout()
+ },
+ setApp: function setApp(a) {
+ this.appSetting = a
+ },
+
+ getIconComponent: function getIconComponent() {
+ return this.getComponent("layoutPanel").getComponent("northPanel").getComponent("westIcon")
+ },
+ getContentComponent: function getContentComponent() {
+ return this.getComponent("layoutPanel").getComponent("northPanel").getComponent("centerContent")
+ },
+ onClickTitle: function onClickTitle() {
+ SYNO.SDS.AppLaunch(this.appSetting.appInstance, this.appSetting.launchParam)
+ },
+ onActivate: function onActivate() {
+ this.isActive = true;
+ },
+ onDeactivate: function onDeactivate() {
+ this.isActive = false;
+ this.unmask()
+ },
+ mask: Ext.emptyFn,
+ unmask: Ext.emptyFn,
+ initializeSouthTable: function initializeSouthTable() {
+ var b = Ext.util.Format.htmlEncode(_V("app", "message"));
+ var c = Ext.util.Format.htmlEncode(_S("hostname"));
+ this.southTable = new Ext.Panel({
+ layout: "table",
+ itemId: "southTable",
+ cls: "sys-info-south-table",
+ margins: 0,
+ height: 84,
+ layoutConfig: {
+ columns: 2,
+ cellCls: "sys-info-row"
+ },
+ items: [{
+ xtype: "box",
+ html: String.format('{0}
', b, Ext.util.Format.htmlEncode(b))
+ }, {
+ xtype: "box",
+ html: String.format('{0}
', c, Ext.util.Format.htmlEncode(c))
+ }]
+ })
+ },
+
+ destroy: function destroy() {
+ var a = this;
+ a.onDeactivate();
+ if (a.taskButton) {
+ Ext.destroy(a.taskButton)
+ }
+ if (a.southGrid && a.southGrid.getStore()) {
+ a.southGrid.getStore().destroy()
+ }
+ SYNOCOMMUNITY.SimpleExtJSApp.WidgetCustom.superclass.destroy.call(this)
+ }
+});
diff --git a/spk/simpleextjswidget/src/app/texts/enu/strings b/spk/simpleextjswidget/src/app/texts/enu/strings
new file mode 100644
index 00000000000..03e270f4db2
--- /dev/null
+++ b/spk/simpleextjswidget/src/app/texts/enu/strings
@@ -0,0 +1,5 @@
+[app]
+app_name = "SimpleExtJSWidget"
+description = "ExtJS Demo Widget"
+index_title = "Help documentation"
+message = "Simple widget !"
diff --git a/spk/simpleextjswidget/src/app/texts/fre/strings b/spk/simpleextjswidget/src/app/texts/fre/strings
new file mode 100644
index 00000000000..4067fc2189f
--- /dev/null
+++ b/spk/simpleextjswidget/src/app/texts/fre/strings
@@ -0,0 +1,5 @@
+[app]
+app_name = "SimpleExtJSWidget"
+description = "Widget ExtJS de démonstration"
+index_title = "Aide"
+message = "Widget simple !"
diff --git a/spk/simpleextjswidget/src/conf/resource b/spk/simpleextjswidget/src/conf/resource
new file mode 100644
index 00000000000..2c63c085104
--- /dev/null
+++ b/spk/simpleextjswidget/src/conf/resource
@@ -0,0 +1,2 @@
+{
+}
diff --git a/spk/simpleextjswidget/src/simpleextjswidget.png b/spk/simpleextjswidget/src/simpleextjswidget.png
new file mode 100644
index 00000000000..f5b1d74004c
Binary files /dev/null and b/spk/simpleextjswidget/src/simpleextjswidget.png differ