Merge branch 'main' of https://github.com/DigitalBox98/SimpleExtJSApp

Author: sadmin

README.md

@@ -1,63 +1,190 @@
 # SimpleExtJSApp
-Simple ExtJS Application for DSM 7.0 :<br><br>
-This part includes a test.cgi, which is verifying the authentication of the current user under DSM. <br> 
-The CGI must be called via an Ajax request to the "/webman/3rdparty/simpleextjsapp/test.cgi" URL <br>
+The aim of this sample application is to demonstrate the usage of the DSM framework based on ExtJS<br><br>
+This part includes :
+- A test.cgi : it will verify the authentication of the current user under DSM before executing itself (inspired from the DSM Developper's Guide)
+- A tar of the API docs : to document the usage of each UI component under DSM (in the docs folder)
 
-The package part can be generated in the spksrc repo in the simpleextjsapp branch. <br>
+This repo doesn't include :
+- The SPK package for SimpleExtJSApp (for that check at the SimpleExtJSApp source in the useful links part)
 
-Application: <br>
+Notes : 
+- The CGI must be called via an Ajax request to the "/webman/3rdparty/simpleextjsapp/test.cgi" URL <br>
+- Once the SPK is installed on the NAS, the test.cgi will be located in "/usr/syno/synoman/webman/3rdparty/simpleextjsapp/test.cgi"
+- The package part can be generated via SPKSRC
 
-![synoextjs](https://user-images.githubusercontent.com/57635141/116126847-69e12e80-a6c7-11eb-8fb2-ba0f1bb5953f.png)
+Demo Application: <br>
 
-Integrated docs: <br>
+![GUI1](https://user-images.githubusercontent.com/57635141/116535086-a38e8100-a8e3-11eb-9fb2-883a69d384ce.png) <br>
+![GUI2](https://user-images.githubusercontent.com/57635141/116535121-ad17e900-a8e3-11eb-9293-7ed15f171059.png) <br>
+
+Integrated API docs: <br>
 ![docs](https://user-images.githubusercontent.com/57635141/116140367-871df900-a6d7-11eb-9ba5-602bd9f5e5ba.png)
 
 This page is to be considered as a work in progress with more information to come : ) <br>
 
-# Synology DSM 7.0
-The Synology DSM 7.0 client part is based on ExtJS 3.4 library <br><br>
+# Synology DSM info
+The Synology DSM client part is based on ExtJS 3.4 library <br><br>
+
+Below is the location of each part of the DSM client framework :<br> 
+
+| DSM client part | Location on NAS |
+|----------|:-------------:|
+| Synology JS lib | /usr/syno/synoman/synoSDSjslib/sds.js |
+| Synology ExtJS UX widgets | /usr/syno/synoman/scripts/ext-3.4/ux/ux-all.js |
+| ExtJS 3.4 | /usr/syno/synoman/scripts/ext-3.4/ext-all.js |
 
-Synology JS lib location : /usr/syno/synoman/synoSDSjslib/sds.js <br>
-ExtJS 3.4 location : /usr/syno/synoman/scripts/ext-3.4/ext-all.js <br>
-Synology ExtJS additional UX widgets : /usr/syno/synoman/scripts/ext-3.4/ux/ux-all.js <br>
 
-# ExtJS 3.4 framework docs
+# ExtJS 3.4 framework info
 Available at : http://cdn.sencha.com/ext/gpl/3.4.1.1/release-notes.html<br>
 
+# Useful links
+
+Usage of ExtJS in DSM : https://github.com/SynoCommunity/spksrc/tree/master/spk/debian-chroot/src <br>
+Usage of ExtJS + API in DSM : https://github.com/Rutorai/syno-library/wiki <br>
+Example for writing API : https://github.com/Rutorai/syno-library/tree/develop/package/ <br>
+SimpleExtJSApp source : https://github.com/DigitalBox98/spksrc/tree/simpleextjsapp/spk/simpleextjsapp/src/app <br>
+
+# How the documentation is generated :
+
+The original/commented files are inside the docs/synoextjsdocs-source.tar.gz file.
+JSduck is required to generate the documentation
+
+To generate the documentation, the steps are quite simple :
+- tar -xvf synoextjsdocs-source.tar.gz file
+- cd SynoExtJSDocs
+- jsduck syno/ --output docs
+
+# How the documentation is enriched :
+
+The steps to enrich the API documentation is as below : 
+- If possible, before enriching the documentation, the SimpleExtJSApp application will be updated to contain the additional GUI component
+- Add comments for the desired DSM component in the corresponding source file in the "syno" directory 
+- Identify if this component extends from ExtJS 3.4 component 
+- If so, copy the corresponding ExtJS 3.4 source file from the "ext-3.4.1/src/" directory to the "syno/scripts/ext-3.4/src/" directory by applying the same directory structure
+- Follow the next steps described in "how the documentation is generated"
+
+That's it ! <br>
+
+Below is an example of comments added which will be used during the documentation generation : <br>
+
+```javascript
+/**
+ * @class SYNO.ux.Button
+ * @extends Ext.Button
+ * Simple Button class
+ * @xtype syno_button
+ *
+ */
+```
+
 # Documentation in progress :
 
-  - done : SYNO.ux.Button (xtype: "syno_button") <br>
-  - done : SYNO.ux.Checkbox (xtype: "syno_checkbox") <br>
-  - done : SYNO.ux.DisplayField (xtype: "syno_displayfield") <br>
-  - SYNO.ColorField (xtype: "syno_colorfield") <br>
-  - SYNO.ux.ComboBox (xtype: "syno_combobox") <br>
-  - SYNO.ux.CoverPanel (xtype: "syno_coverpanel") <br>
-  - SYNO.ux.GridPanel (xtype: "syno_gridpanel") <br>
-  - SYNO.ux.DateField (xtype: "syno_datefield") <br>
-  - SYNO.ux.DateTimeField (xtype: "syno_datetimefield") <br>
-  - SYNO.ux.TimePickerField (xtype: "syno_timepickerfield") <br>
-  - SYNO.ux.DateTimePicker (xtype: "syno_datetimepickerfield") <br>
-
-  - SYNO.ux.EditorGridPanel (xtype: "syno_editorgrid") <br>
-  - SYNO.ux.FieldSet (xtype: "syno_fieldset") <br>
-  - SYNO.ux.FileButton (xtype: "syno_filebutton") <br>
-  - SYNO.ux.FormPanel (xtype: "syno_formpanel") <br>
-  - SYNO.ux.Menu (xtype: "syno_menu") <br>
-  - SYNO.ux.ModuleList (xtype: "syno_modulelist") <br>
-  - SYNO.ux.NumberField (xtype: "syno_numberfield") <br>
-  - SYNO.ux.PagingToolbar (xtype: "syno_paging") <br>
-  - SYNO.ux.Panel (xtype: "syno_panel") <br>
-  - SYNO.ux.RadioGroup (xtype: "syno_radio") <br>
-  - SYNO.ux.Radio (xtype: "syno_radio") <br>
-  - SYNO.ux.SingleSlider (xtype: "syno_singleslider") <br>
-  - SYNO.ux.SplitButton (xtype: "syno_splitbutton") <br>
-  - SYNO.ux.StateButtonGroup (xtype: "syno_statebuttongroup") <br>
-  - SYNO.ux.Switch (xtype: "syno_switch") <br>
-  - SYNO.ux.TabPanel (xtype: "syno_tabpanel") <br>
-  - SYNO.ux.TextArea (xtype: "syno_textarea") <br>
-  - SYNO.ux.TextField (xtype: "syno_textfield") <br>
-  - SYNO.ux.MacTextField (xtype: "syno_mactextfield") <br>
-  - SYNO.ux.SearchField (xtype: "syno_searchfield") <br>
-  - SYNO.ux.TimeField (xtype: "syno_timefield") <br>
-  - SYNO.ux.Toolbar (xtype: "syno_toolbar") <br>
+- UX part :<br><br>
+
+| Widget | Documentation |
+|----------|:-------------:|
+| SYNO.ux.AriaComponent |  |
+| SYNO.ux.BackNextBtnGroup (xtype: "syno_backnextbtngroup") |  |
+| SYNO.ux.Button (xtype: "syno_button") | :ok: |
+| SYNO.ux.Checkbox (xtype: "syno_checkbox") | :ok: |
+| SYNO.ux.ColorField (xtype: "syno_colorfield") |  |
+| SYNO.ux.ComboBox (xtype: "syno_combobox") |  |
+| SYNO.ux.CompositeField (xtype: "syno_compositefield") |  |
+| SYNO.ux.CoverPanel (xtype: "syno_coverpanel")|  |
+| SYNO.ux.DDGridPanel (xtype: "syno_dd_gridpanel") |  |
+| SYNO.ux.DataViewAnimation |  |
+| SYNO.ux.DataViewMask |  |
+| SYNO.ux.DateField (xtype: "syno_datefield") |  |
+| SYNO.ux.DateMenu |  |
+| SYNO.ux.DatePicker |  |
+| SYNO.ux.DateTime.SubMenu (xtype: "syno_datetime_submenu") |  |
+| SYNO.ux.DateTimeField (xtype: "syno_datetimefield") |  |
+| SYNO.ux.DateTimeMenu |  |
+| SYNO.ux.DateTimePicker (xtype: "syno_datetimepickerfield") |  |
+| SYNO.ux.DisplayField (xtype: "syno_displayfield") | :ok: |
+| SYNO.ux.EditorGridPanel (xtype: "syno_editorgrid") |  |
+| SYNO.ux.EnableColumn |  |
+| SYNO.ux.ExpandableListView |  |
+| SYNO.ux.FieldSet (xtype: "syno_fieldset") |  |
+| SYNO.ux.FileButton (xtype: "syno_filebutton") |  |
+| SYNO.ux.FixColGrid (xtype: "syno_fixedcolumn_grid") |  |
+| SYNO.ux.FleXcroll.ComboBox |  |
+| SYNO.ux.FleXcroll.DataView (xtype: "syno_flexcroll_dataview") |  |
+| SYNO.ux.FleXcroll.grid.BufferView |  |
+| SYNO.ux.FleXcroll.grid.GridView |  |
+| SYNO.ux.FleXcroll.grid.HorizontalGridView |  |
+| SYNO.ux.FleXcroll.grid.TreeView |  |
+| SYNO.ux.FloatLayout |  |
+| SYNO.ux.FormPanel (xtype: "syno_formpanel") |  |
+| SYNO.ux.GridPanel (xtype: "syno_gridpanel") |  |
+| SYNO.ux.GroupingView |  |
+| SYNO.ux.HistoryRecorder |  |
+| SYNO.ux.HorizontalGridPanel (xtype: "syno_h_gridpanel") |  |
+| SYNO.ux.InvalidQuickTip (xtype: "syno_invalidquicktip") |  |
+| SYNO.ux.InverseFieldSet (xtype: "syno_inversefieldset") |  |
+| SYNO.ux.MacTextField (xtype: "syno_mactextfield") |  |
+| SYNO.ux.Menu (xtype: "syno_menu") |  |
+| SYNO.ux.ModuleList (xtype: "syno_modulelist") |  |
+| SYNO.ux.NumberField (xtype: "syno_numberfield") |  |
+| SYNO.ux.OperatableListView |  |
+| SYNO.ux.PageLessToolbar (xtype: "syno_pageless") |  |
+| SYNO.ux.PagingToolbar (xtype: "syno_paging") |  |
+| SYNO.ux.PagingToolbar (xtype: "syno_paging") |  |
+| SYNO.ux.Panel (xtype: "syno_panel") |  |
+| SYNO.ux.Radio (xtype: "syno_radio") |  |
+| SYNO.ux.RadioGroup (xtype: "syno_radio") |  |
+| SYNO.ux.ScheduleField (xtype: "syno_schedulefield") |  |
+| SYNO.ux.ScheduleSelector |  |
+| SYNO.ux.ScheduleTable |  |
+| SYNO.ux.ScheduleTableField |  |
+| SYNO.ux.SearchField (xtype: "syno_searchfield")  |  |
+| SYNO.ux.SingleSlider (xtype: "syno_singleslider") |  |
+| SYNO.ux.SliderField (xtype: "syno_sliderfield") |  |
+| SYNO.ux.SplitButton (xtype: "syno_splitbutton") |  |
+| SYNO.ux.SplitButton (xtype: "syno_splitbutton") |  |
+| SYNO.ux.StateButtonGroup (xtype: "syno_statebuttongroup")|  |
+| SYNO.ux.StateButtonGroup |  |
+| SYNO.ux.StatusProxy |  |
+| SYNO.ux.SuperBoxSelect (xtype: "syno_superboxselect") |  |
+| SYNO.ux.SuperBoxSelectItem |  |
+| SYNO.ux.Switch (xtype: "syno_switch") |  |
+| SYNO.ux.SwitchColumn (xtype: "syno_swtichcolumn") |  |
+| SYNO.ux.TabPanel (xtype: "syno_tabpanel") |  |
+| SYNO.ux.TextArea (xtype: "syno_textarea") |  |
+| SYNO.ux.TextField (xtype: "syno_textfield") |  |
+| SYNO.ux.TextFilter (xtype: "syno_textfilter") |  |
+| SYNO.ux.TimeField (xtype: "syno_timefield") |  |
+| SYNO.ux.TimePickerField (xtype: "syno_timepickerfield") |  |
+| SYNO.ux.Toolbar (xtype: "syno_toolbar") |  |
+| SYNO.ux.TreePanel |  |
+| SYNO.ux.TriModeCheckbox |  |
+| SYNO.ux.WhiteQuickTip |  |
+| SYNO.ux.WhiteTipIcon |  |
+| SYNO.ux._ButtonARIA |  |
+| SYNO.ux._CheckboxARIA |  |
+| SYNO.ux._ComboboxARIA |  |
+| SYNO.ux._ComponentARIA |  |
+| SYNO.ux._DataViewARIA |  |
+| SYNO.ux._GridPanelARIA |  |
+| SYNO.ux._MenuARIA |  |
+| SYNO.ux._SliderARIA |  |
+| SYNO.ux._TabPanelARIA |  |
+| SYNO.ux._TreePanelARIA |  |
+| SYNO.ux.data.TreeReader |  |
+| SYNO.ux.grid.GridView.SplitDragZone |  |
+| SYNO.ux.plugin.GroupHeaderGrid |  |
+| SYNO.ux.plugin.StyledGrid |  |
+
+
+- SDS part : <br><br>
+
+| Component | Documentation |
+|----------|:-------------:|
+| SYNO.SDS.AbstractWindow |  |
+| SYNO.SDS.BaseWindow |  |
+| SYNO.SDS.Window |  |
+| SYNO.SDS.ModalWindow |  |
+| SYNO.SDS.AppWindow |  |
+| SYNO.SDS.AppInstance |  |
 
+<br>