init repo

OfficeWeb/apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js

@@ -0,0 +1,331 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.AutoFilterDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.sseautofilterdialog",
+    requires: ["Ext.window.Window", "Common.plugin.GridScrollPane", "Common.component.SearchField"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    height: 350,
+    width: 270,
+    constrain: true,
+    padding: "20px 20px 0 20px",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this.btnSortDesc = Ext.create("Ext.Button", {
+            iconCls: "asc-toolbar-btn btn-sort-up",
+            width: 28,
+            enableToggle: true,
+            toggleGroup: "autoFilterSort",
+            allowDepress: false,
+            listeners: {
+                click: function () {
+                    me.fireEvent("onmodalresult", me, 3, "descending");
+                    me.close();
+                }
+            }
+        });
+        this.btnSortAsc = Ext.create("Ext.Button", {
+            iconCls: "asc-toolbar-btn btn-sort-down",
+            width: 28,
+            enableToggle: true,
+            style: "margin: 0 6px 0 0",
+            toggleGroup: "autoFilterSort",
+            allowDepress: false,
+            listeners: {
+                click: function () {
+                    me.fireEvent("onmodalresult", me, 3, "ascending");
+                    me.close();
+                }
+            }
+        });
+        this.chCustomFilter = Ext.widget("checkbox", {
+            style: "margin: 0 6px 0 0",
+            disabled: true,
+            boxLabel: ""
+        });
+        var btnCustomFilter = Ext.create("Ext.Button", {
+            width: 120,
+            text: me.btnCustomFilter,
+            listeners: {
+                click: function () {
+                    me.fireEvent("onmodalresult", me, 2);
+                    me.close();
+                }
+            }
+        });
+        var range, full_range;
+        var txtSearch = Ext.create("Common.component.SearchField", {
+            style: "margin: 10px 0",
+            emptyText: me.txtEmpty,
+            listeners: {
+                change: function (obj, newval, oldval, opts) {
+                    me.cellsStore.clearFilter(true);
+                    if (oldval && newval.length < oldval.length) {
+                        selectionModel.selected.clear();
+                        full_range = me.cellsStore.getAt(0).ischecked;
+                        range = me.cellsStore.getRange(full_range ? 0 : 1);
+                        range.forEach(function (record) {
+                            (full_range || record.ischecked) && selectionModel.selected.add(record);
+                        });
+                    }
+                    if (newval.length) {
+                        me.cellsStore.filter([{
+                            property: "cellvalue",
+                            value: new RegExp(newval, "i")
+                        },
+                        {
+                            property: "rowvisible",
+                            value: /^((?!ever|hidden).)*$/
+                        }]);
+                    } else {
+                        me.cellsStore.filter("rowvisible", /^((?!hidden).)*$/);
+                    }
+                },
+                searchstart: function (obj, text) {
+                    me.cellsStore.filter([{
+                        property: "cellvalue",
+                        value: new RegExp(text, "i")
+                    },
+                    {
+                        property: "rowvisible",
+                        value: /^((?!ever|hidden).)*$/
+                    }]);
+                    this.stopSearch(true);
+                },
+                searchclear: function () {}
+            }
+        });
+        this.cellsStore = Ext.create("Ext.data.Store", {
+            fields: ["cellvalue", "rowvisible", "groupid", "intval", "strval"]
+        });
+        var selectionModel = Ext.create("Ext.selection.CheckboxModel", {
+            mode: "SIMPLE",
+            listeners: {
+                deselect: function (obj, record, index) {
+                    me.chCustomFilter.getValue() && me.chCustomFilter.setValue(false);
+                    record.ischecked = false;
+                    if (record.data.rowvisible == "ever") {
+                        obj.deselectAll();
+                        me.cellsStore.getRange(1).forEach(function (rec) {
+                            rec.ischecked = false;
+                        });
+                    } else {
+                        var srecord = me.cellList.getStore().getAt(0);
+                        if (srecord.data.rowvisible == "ever" && obj.isSelected(srecord)) {
+                            srecord.ischecked = false;
+                            obj.deselect(srecord, true);
+                        }
+                    }
+                },
+                select: function (obj, record, index) {
+                    me.chCustomFilter.getValue() && me.chCustomFilter.setValue(false);
+                    record.ischecked = true;
+                    if (record.data.rowvisible == "ever") {
+                        obj.select(me.cellList.getStore().getRange(1), false, true);
+                        obj.select(me.cellList.getStore().getAt(0), true, true);
+                        me.cellsStore.getRange(1).forEach(function (rec) {
+                            rec.ischecked = true;
+                        });
+                    }
+                }
+            }
+        });
+        this.cellList = Ext.create("Ext.grid.Panel", {
+            activeItem: 0,
+            selModel: selectionModel,
+            store: this.cellsStore,
+            stateful: true,
+            stateId: "stateGrid",
+            scroll: false,
+            columns: [{
+                flex: 1,
+                sortable: false,
+                dataIndex: "cellvalue"
+            }],
+            height: 160,
+            hideHeaders: true,
+            style: "margin: 0 0 14px 0",
+            viewConfig: {
+                stripeRows: false
+            },
+            plugins: [{
+                ptype: "gridscrollpane"
+            }]
+        });
+        var btnOk = Ext.create("Ext.Button", {
+            text: Ext.Msg.buttonText.ok,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    if (!selectionModel.getCount()) {
+                        Ext.Msg.show({
+                            title: me.textWarning,
+                            msg: me.warnNoSelected,
+                            icon: Ext.Msg.WARNING,
+                            buttons: Ext.Msg.OK
+                        });
+                    } else {
+                        me.fireEvent("onmodalresult", me, me.chCustomFilter.getValue() ? 0 : 1);
+                        me.close();
+                    }
+                }
+            }
+        });
+        var btnCancel = Ext.create("Ext.Button", {
+            text: me.cancelButtonText,
+            width: 80,
+            listeners: {
+                click: function () {
+                    me.fireEvent("onmodalresult", me, 0);
+                    me.close();
+                }
+            }
+        });
+        this.items = [{
+            xtype: "container",
+            height: 30,
+            layout: {
+                type: "hbox"
+            },
+            items: [this.btnSortAsc, this.btnSortDesc, {
+                xtype: "tbspacer",
+                flex: 1
+            },
+            this.chCustomFilter, btnCustomFilter]
+        },
+        txtSearch, this.cellList, {
+            xtype: "container",
+            width: 250,
+            layout: "hbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            items: [{
+                xtype: "tbspacer",
+                flex: 1
+            },
+            btnOk, {
+                xtype: "tbspacer",
+                width: 5
+            },
+            btnCancel]
+        }];
+        this.callParent(arguments);
+        this.setTitle(this.txtTitle);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this._setDefaults();
+    },
+    setSettings: function (config) {
+        var arr = [{
+            cellvalue: this.textSelectAll,
+            rowvisible: "ever",
+            groupid: "0"
+        }];
+        var isnumber, value;
+        config.asc_getResult().forEach(function (item) {
+            value = item.asc_getVal();
+            isnumber = Ext.isNumeric(value);
+            arr.push({
+                cellvalue: value,
+                rowvisible: item.asc_getVisible(),
+                groupid: "1",
+                intval: isnumber ? parseFloat(value) : undefined,
+                strval: !isnumber ? value : ""
+            });
+        });
+        this.cellsStore.loadData(arr);
+        this.cellsStore.group("groupid");
+        this._defaults = [];
+        this._defaults.properties = config;
+    },
+    getSettings: function () {
+        var ret_out = new Asc.AutoFiltersOptions();
+        ret_out.asc_setCellId(this._defaults.properties.asc_getCellId());
+        var result_arr = [],
+        visibility,
+        me = this;
+        this.cellsStore.clearFilter(true);
+        var records = this.cellsStore.getRange(1);
+        records.forEach(function (item) {
+            if ((visibility = item.get("rowvisible")) != "hidden") {
+                visibility = me.cellList.getSelectionModel().isSelected(item);
+            }
+            result_arr.push(new Asc.AutoFiltersOptionsElements(item.get("cellvalue"), visibility));
+        });
+        ret_out.asc_setResult(result_arr);
+        ret_out.sortState = this._defaults.properties.asc_getSortState();
+        return ret_out;
+    },
+    _setDefaults: function () {
+        var sort = this._defaults.properties.asc_getSortState();
+        if (sort) {
+            this[sort == "ascending" ? "btnSortAsc" : "btnSortDesc"].toggle(true, true);
+        }
+        var store = this.cellList.getStore(),
+        selectionModel = this.cellList.getSelectionModel();
+        store.filter("rowvisible", /^((?!hidden).)*$/);
+        var count = store.getCount(),
+        item,
+        isSelectAll = true;
+        while (count > 1) {
+            item = store.getAt(--count);
+            if (item.data.rowvisible === true) {
+                selectionModel.select(item, true, true);
+                item.ischecked = true;
+            } else {
+                isSelectAll = false;
+            }
+        }
+        if (isSelectAll) {
+            store.getAt(0).ischecked = true;
+            selectionModel.select(0, true, true);
+        }
+        this.chCustomFilter.setValue(this._defaults.properties.asc_getIsCustomFilter() === true);
+    },
+    btnCustomFilter: "Custom Filter",
+    textSelectAll: "Select All",
+    txtTitle: "Filter",
+    warnNoSelected: "You must choose at least one value",
+    textWarning: "Warning",
+    cancelButtonText: "Cancel",
+    txtEmpty: "Enter cell's filter"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/CellInfo.js

@@ -0,0 +1,141 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.CellInfo", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssecellinfo",
+    cls: "sse-cellinfo",
+    uses: ["SSE.view.FormulaDialog"],
+    height: 23,
+    initComponent: function () {
+        var me = this;
+        this.addEvents("editcomplete");
+        this.txtName = Ext.widget("textfield", {
+            id: "infobox-cell-name",
+            width: 70,
+            height: this.height,
+            cls: "asc-input-aslabel",
+            fieldStyle: "border-radius:0;"
+        });
+        this._cellInput = Ext.widget("textarea", {
+            id: "infobox-cell-edit",
+            inputId: "infobox-cell-input",
+            flex: 1,
+            style: "margin:0;opacity:1;",
+            fieldStyle: "border-radius:0;font-size:14px;padding:0 3px;line-height:21px;",
+            enableKeyEvents: true,
+            enterIsSpecial: true
+        });
+        var style = "padding:4px 0 0 4px;border-bottom:solid 1px #AFAFAF; background:#E9E9E9 url(resources/img/toolbar-menu.png) no-repeat 0 -1416px;";
+        style += 'background-image: -webkit-image-set(url("resources/img/toolbar-menu.png") 1x, url("resources/img/toolbar-menu@2x.png") 2x);';
+        this._lblFunct = Ext.widget("box", {
+            width: 20,
+            height: this.height,
+            id: "func-label-box",
+            style: style,
+            listeners: {
+                afterrender: function (c) {
+                    $("#func-label-box").hover(function () {
+                        this.style.backgroundPosition = this.mdown ? "-40px -1416px" : "-20px -1416px";
+                    },
+                    function () {
+                        this.style.backgroundPosition = "0 -1416px";
+                    });
+                    $("#func-label-box").mousedown(function () {
+                        this.style.backgroundPosition = "-40px -1416px";
+                        var hdown = this;
+                        hdown.mdown = true;
+                        var upHandler = function () {
+                            hdown.mdown = false;
+                            $(document).unbind("mouseup", upHandler);
+                        };
+                        $(document).mouseup(upHandler);
+                    });
+                    $("#func-label-box").click(function (e) {
+                        if (me.permissions.isEdit) {
+                            dlgFormulas.addListener("onmodalresult", function (o, mr, s) {
+                                me.fireEvent("editcomplete", me);
+                            },
+                            me, {
+                                single: true
+                            });
+                            dlgFormulas.show();
+                        }
+                    });
+                }
+            }
+        });
+        this.keep_height = 180;
+        var btnExpand = Ext.widget("button", {
+            width: 16,
+            height: this.height,
+            id: "infobox-cell-multiline-button",
+            style: "border-radius: 0;",
+            iconCls: "infobox-cell-multiline-button"
+        });
+        Ext.apply(me, {
+            style: "overflow:visible;",
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                cls: "infobox-container-border",
+                id: "infobox-container-cell-name",
+                width: 90,
+                layout: {
+                    type: "hbox"
+                },
+                items: [this.txtName, this._lblFunct]
+            },
+            this._cellInput, {
+                xtype: "container",
+                items: [btnExpand]
+            }]
+        },
+        me.initialConfig);
+        me.callParent(arguments);
+    },
+    updateCellInfo: function (info) {
+        if (info) {
+            this.txtName.setValue(typeof(info) == "string" ? info : info.asc_getName());
+        }
+    },
+    setMode: function (m) {
+        if (m.isDisconnected) {
+            this.permissions.isEdit = false;
+        } else {
+            this.permissions = m;
+        }
+        $("#" + this._lblFunct.id).css("cursor", m.isEdit ? "pointer" : "default");
+    }
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/CreateFile.js

@@ -0,0 +1,87 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.CreateFile", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.ssecreatenew",
+    cls: "sse-file-createnew",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    requires: ["Ext.container.Container", "Ext.data.Model", "Ext.data.Store", "Ext.view.View", "Ext.XTemplate", "Common.plugin.DataViewScrollPane"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+        var me = this;
+        me.add({
+            xtype: "container",
+            html: "<h3>" + me.fromBlankText + "</h3>" + "<hr noshade>" + '<div class="blank-document">' + '<div id="id-create-blank-document" class="btn-blank-document"></div>' + '<div class="blank-document-info">' + "<h3>" + me.newDocumentText + "</h3>" + me.newDescriptionText + "</div>" + "</div>" + '<div style="clear: both;"></div>' + "<h3>" + me.fromTemplateText + "</h3>" + "<hr noshade>"
+        },
+        {
+            xtype: "container",
+            flex: 1,
+            layout: "fit",
+            cls: "container-template-list",
+            items: [{
+                xtype: "dataview",
+                store: "FileTemplates",
+                tpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', '<tpl if="this.isEmptyIcon(icon)">', '<div class="thumb"></div>', "</tpl>", '<tpl if="this.isEmptyIcon(icon) == false">', '<div class="thumb" style="background-image: url(' + "'{icon}'" + ');"></div>', "</tpl>", '<div class="title">{name:htmlEncode}</div>', "</div>", "</tpl>", {
+                    isEmptyIcon: function (icon) {
+                        return icon == "";
+                    }
+                }),
+                singleSelect: true,
+                trackOver: true,
+                autoScroll: true,
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "x-view-context",
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    pluginId: "scrollpane",
+                    areaSelector: ".x-view-context",
+                    settings: {
+                        enableKeyboardNavigation: true
+                    }
+                }]
+            }]
+        });
+    },
+    fromBlankText: "From Blank",
+    newDocumentText: "New Text Document",
+    newDescriptionText: "Create a new blank text document which you will be able to style and format after it is created during the editing. Or choose one of the templates to start a document of a certain type or purpose where some styles have already been pre-applied.",
+    fromTemplateText: "From Template"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/DigitalFilterDialog.js

@@ -0,0 +1,276 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.DigitalFilterDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.ssedigitalfilterdialog",
+    requires: ["Ext.window.Window"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    height: 226,
+    width: 500,
+    constrain: true,
+    padding: "20px 20px 0 20px",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    initComponent: function () {
+        var me = this;
+        var storeCondition = Ext.create("Ext.data.Store", {
+            fields: ["condition", "caption"],
+            data: [{
+                condition: c_oAscCustomAutoFilter.equals,
+                caption: me.capCondition1
+            },
+            {
+                condition: c_oAscCustomAutoFilter.doesNotEqual,
+                caption: me.capCondition2
+            },
+            {
+                condition: c_oAscCustomAutoFilter.isGreaterThan,
+                caption: me.capCondition3
+            },
+            {
+                condition: c_oAscCustomAutoFilter.isGreaterThanOrEqualTo,
+                caption: me.capCondition4
+            },
+            {
+                condition: c_oAscCustomAutoFilter.isLessThan,
+                caption: me.capCondition5
+            },
+            {
+                condition: c_oAscCustomAutoFilter.isLessThanOrEqualTo,
+                caption: me.capCondition6
+            },
+            {
+                condition: c_oAscCustomAutoFilter.beginsWith,
+                caption: me.capCondition7
+            },
+            {
+                condition: c_oAscCustomAutoFilter.doesNotBeginWith,
+                caption: me.capCondition8
+            },
+            {
+                condition: c_oAscCustomAutoFilter.endsWith,
+                caption: me.capCondition9
+            },
+            {
+                condition: c_oAscCustomAutoFilter.doesNotEndWith,
+                caption: me.capCondition10
+            },
+            {
+                condition: c_oAscCustomAutoFilter.contains,
+                caption: me.capCondition11
+            },
+            {
+                condition: c_oAscCustomAutoFilter.doesNotContain,
+                caption: me.capCondition12
+            }]
+        });
+        this.cmbCondition1 = Ext.create("Ext.form.field.ComboBox", {
+            store: storeCondition,
+            displayField: "caption",
+            valueField: "condition",
+            queryMode: "local",
+            typeAhead: false,
+            style: "margin-right: 10px",
+            width: 200,
+            editable: false
+        });
+        this.txtValue1 = Ext.create("Ext.form.Text", {
+            flex: 1,
+            value: ""
+        });
+        this.txtValue2 = Ext.create("Ext.form.Text", {
+            flex: 1,
+            value: ""
+        });
+        var storeCondition2 = Ext.create("Ext.data.Store", {
+            fields: ["condition", "caption"],
+            data: [{
+                condition: 0,
+                caption: me.textNoFilter
+            }]
+        });
+        storeCondition2.loadRecords(storeCondition.data.getRange(), {
+            addRecords: true
+        });
+        this.cmbCondition2 = Ext.create("Ext.form.field.ComboBox", {
+            store: storeCondition2,
+            displayField: "caption",
+            valueField: "condition",
+            queryMode: "local",
+            typeAhead: false,
+            style: "margin-right: 10px",
+            width: 200,
+            editable: false
+        });
+        this.rbMixer = Ext.widget("radiogroup", {
+            columns: 2,
+            width: 120,
+            items: [{
+                boxLabel: me.capAnd,
+                name: "mix",
+                inputValue: "and",
+                checked: true
+            },
+            {
+                boxLabel: me.capOr,
+                name: "mix",
+                inputValue: "or"
+            }]
+        });
+        var btnOk = Ext.create("Ext.Button", {
+            text: Ext.Msg.buttonText.ok,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    me.fireEvent("onmodalresult", me, 1);
+                    me.close();
+                }
+            }
+        });
+        var btnCancel = Ext.create("Ext.Button", {
+            text: me.cancelButtonText,
+            width: 80,
+            listeners: {
+                click: function () {
+                    me.fireEvent("onmodalresult", me, 0);
+                    me.close();
+                }
+            }
+        });
+        this.items = [{
+            xtype: "label",
+            style: "font-weight: bold;margin:0 0 4px 0;",
+            text: me.textShowRows
+        },
+        {
+            xtype: "container",
+            style: "margin:10px 0 0 0;",
+            layout: {
+                type: "hbox",
+                align: "middle"
+            },
+            items: [this.cmbCondition1, this.txtValue1]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "hbox",
+                align: "middle"
+            },
+            items: [this.rbMixer]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "hbox",
+                align: "middle"
+            },
+            items: [this.cmbCondition2, this.txtValue2]
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "container",
+            width: 400,
+            style: "margin:10px 0 0 0;",
+            layout: {
+                type: "hbox",
+                align: "middle"
+            },
+            items: [{
+                xtype: "tbspacer",
+                flex: 1
+            },
+            btnOk, {
+                xtype: "tbspacer",
+                width: 5
+            },
+            btnCancel]
+        }];
+        this.callParent(arguments);
+        this.setTitle(this.txtTitle);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this._setDefaults();
+    },
+    setSettings: function (config) {
+        this._defaults = [];
+        this._defaults.properties = config;
+    },
+    getSettings: function () {
+        var ret_out = new Asc.AutoFiltersOptions();
+        ret_out.asc_setCellId(this._defaults.properties.asc_getCellId());
+        ret_out.asc_setIsChecked(this.rbMixer.getValue().mix == "or");
+        ret_out.asc_setFilter1(this.cmbCondition1.getValue());
+        ret_out.asc_setFilter2(this.cmbCondition2.getValue() || undefined);
+        ret_out.asc_setValFilter1(this.txtValue1.getValue());
+        ret_out.asc_setValFilter2(this.txtValue2.getValue());
+        return ret_out;
+    },
+    _setDefaults: function () {
+        this.rbMixer.setValue({
+            mix: this._defaults.properties.asc_getIsChecked() ? "or" : "and"
+        });
+        this.cmbCondition1.setValue(this._defaults.properties.asc_getFilter1() || c_oAscCustomAutoFilter.equals);
+        this.cmbCondition2.setValue(this._defaults.properties.asc_getFilter2() || 0);
+        this.txtValue1.setValue(this._defaults.properties.asc_getValFilter1());
+        this.txtValue2.setValue(this._defaults.properties.asc_getValFilter2());
+    },
+    txtTitle: "Custom Filter",
+    capCondition1: "equals",
+    capCondition2: "does not equal",
+    capCondition3: "is greater than",
+    capCondition4: "is greater than or equal to",
+    capCondition5: "is less than",
+    capCondition6: "is less than or equal to",
+    capCondition7: "begins with",
+    capCondition8: "does not begin with",
+    capCondition9: "ends with",
+    capCondition10: "does not end with",
+    capCondition11: "contains",
+    capCondition12: "does not contain",
+    capAnd: "And",
+    capOr: "Or",
+    textShowRows: "Show rows where",
+    textUse1: "Use ? to present any single character",
+    textUse2 : "Use * to present any series of character",
+    textNoFilter: "no filter",
+    cancelButtonText: "Cancel"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/DocumentHelp.js

@@ -0,0 +1,267 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.model.ModelHelpMenu", {
+    extend: "Ext.data.Model",
+    fields: [{
+        type: "string",
+        name: "name"
+    },
+    {
+        type: "string",
+        name: "src"
+    },
+    {
+        type: "string",
+        name: "headername"
+    }]
+});
+Ext.define("SSE.view.DocumentHelp", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssedocumenthelp",
+    cls: "sse-documenthelp-body",
+    autoScroll: true,
+    requires: ["Ext.container.Container", "Ext.XTemplate", "Ext.view.View", "Ext.data.Model", "Ext.data.Store", "Common.plugin.DataViewScrollPane"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        this.urlPref = "resources/help/en/";
+        var en_data = [{
+            src: "UsageInstructions/OpenCreateNew.htm",
+            name: "Create a new spreadsheet or open an existing one",
+            headername: "Usage Instructions"
+        },
+        {
+            src: "UsageInstructions/ManageSheets.htm",
+            name: "Manage sheets"
+        },
+        {
+            src: "UsageInstructions/InsertDeleteCells.htm",
+            name: "Insert or delete cells, rows, and columns"
+        },
+        {
+            src: "UsageInstructions/CopyPasteData.htm",
+            name: "Copy and paste data"
+        },
+        {
+            src: "UsageInstructions/FontTypeSizeStyle.htm",
+            name: "Set font type, size, style, and colors"
+        },
+        {
+            src: "UsageInstructions/AlignText.htm",
+            name: "Align data in cells"
+        },
+        {
+            src: "UsageInstructions/AddBorders.htm",
+            name: "Add borders"
+        },
+        {
+            src: "UsageInstructions/MergeCells.htm",
+            name: "Merge cells"
+        },
+        {
+            src: "UsageInstructions/ClearFormatting.htm",
+            name: "Clear text, format in a cell"
+        },
+        {
+            src: "UsageInstructions/SortData.htm",
+            name: "Sort data"
+        },
+        {
+            src: "UsageInstructions/InsertFunction.htm",
+            name: "Insert function"
+        },
+        {
+            src: "UsageInstructions/ChangeNumberFormat.htm",
+            name: "Change number format"
+        },
+        {
+            src: "UsageInstructions/UndoRedo.htm",
+            name: "Undo/redo your actions"
+        },
+        {
+            src: "UsageInstructions/ViewDocInfo.htm",
+            name: "View file information"
+        },
+        {
+            src: "UsageInstructions/SavePrintDownload.htm",
+            name: "Save/print/download your spreadsheet"
+        },
+        {
+            src: "HelpfulHints/About.htm",
+            name: "About ONLYOFFICE Spreadsheet Editor",
+            headername: "Helpful Hints"
+        },
+        {
+            src: "HelpfulHints/SupportedFormats.htm",
+            name: "Supported Formats of Spreadsheets"
+        },
+        {
+            src: "HelpfulHints/Navigation.htm",
+            name: "Navigation through Your Spreadsheet"
+        },
+        {
+            src: "HelpfulHints/Search.htm",
+            name: "Search Function"
+        },
+        {
+            src: "HelpfulHints/KeyboardShortcuts.htm",
+            name: "Keyboard Shortcuts"
+        }];
+        this.menuStore = Ext.create("Ext.data.Store", {
+            model: "SSE.model.ModelHelpMenu",
+            proxy: {
+                type: "ajax",
+                url: "help/Contents.json",
+                noCache: false
+            },
+            listeners: {
+                load: function (store, records, successful) {
+                    if (!successful) {
+                        if (me.urlPref.indexOf("resources/help/en/") < 0) {
+                            me.urlPref = "resources/help/en/";
+                            store.getProxy().url = "resources/help/en/Contents.json";
+                            store.load();
+                        } else {
+                            me.urlPref = "resources/help/en/";
+                            store.loadData(en_data);
+                        }
+                    }
+                }
+            }
+        });
+        var menuTpl = new Ext.XTemplate('<tpl for=".">', '<tpl if="headername">', '<div class="header-wrap">', '<span class="header">{headername}</span>', "</div>", "</tpl>", '<div class="thumb-wrap">', '<span class="caption">{name}</span>', "</div>", "</tpl>", '<div class="x-clear"></div>');
+        this.cntMenu = Ext.create("Ext.container.Container", {
+            layout: "fit",
+            cls: "help-menu-container",
+            width: 200,
+            items: [this.menuView = Ext.create("Ext.view.View", {
+                store: this.menuStore,
+                tpl: menuTpl,
+                singleSelect: true,
+                trackOver: true,
+                style: "overflow:visible;",
+                width: "100%",
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "help-menu-view",
+                listeners: {
+                    afterrender: function (view) {
+                        view.getSelectionModel().deselectOnContainerClick = false;
+                        if (view.getStore().getCount()) {
+                            view.select(0);
+                            me.iFrame.src = me.urlPref + view.getStore().getAt(0).data.src;
+                        }
+                    },
+                    selectionchange: function (model, selections) {
+                        var record = model.getLastSelected();
+                        if (record) {
+                            me.iFrame.src = me.urlPref + record.data.src;
+                        }
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".help-menu-view",
+                    pluginId: "docHelpPluginId",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001
+                    }
+                }]
+            })]
+        });
+        this.iFrame = document.createElement("iframe");
+        this.iFrame.src = "";
+        this.iFrame.align = "top";
+        this.iFrame.frameBorder = "0";
+        this.iFrame.width = "100%";
+        this.iFrame.height = "100%";
+        this.iFrame.onload = Ext.bind(function () {
+            var src = arguments[0].currentTarget.contentDocument.URL;
+            Ext.each(this.menuStore.data.items, function (item, index) {
+                var res = src.indexOf(item.data.src);
+                if (res > 0) {
+                    this.menuView.select(index);
+                    var node = this.menuView.getNode(index),
+                    plugin = this.menuView.getPlugin("docHelpPluginId");
+                    if (plugin) {
+                        plugin.scrollToElement(node);
+                    }
+                    return false;
+                }
+            },
+            this);
+        },
+        this);
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            height: "100%",
+            items: [this.cntMenu, {
+                xtype: "tbspacer",
+                width: 2,
+                style: "border-left: 1px solid #C7C7C7"
+            },
+            {
+                xtype: "container",
+                flex: 1,
+                layout: "fit",
+                listeners: {
+                    afterrender: function (cmp) {
+                        cmp.getEl().appendChild(me.iFrame);
+                    }
+                }
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        if (o) {
+            this.api = o;
+        }
+    },
+    setLangConfig: function (lang) {
+        if (lang) {
+            lang = lang.split("-")[0];
+            this.menuStore.getProxy().url = "resources/help/" + lang + "/Contents.json";
+            this.menuStore.load();
+            this.urlPref = "resources/help/" + lang + "/";
+        }
+    }
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/DocumentHolder.js

@@ -0,0 +1,399 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.DocumentHolder", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssedocumentholder",
+    cls: "sse-documentholder",
+    uses: ["Ext.menu.Menu", "Ext.menu.Manager", "SSE.view.FormulaDialog", "Common.plugin.MenuExpand"],
+    config: {},
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    layout: "fit",
+    initComponent: function () {
+        var me = this;
+        this.setApi = function (o) {
+            me.api = o;
+            return me;
+        };
+        var value = window.localStorage.getItem("sse-settings-livecomment");
+        me.isLiveCommenting = !(value !== null && parseInt(value) == 0);
+        me.addEvents("editcomplete");
+        me.callParent(arguments);
+    },
+    createDelayedElements: function () {
+        var me = this;
+        function fixSubmenuPosition(submenu) {
+            if (!submenu.getPosition()[0]) {
+                if (submenu.floatParent) {
+                    var xy = submenu.el.getAlignToXY(submenu.parentItem.getEl(), "tl-tr?"),
+                    region = submenu.floatParent.getTargetEl().getViewRegion();
+                    submenu.setPosition([xy[0] - region.x, xy[1] - region.y]);
+                }
+            }
+        }
+        this.pmiInsertEntire = Ext.widget("menuitem", {
+            action: "insert-entire",
+            text: me.txtInsert
+        });
+        this.pmiInsertCells = Ext.widget("menuitem", {
+            text: me.txtInsert,
+            hideOnClick: false,
+            menu: {
+                action: "insert-cells",
+                showSeparator: false,
+                bodyCls: "no-icons",
+                items: [{
+                    text: me.txtShiftRight,
+                    kind: c_oAscInsertOptions.InsertCellsAndShiftRight
+                },
+                {
+                    text: me.txtShiftDown,
+                    kind: c_oAscInsertOptions.InsertCellsAndShiftDown
+                },
+                {
+                    text: me.txtRow,
+                    kind: c_oAscInsertOptions.InsertRows
+                },
+                {
+                    text: me.txtColumn,
+                    kind: c_oAscInsertOptions.InsertColumns
+                }],
+                plugins: [{
+                    ptype: "menuexpand"
+                }],
+                listeners: {
+                    show: fixSubmenuPosition
+                }
+            }
+        });
+        this.pmiDeleteEntire = Ext.widget("menuitem", {
+            action: "delete-entire",
+            text: me.txtDelete
+        });
+        this.pmiDeleteCells = Ext.widget("menuitem", {
+            text: me.txtDelete,
+            hideOnClick: false,
+            menu: {
+                action: "delete-cells",
+                showSeparator: false,
+                bodyCls: "no-icons",
+                items: [{
+                    text: me.txtShiftLeft,
+                    kind: c_oAscDeleteOptions.DeleteCellsAndShiftLeft
+                },
+                {
+                    text: me.txtShiftUp,
+                    kind: c_oAscDeleteOptions.DeleteCellsAndShiftTop
+                },
+                {
+                    text: me.txtRow,
+                    kind: c_oAscDeleteOptions.DeleteRows
+                },
+                {
+                    text: me.txtColumn,
+                    kind: c_oAscDeleteOptions.DeleteColumns
+                }],
+                plugins: [{
+                    ptype: "menuexpand"
+                }],
+                listeners: {
+                    show: fixSubmenuPosition
+                }
+            }
+        });
+        this.pmiSortCells = Ext.widget("menuitem", {
+            text: me.txtSort,
+            hideOnClick: false,
+            menu: {
+                id: "cmi-sort-cells",
+                bodyCls: "no-icons",
+                showSeparator: false,
+                items: [{
+                    text: me.txtAscending,
+                    direction: "descending"
+                },
+                {
+                    text: me.txtDescending,
+                    direction: "ascending"
+                }],
+                plugins: [{
+                    ptype: "menuexpand"
+                }],
+                listeners: {
+                    show: fixSubmenuPosition
+                }
+            }
+        });
+        this.pmiInsFunction = Ext.widget("menuitem", {
+            text: me.txtFormula,
+            listeners: {
+                click: function (item) {
+                    dlgFormulas.addListener("onmodalresult", function (o, mr, s) {
+                        me.fireEvent("editcomplete", me);
+                    },
+                    me, {
+                        single: true
+                    });
+                    dlgFormulas.show();
+                }
+            }
+        });
+        this.pmiInsHyperlink = Ext.widget("menuitem", {
+            action: "insert-hyperlink",
+            text: me.txtInsHyperlink
+        });
+        this.pmiDelHyperlink = Ext.widget("menuitem", {
+            action: "remove-hyperlink",
+            text: me.removeHyperlinkText
+        });
+        this.pmiRowHeight = Ext.widget("menuitem", {
+            action: "row-height",
+            text: this.txtRowHeight
+        });
+        this.pmiColumnWidth = Ext.widget("menuitem", {
+            action: "column-width",
+            text: this.txtColumnWidth
+        });
+        this.pmiEntireHide = Ext.widget("menuitem", {
+            text: this.txtHide,
+            handler: function (item, event) {
+                me.api[item.isrowmenu ? "asc_hideRows" : "asc_hideColumns"]();
+            }
+        });
+        this.pmiEntireShow = Ext.widget("menuitem", {
+            text: this.txtShow,
+            handler: function (item, event) {
+                me.api[item.isrowmenu ? "asc_showRows" : "asc_showColumns"]();
+            }
+        });
+        this.pmiAddComment = Ext.widget("menuitem", {
+            id: "cmi-add-comment",
+            text: this.txtAddComment
+        });
+        this.pmiCellMenuSeparator = Ext.widget("menuseparator");
+        this.ssMenu = Ext.widget("menu", {
+            id: "context-menu-cell",
+            showSeparator: false,
+            bodyCls: "no-icons",
+            group: "menu-document",
+            items: [{
+                text: this.txtCut,
+                group: "copy-paste",
+                action: "cut"
+            },
+            {
+                text: this.txtCopy,
+                group: "copy-paste",
+                action: "copy"
+            },
+            {
+                text: this.txtPaste,
+                group: "copy-paste",
+                action: "paste"
+            },
+            {
+                xtype: "menuseparator"
+            },
+            this.pmiInsertEntire, this.pmiInsertCells, this.pmiDeleteEntire, this.pmiDeleteCells, {
+                action: "clear-all",
+                text: me.txtClear
+            },
+            this.pmiSortCells, {
+                xtype: "menuseparator"
+            },
+            this.pmiAddComment, this.pmiCellMenuSeparator, this.pmiInsFunction, this.pmiInsHyperlink, this.pmiDelHyperlink, this.pmiRowHeight, this.pmiColumnWidth, this.pmiEntireHide, this.pmiEntireShow],
+            plugins: [{
+                ptype: "menuexpand"
+            }]
+        });
+        this.mnuGroupImg = Ext.create("Ext.menu.Item", {
+            iconCls: "mnu-icon-item mnu-group",
+            text: this.txtGroup,
+            action: "image-grouping",
+            grouping: true
+        });
+        this.mnuUnGroupImg = Ext.create("Ext.menu.Item", {
+            iconCls: "mnu-icon-item mnu-ungroup",
+            text: this.txtUngroup,
+            action: "image-grouping",
+            grouping: false
+        });
+        this.imgMenu = Ext.widget("menu", {
+            showSeparator: false,
+            group: "menu-document",
+            listeners: {
+                click: function (menu, item) {
+                    if (item) {
+                        me.api.asc_setSelectedDrawingObjectLayer(item.arrange);
+                    }
+                    me.fireEvent("editcomplete", me);
+                }
+            },
+            items: [{
+                iconCls: "mnu-icon-item mnu-arrange-front",
+                text: this.textArrangeFront,
+                arrange: c_oAscDrawingLayerType.BringToFront
+            },
+            {
+                iconCls: "mnu-icon-item mnu-arrange-back",
+                text: this.textArrangeBack,
+                arrange: c_oAscDrawingLayerType.SendToBack
+            },
+            {
+                iconCls: "mnu-icon-item mnu-arrange-forward",
+                text: this.textArrangeForward,
+                arrange: c_oAscDrawingLayerType.BringForward
+            },
+            {
+                iconCls: "mnu-icon-item mnu-arrange-backward",
+                text: this.textArrangeBackward,
+                arrange: c_oAscDrawingLayerType.SendBackward
+            },
+            {
+                xtype: "menuseparator"
+            },
+            this.mnuGroupImg, this.mnuUnGroupImg]
+        });
+        this.menuParagraphVAlign = Ext.widget("menuitem", {
+            text: this.vertAlignText,
+            hideOnClick: false,
+            menu: {
+                showSeparator: false,
+                bodyCls: "no-icons",
+                items: [this.menuParagraphTop = Ext.widget("menucheckitem", {
+                    text: this.topCellText,
+                    checked: false,
+                    group: "popupparagraphvalign",
+                    valign: c_oAscVerticalTextAlign.TEXT_ALIGN_TOP
+                }), this.menuParagraphCenter = Ext.widget("menucheckitem", {
+                    text: this.centerCellText,
+                    checked: false,
+                    group: "popupparagraphvalign",
+                    valign: c_oAscVerticalTextAlign.TEXT_ALIGN_CTR
+                }), this.menuParagraphBottom = Ext.widget("menucheckitem", {
+                    text: this.bottomCellText,
+                    checked: false,
+                    group: "popupparagraphvalign",
+                    valign: c_oAscVerticalTextAlign.TEXT_ALIGN_BOTTOM
+                })],
+                plugins: [{
+                    ptype: "menuexpand"
+                }]
+            }
+        });
+        this.pmiInsHyperlinkShape = Ext.widget("menuitem", {
+            text: me.txtInsHyperlink,
+            action: "add-hyperlink-shape"
+        });
+        this.pmiRemoveHyperlinkShape = Ext.widget("menuitem", {
+            text: me.removeHyperlinkText,
+            action: "remove-hyperlink-shape"
+        });
+        this.pmiTextAdvanced = Ext.widget("menuitem", {
+            text: me.txtTextAdvanced,
+            action: "text-advanced"
+        });
+        this.textInShapeMenu = Ext.widget("menu", {
+            showSeparator: false,
+            bodyCls: "no-icons",
+            group: "menu-document",
+            items: [this.menuParagraphVAlign, this.pmiInsHyperlinkShape, this.pmiRemoveHyperlinkShape, {
+                xtype: "menuseparator"
+            },
+            this.pmiTextAdvanced]
+        });
+        this.funcMenu = Ext.widget("menu", {
+            showSeparator: false,
+            bodyCls: "no-icons",
+            group: "menu-document",
+            items: [{
+                text: "item 1"
+            },
+            {
+                text: "item 2"
+            },
+            {
+                text: "item 3"
+            },
+            {
+                text: "item 4"
+            },
+            {
+                text: "item 5"
+            }]
+        });
+    },
+    setLiveCommenting: function (value) {
+        this.isLiveCommenting = value;
+    },
+    txtSort: "Sort",
+    txtAscending: "Ascending",
+    txtDescending: "Descending",
+    txtFormula: "Insert Function",
+    txtInsHyperlink: "Add Hyperlink",
+    txtCut: "Cut",
+    txtCopy: "Copy",
+    txtPaste: "Paste",
+    txtInsert: "Insert",
+    txtDelete: "Delete",
+    txtFilter: "Filter",
+    txtClear: "Clear All",
+    txtShiftRight: "Shift cells right",
+    txtShiftLeft: "Shift cells left",
+    txtShiftUp: "Shift cells up",
+    txtShiftDown: "Shift cells down",
+    txtRow: "Entire Row",
+    txtColumn: "Entire Column",
+    txtColumnWidth: "Column Width",
+    txtRowHeight: "Row Height",
+    txtWidth: "Width",
+    txtHide: "Hide",
+    txtShow: "Show",
+    textArrangeFront: "Bring To Front",
+    textArrangeBack: "Send To Back",
+    textArrangeForward: "Bring Forward",
+    textArrangeBackward: "Send Backward",
+    txtArrange: "Arrange",
+    txtAddComment: "Add Comment",
+    txtUngroup: "Ungroup",
+    txtGroup: "Group",
+    topCellText: "Align Top",
+    centerCellText: "Align Center",
+    bottomCellText: "Align Bottom",
+    vertAlignText: "Vertical Alignment",
+    txtTextAdvanced: "Text Advanced Settings",
+    editHyperlinkText: "Edit Hyperlink",
+    removeHyperlinkText: "Remove Hyperlink"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/DocumentInfo.js

@@ -0,0 +1,250 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.DocumentInfo", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssedocumentinfo",
+    cls: "sse-documentinfo-body",
+    autoScroll: true,
+    requires: ["Ext.button.Button", "Ext.container.Container", "Common.plugin.ScrollPane", "Ext.form.Label", "Ext.XTemplate", "Ext.Date"],
+    uses: ["Common.view.DocumentAccessDialog"],
+    listeners: {
+        afterrender: function (cmp, eOpts) {
+            cmp.updateInfo(cmp.doc);
+        }
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.infoObj = {
+            PageCount: 0,
+            WordsCount: 0,
+            ParagraphCount: 0,
+            SymbolsCount: 0,
+            SymbolsWSCount: 0
+        };
+        this.inProgress = false;
+        this.lblTitle = Ext.create("Ext.form.Label", {
+            text: "-",
+            height: 14
+        });
+        this.lblPlacement = Ext.create("Ext.form.Label", {
+            text: "-",
+            width: 150,
+            height: 14,
+            style: "text-align:left",
+            hideId: "element-to-hide"
+        });
+        this.lblDate = Ext.create("Ext.form.Label", {
+            text: "-",
+            width: 150,
+            height: 14,
+            style: "text-align:left",
+            hideId: "element-to-hide"
+        });
+        var userTpl = Ext.create("Ext.XTemplate", '<span class="userLink">{text:htmlEncode}</span>');
+        this.cntAuthor = Ext.create("Ext.container.Container", {
+            tpl: userTpl,
+            data: {
+                text: "-"
+            },
+            hideId: "element-to-hide"
+        });
+        var rightsTpl = Ext.create("Ext.XTemplate", "<table>", '<tpl for=".">', "<tr>", '<td style="padding: 0 20px 5px 0;"><span class="userLink">{user:htmlEncode}</span></td>', '<td style="padding: 0 20px 5px 0;">{permissions:htmlEncode}</td>', "</tr>", "</tpl>", "</table>");
+        this.cntRights = Ext.create("Ext.container.Container", {
+            tpl: rightsTpl,
+            hideId: "element-to-hide"
+        });
+        this.items = [{
+            xtype: "tbspacer",
+            height: 30
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 2,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    style: "padding: 5px 10px;vertical-align: top;"
+                }
+            },
+            items: [{
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtTitle,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.lblTitle, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtAuthor,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.cntAuthor, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtPlacement,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.lblPlacement, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtDate,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.lblDate, {
+                xtype: "tbspacer",
+                colspan: 2,
+                height: 5
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtRights,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.cntRights, this.tbsRights = Ext.create("Ext.toolbar.Spacer", {
+                colspan: 2,
+                height: 5,
+                hideId: "element-to-hide"
+            }), {
+                xtype: "box"
+            },
+            this.btnEditRights = Ext.widget("button", {
+                id: "doc-info-set-rights",
+                cls: "asc-blue-button",
+                text: this.txtBtnAccessRights,
+                hideId: "element-to-hide",
+                listeners: {
+                    click: Ext.bind(this._changeAccessRights, this)
+                }
+            })]
+        }];
+        Ext.apply(this, {
+            plugins: [{
+                ptype: "scrollpane",
+                areaSelector: ".x-container",
+                pluginId: "docInfoPluginId",
+                settings: {
+                    enableKeyboardNavigation: true
+                }
+            }]
+        });
+        this.callParent(arguments);
+    },
+    updateInfo: function (doc) {
+        this.doc = doc;
+        if (!this.rendered) {
+            return;
+        }
+        doc = doc || {};
+        this.lblTitle.setText((doc.title) ? doc.title : "-");
+        if (doc.info) {
+            if (doc.info.author) {
+                this.cntAuthor.update({
+                    text: doc.info.author
+                });
+            }
+            this._ShowHideInfoItem(this.cntAuthor, doc.info.author !== undefined && doc.info.author !== null);
+            if (doc.info.created) {
+                this.lblDate.setText(doc.info.created);
+            }
+            this._ShowHideInfoItem(this.lblDate, doc.info.created !== undefined && doc.info.created !== null);
+            if (doc.info.folder) {
+                this.lblPlacement.setText(doc.info.folder);
+            }
+            this._ShowHideInfoItem(this.lblPlacement, doc.info.folder !== undefined && doc.info.folder !== null);
+            if (doc.info.sharingSettings) {
+                this.cntRights.update(doc.info.sharingSettings);
+            }
+            this._ShowHideInfoItem(this.cntRights, doc.info.sharingSettings !== undefined && doc.info.sharingSettings !== null && this._readonlyRights !== true);
+            this._ShowHideInfoItem(this.tbsRights, doc.info.sharingSettings !== undefined && doc.info.sharingSettings !== null && this._readonlyRights !== true);
+            this._ShowHideInfoItem(this.btnEditRights, !!this.sharingSettingsUrl && this.sharingSettingsUrl.length && this._readonlyRights !== true);
+        } else {
+            this._ShowHideDocInfo(false);
+        }
+    },
+    _ShowHideInfoItem: function (cmp, visible) {
+        var tr = cmp.getEl().up("tr");
+        if (tr) {
+            tr.setDisplayed(visible);
+        }
+    },
+    _ShowHideDocInfo: function (visible) {
+        var components = Ext.ComponentQuery.query('[hideId="element-to-hide"]', this);
+        for (var i = 0; i < components.length; i++) {
+            this._ShowHideInfoItem(components[i], visible);
+        }
+    },
+    stopUpdatingStatisticInfo: function () {},
+    setApi: function (o) {},
+    loadConfig: function (data) {
+        this.sharingSettingsUrl = data.config.sharingSettingsUrl;
+        return this;
+    },
+    _changeAccessRights: function (btn, event, opts) {
+        var win = Ext.widget("commondocumentaccessdialog", {
+            settingsurl: this.sharingSettingsUrl
+        });
+        var me = this;
+        win.on("accessrights", function (obj, rights) {
+            me.doc.info.sharingSettings = rights;
+            me.cntRights.update(rights);
+        });
+        win.show();
+    },
+    onLostEditRights: function () {
+        this._readonlyRights = true;
+        if (!this.rendered) {
+            return;
+        }
+        this._ShowHideInfoItem(this.cntRights, false);
+        this._ShowHideInfoItem(this.tbsRights, false);
+        this._ShowHideInfoItem(this.btnEditRights, false);
+    },
+    txtTitle: "Document Title",
+    txtAuthor: "Author",
+    txtPlacement: "Placement",
+    txtDate: "Creation Date",
+    txtRights: "Persons who have rights",
+    txtBtnAccessRights: "Change access rights"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/DocumentSettings.js

@@ -0,0 +1,161 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.DocumentSettings", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssedocumentsettings",
+    cls: "sse-documentsettings-panel",
+    autoScroll: true,
+    requires: ["Ext.container.Container", "Ext.XTemplate", "Ext.view.View", "Ext.data.Model", "Ext.data.Store", "Common.plugin.DataViewScrollPane", "SSE.view.MainSettingsGeneral", "SSE.view.MainSettingsPrint"],
+    listeners: {
+        show: function (cmp, eOpts) {
+            cmp.updateSettings();
+        }
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.addEvents("savedocsettings");
+        this.addEvents("changemeasureunit");
+        me.generalSettings = Ext.widget("ssemainsettingsgeneral");
+        me.printSettings = Ext.widget("ssemainsettingsprint");
+        me.printSettings.updateMetricUnit();
+        var settingsPanels = [me.generalSettings, me.printSettings, 1];
+        me.generalSettings.addListener("savedocsettings", function () {
+            me.fireEvent("savedocsettings", me);
+        });
+        me.generalSettings.addListener("changemeasureunit", function () {
+            var value = window.localStorage.getItem("sse-settings-unit");
+            Common.MetricSettings.setCurrentMetric((value !== null) ? parseInt(value) : Common.MetricSettings.c_MetricUnits.cm);
+            me.printSettings.updateMetricUnit();
+            me.fireEvent("changemeasureunit", me);
+        });
+        this.menuStore = Ext.create("Ext.data.Store", {
+            fields: ["name", {
+                type: "int",
+                name: "panelindex"
+            },
+            "iconCls"],
+            data: [{
+                name: me.txtGeneral,
+                panelindex: 0,
+                iconCls: "mnu-settings-general"
+            },
+            {
+                name: me.txtPrint,
+                panelindex: 1,
+                iconCls: "mnu-print"
+            }]
+        });
+        var menuTpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap">', '<img class="icon {iconCls}" src="' + Ext.BLANK_IMAGE_URL + '" />', '<span class="caption">{name}</span>', "</div>", "</tpl>", '<div class="x-clear"></div>');
+        this.cntMenu = Ext.create("Ext.container.Container", {
+            layout: "fit",
+            cls: "help-menu-container",
+            width: 200,
+            items: [this.menuView = Ext.create("Ext.view.View", {
+                store: this.menuStore,
+                tpl: menuTpl,
+                singleSelect: true,
+                trackOver: true,
+                style: "overflow:visible;",
+                width: "100%",
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "help-menu-view",
+                listeners: {
+                    afterrender: function (view) {
+                        view.getSelectionModel().deselectOnContainerClick = false;
+                        view.select(0);
+                    },
+                    selectionchange: function (model, selections) {
+                        var record = model.getLastSelected();
+                        if (record) {
+                            if (settingsPanels[record.data.panelindex].updateSettings) {
+                                settingsPanels[record.data.panelindex].updateSettings();
+                            }
+                            settingsPanels[record.data.panelindex].setVisible(true);
+                            settingsPanels[settingsPanels[settingsPanels.length - 1]].setVisible(false);
+                            settingsPanels[settingsPanels.length - 1] = record.data.panelindex;
+                        }
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".help-menu-view",
+                    pluginId: "docHelpPluginId",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001
+                    }
+                }]
+            })]
+        });
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            height: "100%",
+            items: [this.cntMenu, {
+                xtype: "tbspacer",
+                width: 2,
+                style: "border-left: 1px solid #C7C7C7"
+            },
+            {
+                xtype: "container",
+                flex: 1,
+                layout: "fit",
+                items: [me.generalSettings, me.printSettings],
+                listeners: {}
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        if (o) {
+            this.api = o;
+        }
+    },
+    updateSettings: function () {
+        this.generalSettings && this.generalSettings.updateSettings();
+    },
+    setMode: function (mode) {
+        this.mode = mode;
+        this.generalSettings && this.generalSettings.setMode(this.mode);
+    },
+    txtGeneral: "General",
+    txtPrint: "Print"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/DocumentStatusInfo.js

@@ -0,0 +1,711 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ var ACTIVE_TAB_NEXT = -255;
+var ACTIVE_TAB_PREV = -254;
+Ext.define("SSE.view.DocumentStatusInfo", {
+    extend: "Ext.container.Container",
+    alias: "widget.documentstatusinfo",
+    requires: ["Ext.form.field.Number", "Ext.button.Button", "Ext.form.Label", "Ext.toolbar.Spacer", "SSE.plugin.TabBarScroller", "SSE.plugin.TabReorderer"],
+    uses: ["Ext.tip.ToolTip", "Ext.menu.Menu", "SSE.view.SheetRenameDialog", "SSE.view.SheetCopyDialog", "Common.view.Participants"],
+    cls: "sse-documentstatusinfo",
+    height: 27,
+    layout: {
+        type: "hbox",
+        align: "middle"
+    },
+    style: "padding-left:5px;padding-right:40px;",
+    initComponent: function () {
+        var me = this;
+        this.permissions = {};
+        this.txtZoom = Ext.widget("label", {
+            id: "status-label-zoom",
+            text: Ext.String.format(me.zoomText, 0),
+            cls: "statusinfo-pages",
+            style: "cursor: pointer; white-space:nowrap; text-align: center;",
+            listeners: {
+                afterrender: function (ct) {
+                    ct.getEl().on("mousedown", onShowZoomMenu, me);
+                    ct.getEl().set({
+                        "data-qtip": me.tipZoomFactor,
+                        "data-qalign": "bl-tl?"
+                    });
+                    ct.setWidth(Ext.util.TextMetrics.measure(ct.getEl(), Ext.String.format(me.zoomText, 999)).width);
+                }
+            }
+        });
+        this.btnZoomIn = Ext.widget("button", {
+            id: "status-button-zoom-in",
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-statusbar-btn btn-zoomin",
+            style: "margin-left:5px;"
+        });
+        this.btnZoomOut = Ext.widget("button", {
+            id: "status-button-zoom-out",
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-statusbar-btn btn-zoomout",
+            style: "margin:0 5px 0 40px;"
+        });
+        this.userPanel = Ext.widget("statusinfoparticipants", {
+            pack: "end",
+            userIconCls: "sse-icon-statusinfo-users"
+        });
+        var onShowZoomMenu = function (event, elem) {
+            if (!elem.disabled) {
+                this.menuZoomTo.show();
+                this.menuZoomTo.showBy(me.txtZoom, "b-t", [0, -10]);
+            }
+        };
+        this.setApi = function (o) {
+            this.api = o;
+            this.api.asc_registerCallback("asc_onZoomChanged", Ext.bind(me.onZoomChange, me));
+            this.api.asc_registerCallback("asc_onSheetsChanged", Ext.bind(me.updateInfo, me));
+            this.api.asc_registerCallback("asc_onEditCell", Ext.bind(me._onStartEditCell, me));
+            this.api.asc_registerCallback("asc_onActiveSheetChanged", Ext.bind(me._onActiveSheetChanged, me));
+            this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(me.onCoAuthoringDisconnect, me));
+            this.api.asc_registerCallback("asc_onWorkbookLocked", Ext.bind(me.onWorkbookLocked, me));
+            this.api.asc_registerCallback("asc_onWorksheetLocked", Ext.bind(me.onWorksheetLocked, me));
+            this.userPanel.setApi(this.api);
+            return this;
+        };
+        var btnPageFirst = Ext.widget("button", {
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-page-scroller-btn btn-scroll-first"
+        });
+        var btnPageLast = Ext.widget("button", {
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-page-scroller-btn btn-scroll-last"
+        });
+        var btnPagePrev = Ext.widget("button", {
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-page-scroller-btn btn-scroll-prev"
+        });
+        var btnPageNext = Ext.widget("button", {
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-page-scroller-btn btn-scroll-next"
+        });
+        this.barWorksheets = Ext.widget("tabbar", {
+            dock: "bottom",
+            plain: true,
+            width: "100%",
+            style: "margin:-2px 0 0 5px;",
+            plugins: [{
+                ptype: "tabbarscroller",
+                pluginId: "tabbarscroller",
+                firstButton: btnPageFirst,
+                lastButton: btnPageLast,
+                prevButton: btnPagePrev,
+                nextButton: btnPageNext
+            },
+            {
+                ptype: "tabreorderer",
+                pluginId: "scheetreorderer"
+            }]
+        });
+        me.items = [btnPageFirst, btnPagePrev, btnPageNext, btnPageLast, {
+            xtype: "container",
+            flex: 1,
+            height: "100%",
+            items: [this.barWorksheets]
+        },
+        this.userPanel, this.btnZoomOut, this.txtZoom, this.btnZoomIn];
+        me.callParent(arguments);
+    },
+    onZoomChange: function (zf, type) {
+        switch (type) {
+        case 1:
+            case 2:
+            case 0:
+            default:
+            this.txtZoom.setText(Ext.String.format(this.zoomText, Math.floor((zf + 0.005) * 100)));
+        }
+        this.doLayout();
+    },
+    updateInfo: function () {
+        this.fireEvent("updatesheetsinfo", this);
+        this.barWorksheets.removeAll();
+        this.ssMenu.items.items[6].menu.removeAll();
+        this.ssMenu.items.items[6].setVisible(false);
+        if (this.api) {
+            var me = this;
+            var wc = this.api.asc_getWorksheetsCount(),
+            i = -1;
+            var hidentems = [],
+            items = [],
+            tab,
+            locked;
+            var sindex = this.api.asc_getActiveWorksheetIndex();
+            while (++i < wc) {
+                locked = me.api.asc_isWorksheetLockedOrDeleted(i);
+                tab = {
+                    sheetindex: i,
+                    text: me.api.asc_getWorksheetName(i).replace(/\s/g, "&nbsp;"),
+                    reorderable: !locked,
+                    closable: false,
+                    cls: locked ? "coauth-locked" : undefined
+                };
+                this.api.asc_isWorksheetHidden(i) ? hidentems.push(tab) : items.push(tab);
+                if (sindex == i) {
+                    sindex = items.length - 1;
+                }
+            }
+            var checkcount = items.length;
+            if (this.permissions.isEdit) {
+                items.push({
+                    iconCls: "asc-add-page-icon",
+                    width: 36,
+                    closable: false,
+                    reorderable: false,
+                    disabled: me.api.asc_isWorkbookLocked(),
+                    listeners: {
+                        afterrender: function (cmp) {
+                            cmp.getEl().on("click", me._onAddTabClick, me, {
+                                preventDefault: true,
+                                tabid: "tab-add-new"
+                            });
+                        }
+                    }
+                });
+            }
+            if (hidentems.length) {
+                this.ssMenu.items.items[6].setVisible(true);
+                this.ssMenu.items.items[6].menu.add(hidentems);
+            }
+            if (checkcount) {
+                this.barWorksheets.add(items);
+                if (! (sindex < 0) && sindex < checkcount) {
+                    this.barWorksheets.suspendEvents();
+                    this.barWorksheets.setActiveTab(this.barWorksheets.items.items[sindex]);
+                    this.barWorksheets.resumeEvents();
+                }
+                this.barWorksheets.getPlugin("tabbarscroller").scrollToLast();
+                this.barWorksheets.getPlugin("scheetreorderer").dd.unlock();
+            }
+            this.barWorksheets.enable(true);
+            this.txtZoom.setText(Ext.String.format(this.zoomText, this.api.asc_getZoom() * 100));
+        }
+    },
+    setMode: function (m) {
+        this.permissions = m;
+        this.userPanel.setMode(m);
+        var plugin = this.barWorksheets.getPlugin("scheetreorderer");
+        if (plugin) {
+            plugin.setDisabled(!this.permissions.isEdit);
+        }
+    },
+    setActiveWorksheet: function (index, opt) {
+        if (!index) {
+            var new_index = this.barWorksheets.activeTab ? this.barWorksheets.items.items.indexOf(this.barWorksheets.activeTab) : 0;
+            if (opt == ACTIVE_TAB_NEXT) {
+                if (! (++new_index < this.barWorksheets.items.items.length - 1)) {
+                    new_index = 0;
+                }
+            } else {
+                if (opt == ACTIVE_TAB_PREV) {
+                    if (--new_index < 0) {
+                        new_index = this.barWorksheets.items.items.length - 2;
+                    }
+                }
+            }
+            this.barWorksheets.setActiveTab(this.barWorksheets.items.items[new_index]);
+        }
+    },
+    _onTabClick: function (tabBar, tab, card, eOpts) {
+        if (! (tab.sheetindex < 0)) {
+            this.api.asc_showWorksheet(tab.sheetindex);
+            if (tab.newindex != undefined) {
+                var new_index = tab.newindex + 1;
+                new_index < this.barWorksheets.items.length - 1 ? new_index = this.barWorksheets.items.getAt(new_index).sheetindex : new_index = this.api.asc_getWorksheetsCount();
+                this.api.asc_moveWorksheet(new_index);
+                tab.newindex = undefined;
+            }
+        }
+        this.fireEvent("editcomplete", this);
+    },
+    _onAddTabClick: function (e, el, opt) {
+        e.stopEvent();
+        if (!e.target.parentNode.disabled && this.permissions.isEdit) {
+            this.api.asc_addWorksheet();
+        }
+    },
+    _onTabContextMenu: function (event, docElement, eOpts) {
+        if (this.api && this.permissions.isEdit) {
+            var tab = Ext.getCmp(eOpts.tabid);
+            if (tab && tab.sheetindex >= 0) {
+                if (!this.barWorksheets.activeTab || tab.id != this.barWorksheets.activeTab.id) {
+                    this.barWorksheets.setActiveTab(tab);
+                }
+                var issheetlocked = this.api.asc_isWorksheetLockedOrDeleted(tab.sheetindex),
+                isdoclocked = this.api.asc_isWorkbookLocked();
+                this.ssMenu.items.items[0].setDisabled(isdoclocked);
+                this.ssMenu.items.items[1].setDisabled(issheetlocked);
+                this.ssMenu.items.items[2].setDisabled(issheetlocked);
+                this.ssMenu.items.items[3].setDisabled(issheetlocked);
+                this.ssMenu.items.items[4].setDisabled(issheetlocked);
+                this.ssMenu.items.items[5].setDisabled(issheetlocked);
+                this.ssMenu.items.items[6].setDisabled(isdoclocked);
+                this.api.asc_closeCellEditor();
+                this._showPopupMenu(this.ssMenu, {},
+                event, tab.getEl(), eOpts);
+            }
+        }
+    },
+    _onTabDblClick: function (event, docElement, eOpts) {
+        if (this.api && this.permissions.isEdit) {
+            var tab = Ext.getCmp(eOpts.tabid);
+            if (tab && tab.sheetindex >= 0) {
+                if (!this.api.asc_isWorksheetLockedOrDeleted(tab.sheetindex) && this.api.asc_getActiveWorksheetIndex() == tab.sheetindex) {
+                    this._renameWorksheet();
+                }
+            }
+        }
+    },
+    _showPopupMenu: function (menu, value, event, docElement, eOpts) {
+        if (Ext.isDefined(menu)) {
+            Ext.menu.Manager.hideAll();
+            var showPoint = event.getXY();
+            showPoint[1] += 10;
+            if (Ext.isFunction(menu.initMenu)) {
+                menu.initMenu(value);
+            }
+            menu.show();
+            menu.showBy(docElement, "bl-tl");
+        }
+    },
+    _getNewSheetName: function (n) {
+        var nameindex = 1;
+        var firstname = this.strSheet;
+        var wc = this.api.asc_getWorksheetsCount(),
+        i = -1;
+        var items = [];
+        while (++i < wc) {
+            items.push(this.api.asc_getWorksheetName(i));
+        }
+        while (true) {
+            if (Ext.Array.contains(items, firstname + nameindex)) {
+                nameindex++;
+                if (nameindex > 100) {
+                    return "";
+                }
+            } else {
+                break;
+            }
+        }
+        return firstname + nameindex;
+    },
+    _insertWorksheet: function () {
+        var name = this._getNewSheetName();
+        this.api.asc_insertWorksheet(name);
+    },
+    _deleteWorksheet: function () {
+        var me = this;
+        if (this.barWorksheets.items.items.length == 2) {
+            Ext.Msg.show({
+                title: this.textWarning,
+                msg: this.errorLastSheet,
+                icon: Ext.Msg.WARNING,
+                buttons: Ext.Msg.OK
+            });
+        } else {
+            Ext.create("Ext.window.MessageBox", {
+                buttonText: {
+                    ok: "OK",
+                    yes: "Yes",
+                    no: "No",
+                    cancel: me.textCancel
+                }
+            }).show({
+                title: this.textWarning,
+                msg: this.warnDeleteSheet,
+                icon: Ext.Msg.WARNING,
+                buttons: Ext.Msg.OKCANCEL,
+                fn: function (bid) {
+                    if (bid == "ok") {
+                        var index = me.api.asc_getActiveWorksheetIndex();
+                        var uid = me.api.asc_getActiveWorksheetId();
+                        if (!me.api.asc_deleteWorksheet()) {
+                            Ext.Msg.show({
+                                title: me.textError,
+                                msg: me.msgDelSheetError,
+                                icon: Ext.Msg.ERROR,
+                                buttons: Ext.Msg.OK
+                            });
+                        } else {
+                            me.fireEvent("removeworksheet", index, uid);
+                        }
+                    }
+                }
+            });
+        }
+    },
+    _renameWorksheet: function () {
+        var me = this;
+        var wc = me.api.asc_getWorksheetsCount(),
+        items = [],
+        i = -1;
+        while (++i < wc) {
+            items.push(me.api.asc_getWorksheetName(i));
+        }
+        var win = Ext.create("SSE.view.SheetRenameDialog", {
+            title: "Rename",
+            renameindex: me.api.asc_getActiveWorksheetIndex(),
+            names: items
+        });
+        win.addListener("onmodalresult", function (o, mr, s) {
+            if (mr) {
+                me.api.asc_renameWorksheet(s);
+                me.barWorksheets.activeTab.setText(s.replace(/\s/g, "&nbsp;"));
+            }
+            me.fireEvent("editcomplete", me);
+        },
+        false);
+        win.show();
+        var xy = win.getEl().getAlignToXY(me.barWorksheets.activeTab.getEl(), "bl-tl");
+        win.showAt(xy[0], xy[1] - 4);
+    },
+    _getSheetCopyName: function (n) {
+        var result = /^(.*)\((\d)\)$/.exec(n);
+        var nameindex = 2;
+        var firstname = result ? result[1] : n + " ";
+        var tn = firstname + "(" + nameindex + ")";
+        var wc = this.api.asc_getWorksheetsCount(),
+        i = -1;
+        var items = [];
+        while (++i < wc) {
+            items.push(this.api.asc_getWorksheetName(i));
+        }
+        while (true) {
+            if (Ext.Array.contains(items, tn)) {
+                nameindex++;
+                if (nameindex > 100) {
+                    return "";
+                }
+                tn = firstname + "(" + nameindex + ")";
+            } else {
+                break;
+            }
+        }
+        return tn;
+    },
+    _copyWorksheet: function (cut) {
+        var me = this;
+        var wc = me.api.asc_getWorksheetsCount(),
+        i = -1;
+        var items = [];
+        while (++i < wc) {
+            if (!this.api.asc_isWorksheetHidden(i)) {
+                items.push({
+                    name: me.api.asc_getWorksheetName(i).replace(/\s/g, "&nbsp;"),
+                    sheetindex: i
+                });
+            }
+        }
+        if (items.length) {
+            items.push({
+                name: cut ? me.itemMoveToEnd : me.itemCopyToEnd,
+                sheetindex: -255
+            });
+        }
+        var win = Ext.create("SSE.view.SheetCopyDialog", {
+            title: cut ? me.itemMoveWS : me.itemCopyWS,
+            listtitle: cut ? this.textMoveBefore : undefined,
+            names: items
+        });
+        win.addListener("onmodalresult", function (o, mr, i) {
+            if (mr && me.api) {
+                if (cut) {
+                    me.api.asc_moveWorksheet(i == -255 ? wc : i);
+                } else {
+                    var new_text = me._getSheetCopyName(me.api.asc_getWorksheetName(me.api.asc_getActiveWorksheetIndex()));
+                    me.api.asc_copyWorksheet(i == -255 ? wc : i, new_text);
+                }
+            }
+            me.fireEvent("editcomplete", me);
+        },
+        false);
+        win.show();
+    },
+    _showWorksheet: function (show, index) {
+        Ext.menu.Manager.hideAll();
+        if (!show && this.barWorksheets.items.items.length == 2) {
+            Ext.Msg.show({
+                title: this.textWarning,
+                msg: this.errorLastSheet,
+                icon: Ext.Msg.WARNING,
+                buttons: Ext.Msg.OK
+            });
+            return;
+        }
+        this.api[show ? "asc_showWorksheet" : "asc_hideWorksheet"](index);
+    },
+    _onStartEditCell: function (isstart) {
+        this.txtZoom.setDisabled(isstart);
+        this.btnZoomIn.setDisabled(isstart);
+        this.btnZoomOut.setDisabled(isstart);
+    },
+    _onActiveSheetChanged: function (index) {
+        var seltab, item, ic = this.barWorksheets.items.items.length;
+        while (! (--ic < 0)) {
+            item = this.barWorksheets.items.items[ic];
+            if (item.sheetindex == index) {
+                seltab = item;
+                break;
+            }
+        }
+        if (seltab) {
+            this.barWorksheets.setActiveTab(seltab);
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        this.btnZoomIn.getEl().set({
+            "data-qtip": me.tipZoomIn,
+            "data-qalign": "bl-tl?"
+        });
+        this.btnZoomOut.getEl().set({
+            "data-qtip": me.tipZoomOut,
+            "data-qalign": "bl-tl?"
+        });
+        this.btnZoomIn.on("click", function () {
+            var f = me.api.asc_getZoom() + 0.1;
+            if (f > 0 && !(f > 2)) {
+                me.api.asc_setZoom(f);
+            }
+        });
+        this.btnZoomOut.on("click", function () {
+            var f = me.api.asc_getZoom() - 0.1;
+            if (! (f < 0.5)) {
+                me.api.asc_setZoom(f);
+            }
+        });
+        this.barWorksheets.on("change", this._onTabClick, this);
+        this.barWorksheets.getEl().on({
+            contextmenu: {
+                fn: function (event, docElement, eOpts) {
+                    var tab = /x-tab(?!\S)/.test(docElement.className) ? docElement : Ext.fly(docElement).up(".x-tab");
+                    tab && me._onTabContextMenu(event, docElement, {
+                        tabid: tab.id
+                    });
+                },
+                preventDefault: true
+            },
+            dblclick: {
+                fn: function (event, docElement, eOpts) {
+                    var tab = /x-tab(?!\S)/.test(docElement.className) ? docElement : Ext.fly(docElement).up(".x-tab");
+                    tab && me._onTabDblClick(event, docElement, {
+                        tabid: tab.id
+                    });
+                },
+                preventDefault: true
+            }
+        });
+        this.barWorksheets.getPlugin("scheetreorderer").on({
+            drop: function (obj, tabbar, tab, idx, nidx, opts) {
+                if (nidx != idx) {
+                    obj.lock();
+                    tab.newindex = nidx;
+                    tab.reorderable = false;
+                }
+            }
+        });
+        this.menuZoomTo = Ext.widget("menu", {
+            plain: true,
+            bodyCls: "status-zoom-menu",
+            minWidth: 100,
+            listeners: {
+                click: function (menu, item) {
+                    if (me.api) {
+                        me.api.asc_setZoom(item.fz);
+                    }
+                    me.onZoomChange(item.fz);
+                    me.fireEvent("editcomplete", me);
+                }
+            },
+            items: [{
+                text: "50%",
+                fz: 0.5
+            },
+            {
+                text: "75%",
+                fz: 0.75
+            },
+            {
+                text: "100%",
+                fz: 1
+            },
+            {
+                text: "125%",
+                fz: 1.25
+            },
+            {
+                text: "150%",
+                fz: 1.5
+            },
+            {
+                text: "175%",
+                fz: 1.75
+            },
+            {
+                text: "200%",
+                fz: 2
+            }]
+        });
+        this.ssMenu = Ext.widget("menu", {
+            showSeparator: false,
+            bodyCls: "no-icons",
+            listeners: {
+                hide: function (cnt, eOpt) {
+                    me.fireEvent("editcomplete", me);
+                },
+                click: function (menu, item) {
+                    if (!item.isDisabled()) {
+                        if (item.action == "ins") {
+                            me._insertWorksheet();
+                        } else {
+                            if (item.action == "del") {
+                                me._deleteWorksheet();
+                            } else {
+                                if (item.action == "ren") {
+                                    me._renameWorksheet();
+                                } else {
+                                    if (item.action == "copy") {
+                                        me._copyWorksheet(false);
+                                    } else {
+                                        if (item.action == "move") {
+                                            me._copyWorksheet(true);
+                                        } else {
+                                            if (item.action == "hide") {
+                                                me._showWorksheet(false);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            items: [{
+                text: this.itemInsertWS,
+                action: "ins"
+            },
+            {
+                text: this.itemDeleteWS,
+                action: "del"
+            },
+            {
+                text: this.itemRenameWS,
+                action: "ren"
+            },
+            {
+                text: this.itemCopyWS,
+                action: "copy"
+            },
+            {
+                text: this.itemMoveWS,
+                action: "move"
+            },
+            {
+                text: this.itemHideWS,
+                action: "hide"
+            },
+            {
+                text: this.itemHidenWS,
+                hideOnClick: false,
+                menu: {
+                    showSeparator: false,
+                    items: [],
+                    listeners: {
+                        click: function (menu, item) {
+                            me._showWorksheet(true, item.sheetindex);
+                        }
+                    }
+                }
+            }]
+        });
+    },
+    onCoAuthoringDisconnect: function () {
+        this.permissions.isEdit = false;
+        this.barWorksheets.getPlugin("scheetreorderer").setDisabled(true);
+        this.updateInfo();
+    },
+    onWorkbookLocked: function (locked) {
+        this.barWorksheets[locked ? "addCls" : "removeCls"]("coauth-locked");
+        var item, ic = this.barWorksheets.items.items.length;
+        while (! (--ic < 0)) {
+            item = this.barWorksheets.items.items[ic];
+            if (item.sheetindex >= 0) {
+                if (locked) {
+                    item.reorderable = false;
+                } else {
+                    item.reorderable = !this.api.asc_isWorksheetLockedOrDeleted(item.sheetindex);
+                }
+            } else {
+                item.setDisabled(locked);
+            }
+        }
+    },
+    onWorksheetLocked: function (index, locked) {
+        var tabs = this.barWorksheets.items.items;
+        for (var i = 0; i < tabs.length; i++) {
+            if (index == tabs[i].sheetindex) {
+                tabs[i][locked ? "addCls" : "removeCls"]("coauth-locked");
+                tabs[i].reorderable = !locked;
+                break;
+            }
+        }
+    },
+    zoomText: "Zoom {0}%",
+    tipZoomIn: "Zoom In",
+    tipZoomOut: "Zoom Out",
+    tipZoomFactor: "Magnification",
+    txtFirst: "First Sheet",
+    txtLast: "Last Sheet",
+    txtPrev: "Previous Sheet",
+    txtNext: "Next Sheet",
+    itemInsertWS: "Insert",
+    itemDeleteWS: "Delete",
+    itemRenameWS: "Rename",
+    itemCopyWS: "Copy",
+    itemMoveWS: "Move",
+    itemHideWS: "Hide",
+    itemHidenWS: "Hiden",
+    itemCopyToEnd: "(Copy to end)",
+    itemMoveToEnd: "(Move to end)",
+    msgDelSheetError: "Can't delete the worksheet.",
+    textMoveBefore: "Move before sheet",
+    warnDeleteSheet: "The worksheet maybe has data. Proceed operation?",
+    errorLastSheet : "Workbook must have at least one visible worksheet.",
+    strSheet: "Sheet",
+    textError: "Error",
+    textWarning: "Warning",
+    textCancel: "Cancel"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/File.js

@@ -0,0 +1,391 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.File", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.ssefile",
+    cls: "sse-file-body",
+    layout: "card",
+    btnSaveCaption: "Save",
+    btnDownloadCaption: "Download as...",
+    btnInfoCaption: "Document Info...",
+    btnCreateNewCaption: "Create New...",
+    btnRecentFilesCaption: "Open Recent...",
+    btnPrintCaption: "Print",
+    btnHelpCaption: "Help...",
+    btnReturnCaption: "Back to Document",
+    btnToEditCaption: "Edit Document",
+    btnBackCaption: "Go to Documents",
+    btnSettingsCaption: "Advanced Settings...",
+    toolbarWidth: 260,
+    activeBtn: undefined,
+    uses: ["Ext.container.Container", "Ext.toolbar.Toolbar", "Ext.button.Button", "SSE.view.DocumentInfo", "SSE.view.RecentFiles", "SSE.view.CreateFile", "SSE.view.DocumentHelp", "SSE.view.DocumentSettings"],
+    listeners: {
+        afterrender: function (Component, eOpts) {
+            var cnt = this.ownerCt;
+            if (Ext.isDefined(cnt)) {
+                cnt.addListener("show", Ext.Function.bind(this._onShow, this));
+            }
+        }
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("editdocument", "downloadas");
+        this.callParent(arguments);
+    },
+    loadConfig: function (data) {
+        this.editorConfig = data.config;
+    },
+    _onShow: function () {
+        if (this.activeBtn === undefined) {
+            this.activeBtn = this.btnDownloadAs.isVisible() ? this.btnCreateNew : this.btnDocumentInfo;
+        }
+        if (this.activeBtn == this.btnDocumentInfo) {
+            this.getLayout().setActiveItem(this.cardDocumentInfo);
+        } else {
+            if (this.activeBtn == this.btnDocumentSettings) {
+                this.getLayout().setActiveItem(this.cardDocumentSettings);
+                this.cardDocumentSettings.updateSettings();
+            } else {
+                if (this.activeBtn == this.btnCreateNew) {
+                    if (this.btnDownloadAs.isVisible()) {
+                        this.getLayout().setActiveItem(this.cardDownloadAs);
+                        this.activeBtn = this.btnDownloadAs;
+                    } else {
+                        this.getLayout().setActiveItem(this.cardDocumentInfo);
+                        this.activeBtn = this.btnDocumentInfo;
+                    }
+                }
+            }
+        }
+        this.redrawButton(this.activeBtn);
+    },
+    buildDockedItems: function () {
+        this.btnSave = Ext.create("Ext.button.Button", {
+            id: "file-button-save",
+            text: this.btnSaveCaption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        this.api = this.ownerCt.getApi();
+                        if (this.api) {
+                            this.redrawButton(btnCall);
+                            this.api.asc_Save();
+                            this.closeMenu();
+                        }
+                        Common.component.Analytics.trackEvent("Save");
+                        Common.component.Analytics.trackEvent("File Menu", "Save");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnPrint = this.btnSave.cloneConfig({
+            id: "file-button-print",
+            text: this.btnPrintCaption,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        this.api = this.ownerCt.getApi();
+                        if (this.api) {
+                            this.api.asc_Print();
+                            this.closeMenu();
+                        }
+                        Common.component.Analytics.trackEvent("Print");
+                        Common.component.Analytics.trackEvent("File Menu", "Print");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnToEdit = this.btnSave.cloneConfig({
+            id: "file-button-edit",
+            text: this.btnToEditCaption,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    this.redrawButton(btnCall);
+                    if (btnCall.pressed) {
+                        this.closeMenu();
+                        this.fireEvent("editdocument");
+                        Common.component.Analytics.trackEvent("Edit");
+                        Common.component.Analytics.trackEvent("File Menu", "Edit");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnDownloadAs = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnDownloadCaption, this.cardDownloadAs), {
+            id: "file-button-download"
+        }));
+        this.btnDocumentInfo = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnInfoCaption, this.cardDocumentInfo), {
+            id: "file-button-info"
+        }));
+        this.btnDocumentSettings = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnSettingsCaption, this.cardDocumentSettings), {
+            id: "file-button-settings"
+        }));
+        this.btnBack = this.btnPrint.cloneConfig({
+            id: "file-button-back",
+            text: this.btnBackCaption,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    this.redrawButton(btnCall);
+                    if (btnCall.pressed) {
+                        Common.Gateway.goBack();
+                        this.closeMenu();
+                    }
+                },
+                this)
+            }
+        });
+        this.btnHelp = Ext.create("Ext.button.Button", this.getFileMenuButton(this.btnHelpCaption, this.cardHelp));
+        this.btnReturn = Ext.create("Ext.button.Button", {
+            id: "file-button-return",
+            text: this.btnReturnCaption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        this.closeMenu();
+                        Common.component.Analytics.trackEvent("File Menu", "Return");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnCreateNew = Ext.create("Ext.button.Button", Ext.apply(this.getFileMenuButton(this.btnCreateNewCaption, this.cardCreateNew), {
+            id: "file-button-createnew",
+            label: "Create",
+            listeners: {},
+            enableToggle: false
+        }));
+        this.btnOpenRecent = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnRecentFilesCaption, this.cardRecentFiles), {
+            id: "file-button-recentfiles",
+            label: "Recent"
+        }));
+        this.tbFileMenu = Ext.create("Ext.toolbar.Toolbar", {
+            dock: "left",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            cls: "sse-file-toolbar",
+            vertical: true,
+            width: this.toolbarWidth,
+            defaults: {
+                height: 22,
+                width: "100%"
+            },
+            items: [{
+                xtype: "container",
+                height: 15
+            },
+            this.btnReturn, this.getSeparator(), this.btnSave, this.btnToEdit, this.btnDownloadAs, this.btnPrint, this.getSeparator(), this.btnOpenRecent, this.btnCreateNew, this.getSeparator(), this.btnDocumentInfo, this.getSeparator(), this.btnDocumentSettings, this.getSeparator(), this.btnHelp, this.getSeparator(), this.btnBack]
+        });
+        return this.tbFileMenu;
+    },
+    setApi: function (api) {
+        this.api = api;
+    },
+    getSeparator: function () {
+        return {
+            xtype: "container",
+            html: '<hr class="sse-file-separator" />'
+        };
+    },
+    getFileMenuButton: function (caption, card) {
+        return {
+            text: caption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27,
+            listeners: {
+                click: Ext.Function.bind(this._itemClick, this, [card], true),
+                toggle: Ext.Function.bind(this._itemTogglge, this)
+            }
+        };
+    },
+    redrawButton: function (btnCall) {
+        var tb = this.tbFileMenu;
+        for (var i = 0; i < tb.items.length; i++) {
+            var btn = tb.items.items[i];
+            if (btn.componentCls === "x-btn") {
+                if (btn.id != btnCall.id && btn.pressed) {
+                    btn.toggle(false, true);
+                }
+            }
+        }
+        btnCall.toggle(true, true);
+    },
+    closeMenu: function () {
+        this.ownerCt.closeMenu();
+    },
+    _itemClick: function (btnCall, event, opt, card) {
+        if (btnCall.pressed) {
+            if (this.activeBtn != btnCall) {
+                this.getLayout().setActiveItem(card);
+                this.activeBtn = btnCall;
+            }
+            Common.component.Analytics.trackEvent("File Menu", btnCall.label);
+        }
+    },
+    _itemTogglge: function (btnCall) {
+        this.redrawButton(btnCall);
+    },
+    applyMode: function () {
+        this.btnDownloadAs.setVisible(this.mode.canDownload);
+        this.hkSaveAs[this.mode.canDownload ? "enable" : "disable"]();
+        this.hkSave[this.mode.isEdit ? "enable" : "disable"]();
+        this.hkHelp.enable();
+        this.btnSave.setVisible(this.mode.isEdit);
+        this.btnToEdit.setVisible(this.mode.canEdit && this.mode.isEdit === false);
+        this.btnDocumentSettings.setVisible(this.mode.isEdit);
+        this.tbFileMenu.items.items[14].setVisible(this.mode.isEdit);
+        this.btnBack.setVisible(this.mode.canBack);
+        this.tbFileMenu.items.items[16].setVisible(this.mode.canBack);
+        this.btnOpenRecent.setVisible(this.mode.canOpenRecent);
+        this.btnCreateNew.setVisible(this.mode.canCreateNew);
+        this.tbFileMenu.items.items[10].setVisible(this.mode.canCreateNew || this.mode.canOpenRecent);
+        this.cardDocumentSettings.setMode(this.mode);
+    },
+    setMode: function (mode, delay) {
+        if (mode.isDisconnected) {
+            this.mode.canEdit = this.mode.isEdit = false;
+            this.mode.canOpenRecent = this.mode.canCreateNew = false;
+        } else {
+            this.mode = mode;
+        }
+        if (!delay) {
+            this.applyMode();
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        this.hkSaveAs = new Ext.util.KeyMap(document, [{
+            key: "s",
+            ctrl: true,
+            shift: true,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (me.ownerCt && me.ownerCt.isVisible()) {
+                    me.btnDownloadAs.toggle(true);
+                    me.btnDownloadAs.fireEvent("click", me.btnDownloadAs);
+                }
+            }
+        }]);
+        this.hkSave = new Ext.util.KeyMap(document, [{
+            key: "s",
+            ctrl: true,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (canHotKey()) {
+                    var api = me.ownerCt.getApi();
+                    if (api) {
+                        api.asc_Save();
+                    }
+                }
+            }
+        }]);
+        this.hkHelp = new Ext.util.KeyMap(document, {
+            key: Ext.EventObject.F1,
+            ctrl: false,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (me.ownerCt && me.ownerCt.isVisible()) {
+                    me.btnHelp.toggle(true);
+                    me.btnHelp.fireEvent("click", me.btnHelp, [me.cardHelp]);
+                }
+            }
+        });
+        var docInfo = [{
+            name: "XLSX",
+            imgCls: "tabular-format btn-xlsx",
+            type: c_oAscFileType.XLSX
+        }];
+        this.cardDownloadAs = Ext.widget("container", {
+            cls: "sse-file-table",
+            layout: {
+                type: "table",
+                columns: 2
+            }
+        });
+        Ext.each(docInfo, function (item) {
+            this.cardDownloadAs.add({
+                xtype: "container",
+                items: [{
+                    xtype: "button",
+                    id: "file-format-" + item.name,
+                    cls: item.imgCls + " download-button-style",
+                    docType: item.type,
+                    width: 102,
+                    height: 129,
+                    margin: "65px 25px 0 25px"
+                }]
+            });
+        },
+        this);
+        this.cardDocumentInfo = Ext.widget("ssedocumentinfo");
+        this.cardCreateNew = Ext.widget("ssecreatenew");
+        this.cardRecentFiles = Ext.widget("sserecentfiles");
+        this.cardHelp = Ext.widget("ssedocumenthelp");
+        this.cardDocumentSettings = Ext.widget("ssedocumentsettings");
+        this.cardDocumentSettings.addListener("savedocsettings", Ext.bind(this.closeMenu, this));
+        this.add([this.cardDownloadAs, this.cardHelp, this.cardDocumentInfo, this.cardRecentFiles, this.cardDocumentSettings]);
+        this.addDocked(this.buildDockedItems());
+        this.setConfig();
+        this.applyMode();
+    },
+    setConfig: function () {
+        this.cardHelp.setLangConfig(this.editorConfig.lang);
+        if (this.editorConfig.templates && this.editorConfig.templates.length > 0) {
+            this.btnCreateNew.enableToggle = true;
+            this.btnCreateNew.on("click", Ext.bind(this._itemClick, this, [this.cardCreateNew], true));
+            this.btnCreateNew.on("toggle", Ext.bind(this._itemTogglge, this));
+        }
+    }
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/FormulaDialog.js

@@ -0,0 +1,247 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.FormulaDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.sseformuladialog",
+    requires: ["Ext.window.Window", "Common.plugin.GridScrollPane"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    height: 490,
+    width: 300,
+    constrain: true,
+    padding: "10px 20px 0 20px",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    initComponent: function () {
+        var gp_store = Ext.create("SSE.store.FormulaGroups");
+        this.cmbGroup = Ext.create("Ext.form.field.ComboBox", {
+            id: "formulas-group-combo",
+            store: gp_store,
+            displayField: "groupname",
+            queryMode: "local",
+            queryDelay: 1000,
+            typeAhead: false,
+            editable: false,
+            listeners: {
+                select: function (combo, records, eOpts) {},
+                specialkey: function (obj, event) {
+                    if (!obj.isExpanded && event.getKey() == Ext.EventObject.ESC) {
+                        this.fireEvent("onmodalresult", this, 0);
+                        this.hide();
+                    }
+                },
+                scope: this
+            }
+        });
+        Ext.create("SSE.store.Formulas", {
+            storeId: "appFormulasStore"
+        });
+        var funcList = Ext.create("Ext.grid.Panel", {
+            activeItem: 0,
+            id: "formulas-list",
+            store: Ext.data.StoreManager.lookup("appFormulasStore"),
+            stateful: true,
+            stateId: "stateGrid",
+            scroll: false,
+            columns: [{
+                flex: 1,
+                sortable: false,
+                dataIndex: "func"
+            }],
+            height: 250,
+            hideHeaders: true,
+            viewConfig: {
+                stripeRows: false
+            },
+            plugins: [{
+                pluginId: "scrollpane",
+                ptype: "gridscrollpane"
+            }],
+            listeners: {
+                itemdblclick: function (o, record, item, index, e, eOpts) {
+                    this.btnOk.fireEvent("click", this.btnOk);
+                },
+                select: function (o, record, index, eOpts) {
+                    lblSyntax.setText("Syntax: " + record.data.func + record.data.args);
+                },
+                viewready: function (cmp) {
+                    cmp.getView().on("cellkeydown", function (obj, cell, cellIndex, record, row, rowIndex, e) {
+                        if (e.getKey() == Ext.EventObject.ESC) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.hide();
+                            return false;
+                        }
+                    },
+                    this);
+                },
+                scope: this
+            }
+        });
+        var lblSyntax = Ext.widget("label", {});
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            height: 57,
+            width: 260,
+            items: [{
+                xtype: "label",
+                text: this.textGroupDescription,
+                style: "font-weight: bold;margin:0 0 4px 0;"
+            },
+            this.cmbGroup]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            height: 277,
+            width: 260,
+            items: [{
+                xtype: "label",
+                text: this.textListDescription,
+                style: "font-weight:bold;margin:0 0 4px 0;"
+            },
+            funcList]
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            height: 56,
+            items: [lblSyntax]
+        },
+        {
+            xtype: "tbspacer",
+            height: 8,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    id: "formulas-button-ok",
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 1, funcList.getSelectionModel().selected.items[0].data.func);
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.hide();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.listeners = {
+            show: function () {}
+        };
+        this.callParent(arguments);
+        this.setTitle(this.txtTitle);
+    },
+    setGroups: function (arr) {
+        var groupDesc = {
+            "Cube": this.sCategoryCube,
+            "Database": this.sCategoryDatabase,
+            "DateAndTime": this.sCategoryDateTime,
+            "Engineering": this.sCategoryEngineering,
+            "Financial": this.sCategoryFinancial,
+            "Information": this.sCategoryInformation,
+            "Logical": this.sCategoryLogical,
+            "LookupAndReference": this.sCategoryLookupAndReference,
+            "Mathematic": this.sCategoryMathematics,
+            "Statistical": this.sCategoryStatistical,
+            "TextAndData": this.sCategoryTextData
+        };
+        var garr = [[this.sCategoryAll, "all"]];
+        Ext.each(arr, function (item) {
+            garr.push([groupDesc[item], item]);
+        });
+        this.cmbGroup.getStore().removeAll(true);
+        this.cmbGroup.getStore().loadData(garr);
+        this.cmbGroup.select(this.cmbGroup.getStore().getAt(0));
+    },
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    sCategoryAll: "All",
+    sCategoryLogical: "Logical",
+    sCategoryCube: "Cube",
+    sCategoryDatabase: "Database",
+    sCategoryDateTime: "Date and time",
+    sCategoryEngineering: "Engineering",
+    sCategoryFinancial: "Financial",
+    sCategoryInformation: "Information",
+    sCategoryLookupAndReference: "LookupAndReference",
+    sCategoryMathematics: "Math and trigonometry",
+    sCategoryStatistical: "Statistical",
+    sCategoryTextData: "Text and data",
+    textGroupDescription: "Select Function Group",
+    textListDescription: "Select Function",
+    sDescription: "Description",
+    txtTitle: "Insert Function"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/HyperlinkSettings.js

@@ -0,0 +1,339 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.HyperlinkSettings", {
+    extend: "Ext.window.Window",
+    alias: "widget.ssehyperlinksettings",
+    requires: ["Ext.window.Window", "Ext.form.field.ComboBox", "Ext.form.field.Text", "Ext.Array"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 348,
+    width: 366,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            if (this.contExtLink.isVisible()) {
+                this.txtLink.focus(false, 500);
+            } else {
+                this.txtLinkText.focus(false, 500);
+            }
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.cmbLinkType = Ext.widget("combo", {
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "type"],
+                data: [{
+                    type: c_oAscHyperlinkType.RangeLink,
+                    description: me.textInternalLink
+                },
+                {
+                    type: c_oAscHyperlinkType.WebLink,
+                    description: me.textExternalLink
+                }]
+            }),
+            displayField: "description",
+            valueField: "type",
+            queryMode: "local",
+            editable: false,
+            listeners: {
+                change: function (o, nV, oV) {
+                    var isinter = nV == c_oAscHyperlinkType.RangeLink;
+                    me.contIntLink.setVisible(isinter);
+                    me.contExtLink.setVisible(!isinter);
+                }
+            }
+        });
+        this.cmbSheets = Ext.widget("combo", {
+            store: Ext.create("Ext.data.ArrayStore", {
+                fields: ["name"],
+                data: this.sheets
+            }),
+            displayField: "name",
+            queryMode: "local",
+            editable: false
+        });
+        this.txtDataRange = Ext.widget("textfield", {
+            allowBlank: false,
+            check: false,
+            blankText: me.txtEmpty,
+            msgTarget: "side",
+            validator: function (value) {
+                if (!this.check) {
+                    return true;
+                }
+                var isvalid = /^[A-Z]+[1-9]\d*:[A-Z]+[1-9]\d*$/.test(value); ! isvalid && (isvalid = /^[A-Z]+[1-9]\d*$/.test(value));
+                if (isvalid) {
+                    $("#" + this.id + " input").css("color", "black");
+                    return true;
+                } else {
+                    $("#" + this.id + " input").css("color", "red");
+                    return me.textInvalidRange;
+                }
+            },
+            listeners: {
+                blur: function (o) {
+                    this.check = true;
+                    this.check = !this.validate();
+                }
+            }
+        });
+        this.txtLink = Ext.widget("textfield", {
+            allowBlank: false,
+            blankText: me.txtEmpty,
+            emptyText: me.textEmptyLink,
+            validateOnChange: false,
+            msgTarget: "side",
+            regex: /(([\-\wа-яё]+\.)+[\wа-яё]{2,3}(\/[%\-\wа-яё]+(\.[\wа-яё]{2,})?)*(([\wа-яё\-\.\?\\\/+@&#;`~=%!]*)(\.[\wа-яё]{2,})?)*\/?)/i,
+            regexText: me.txtNotUrl
+        });
+        this.txtLinkText = Ext.widget("textfield", {
+            allowBlank: false,
+            blankText: me.txtEmpty,
+            msgTarget: "side",
+            emptyText: me.textEmptyDesc
+        });
+        this.txtLinkTip = Ext.widget("textfield", {
+            emptyText: me.textEmptyTooltip
+        });
+        this.label = Ext.widget("label", {
+            width: "100%",
+            margin: "0 0 3 0"
+        });
+        this.contExtLink = Ext.widget("container", {
+            height: 44,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [this.label.cloneConfig({
+                text: me.strLinkTo
+            }), this.txtLink]
+        });
+        this.contIntLink = Ext.widget("container", {
+            height: 44,
+            hidden: true,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                flex: 1,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [this.label.cloneConfig({
+                    text: me.strSheet
+                }), this.cmbSheets]
+            },
+            {
+                xtype: "tbspacer",
+                width: 18
+            },
+            {
+                xtype: "container",
+                flex: 1,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [this.label.cloneConfig({
+                    text: me.strRange
+                }), this.txtDataRange]
+            }]
+        });
+        this.items = [{
+            xtype: "container",
+            height: 254,
+            padding: "18",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [this.label.cloneConfig({
+                text: me.textLinkType
+            }), this.cmbLinkType, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.contExtLink, this.contIntLink, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.labelDisplay = this.label.cloneConfig({
+                text: me.strDisplay
+            }), this.txtLinkText, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.label.cloneConfig({
+                text: me.textTipText
+            }), this.txtLinkTip]
+        },
+        this._spacer.cloneConfig({
+            style: "margin: 0 18px"
+        }), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: Ext.Msg.buttonText.ok,
+                    listeners: {
+                        click: function (btn) {
+                            if (me.cmbLinkType.getValue() == c_oAscHyperlinkType.RangeLink) {
+                                me.txtDataRange.check = true;
+                                if (!me.txtDataRange.validate()) {
+                                    me.txtDataRange.focus(true, 500);
+                                    return;
+                                }
+                            } else {
+                                if (!me.txtLink.isValid()) {
+                                    me.txtLink.focus(true, 500);
+                                    return;
+                                }
+                            }
+                            if (!me.txtLinkText.isValid()) {
+                                me.txtLinkText.focus(true, 500);
+                                return;
+                            }
+                            this.fireEvent("onmodalresult", this, 1);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: me.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+        this.setTitle(this.textTitle);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+    },
+    setSettings: function (props, text, islock) {
+        if (!props) {
+            this.cmbLinkType.select(this.cmbLinkType.getStore().getAt(1));
+            this.txtLinkText.setValue(text);
+        } else {
+            var index = this.cmbLinkType.getStore().find("type", props.asc_getType());
+            this.cmbLinkType.select(this.cmbLinkType.getStore().getAt(index));
+            if (props.asc_getType() == c_oAscHyperlinkType.RangeLink) {
+                index = this.cmbSheets.getStore().find("name", props.asc_getSheet());
+                if (! (index < 0)) {
+                    this.cmbSheets.select(this.cmbSheets.getStore().getAt(index));
+                }
+                this.txtDataRange.setValue(props.asc_getRange());
+            } else {
+                this.txtLink.setValue(props.asc_getHyperlinkUrl());
+            }
+            this.txtLinkText.setValue(props.asc_getText());
+            this.txtLinkTip.setValue(props.asc_getTooltip());
+        }
+        this.txtLinkText.setDisabled(islock);
+        this.labelDisplay.setDisabled(islock);
+    },
+    getSettings: function () {
+        var props = new Asc.asc_CHyperlink();
+        props.asc_setType(this.cmbLinkType.getValue());
+        if (this.cmbLinkType.getValue() == c_oAscHyperlinkType.RangeLink) {
+            props.asc_setSheet(this.cmbSheets.getValue());
+            props.asc_setRange(this.txtDataRange.getValue());
+        } else {
+            var url = this.txtLink.getValue().replace(/^\s+|\s+$/g, "");
+            if (!/(((^https?)|(^ftp)):\/\/)/i.test(url)) {
+                url = "http://" + url;
+            }
+            props.asc_setHyperlinkUrl(url);
+        }
+        props.asc_setText(this.txtLinkText.isDisabled() ? null : this.txtLinkText.getValue());
+        props.asc_setTooltip(this.txtLinkTip.getValue());
+        return props;
+    },
+    textTitle: "Hyperlink Settings",
+    textInternalLink: "Internal Data Range",
+    textExternalLink: "Web Link",
+    textEmptyLink: "Enter link here",
+    textEmptyDesc: "Enter caption here",
+    textEmptyTooltip: "Enter tooltip here",
+    strSheet: "Sheet",
+    strRange: "Range",
+    textLinkType: "Link Type",
+    strDisplay: "Display",
+    textTipText: "Screen Tip Text",
+    strLinkTo: "Link To",
+    txtEmpty: "This field is required",
+    textInvalidRange: "ERROR! Invalid cells range",
+    txtNotUrl: 'This field should be a URL in the format "http://www.example.com"',
+    cancelButtonText: "Cancel"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/ImageSettings.js

@@ -0,0 +1,389 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.ImageSettings", {
+    extend: "Common.view.AbstractSettingsPanel",
+    alias: "widget.sseimagesettings",
+    height: 192,
+    requires: ["Ext.ComponentQuery", "Ext.container.Container", "Ext.button.Button", "Ext.form.Label", "Ext.toolbar.Spacer", "Common.view.ImageFromUrlDialog", "Ext.util.Cookies"],
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        this.title = this.txtTitle;
+        this._initSettings = true;
+        this._nRatio = 1;
+        this._state = {
+            Width: 0,
+            Height: 0
+        };
+        this._spnWidth = Ext.create("Common.component.MetricSpinner", {
+            id: "image-spin-width",
+            readOnly: false,
+            maxValue: 55.88,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "3 cm",
+            width: 78,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    var w = field.getNumberValue();
+                    var h = this._spnHeight.getNumberValue();
+                    if (this._btnRatio.pressed) {
+                        h = w / this._nRatio;
+                        if (h > this._spnHeight.maxValue) {
+                            h = this._spnHeight.maxValue;
+                            w = h * this._nRatio;
+                            this._spnWidth.suspendEvents(false);
+                            this._spnWidth.setValue(w);
+                            this._spnWidth.resumeEvents();
+                        }
+                        this._spnHeight.suspendEvents(false);
+                        this._spnHeight.setValue(h);
+                        this._spnHeight.resumeEvents();
+                    }
+                    if (this.api) {
+                        var props = new Asc.asc_CImgProperty();
+                        props.asc_putWidth(Common.MetricSettings.fnRecalcToMM(w));
+                        props.asc_putHeight(Common.MetricSettings.fnRecalcToMM(h));
+                        this.api.asc_setGraphicObjectProps(props);
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnWidth);
+        this._spnHeight = Ext.create("Common.component.MetricSpinner", {
+            id: "image-span-height",
+            readOnly: false,
+            maxValue: 55.88,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "3 cm",
+            width: 78,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    var h = field.getNumberValue(),
+                    w = this._spnWidth.getNumberValue();
+                    if (this._btnRatio.pressed) {
+                        w = h * this._nRatio;
+                        if (w > this._spnWidth.maxValue) {
+                            w = this._spnWidth.maxValue;
+                            h = w / this._nRatio;
+                            this._spnHeight.suspendEvents(false);
+                            this._spnHeight.setValue(h);
+                            this._spnHeight.resumeEvents();
+                        }
+                        this._spnWidth.suspendEvents(false);
+                        this._spnWidth.setValue(w);
+                        this._spnWidth.resumeEvents();
+                    }
+                    if (this.api) {
+                        var props = new Asc.asc_CImgProperty();
+                        props.asc_putWidth(Common.MetricSettings.fnRecalcToMM(w));
+                        props.asc_putHeight(Common.MetricSettings.fnRecalcToMM(h));
+                        this.api.asc_setGraphicObjectProps(props);
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnHeight);
+        var value = window.localStorage.getItem("sse-settings-imageratio");
+        this._btnRatio = Ext.create("Ext.Button", {
+            id: "image-button-ratio",
+            iconCls: "advanced-btn-ratio",
+            enableToggle: true,
+            width: 22,
+            height: 22,
+            pressed: (value === null || parseInt(value) == 1),
+            style: "margin: 0 0 0 4px;",
+            tooltip: this.textKeepRatio,
+            toggleHandler: Ext.bind(function (btn) {
+                if (btn.pressed && this._spnHeight.getNumberValue() > 0) {
+                    this._nRatio = this._spnWidth.getNumberValue() / this._spnHeight.getNumberValue();
+                }
+                window.localStorage.setItem("sse-settings-imageratio", (btn.pressed) ? 1 : 0);
+            },
+            this)
+        });
+        this._btnOriginalSize = Ext.create("Ext.Button", {
+            id: "image-button-original-size",
+            text: this.textOriginalSize,
+            width: 106,
+            listeners: {
+                click: this.setOriginalSize,
+                scope: this
+            }
+        });
+        this._btnInsertFromFile = Ext.create("Ext.Button", {
+            id: "image-button-from-file",
+            text: this.textFromFile,
+            width: 85,
+            listeners: {
+                click: function (btn) {
+                    if (this.api) {
+                        this.api.asc_changeImageFromFile();
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                scope: this
+            }
+        });
+        this._btnInsertFromUrl = Ext.create("Ext.Button", {
+            id: "image-button-from-url",
+            text: this.textFromUrl,
+            width: 85,
+            listeners: {
+                click: function (btn) {
+                    var w = Ext.create("Common.view.ImageFromUrlDialog");
+                    w.addListener("onmodalresult", Ext.bind(this._onOpenImageFromURL, [this, w]), false);
+                    w.addListener("close", Ext.bind(function (cnt, eOpts) {
+                        this.fireEvent("editcomplete", this);
+                    },
+                    this));
+                    w.show();
+                },
+                scope: this
+            }
+        });
+        this._SizePanel = Ext.create("Ext.container.Container", {
+            layout: "vbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            height: 88,
+            width: 195,
+            items: [{
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "table",
+                    columns: 2
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    height: 43,
+                    style: "float:left;"
+                },
+                items: [{
+                    items: [{
+                        xtype: "label",
+                        text: this.textWidth,
+                        width: 78
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    {
+                        xtype: "container",
+                        width: 108,
+                        layout: {
+                            type: "hbox"
+                        },
+                        items: [this._spnWidth, this._btnRatio, {
+                            xtype: "tbspacer",
+                            width: 4
+                        }]
+                    }]
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.textHeight,
+                        width: 78
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this._spnHeight]
+                }]
+            },
+            {
+                xtype: "tbspacer",
+                height: 7
+            },
+            this._btnOriginalSize, {
+                xtype: "tbspacer",
+                height: 3
+            }]
+        });
+        this._UrlPanel = Ext.create("Ext.container.Container", {
+            layout: "vbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            height: 36,
+            width: 195,
+            items: [{
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;"
+                    }
+                },
+                items: [this._btnInsertFromFile, this._btnInsertFromUrl]
+            },
+            {
+                xtype: "tbspacer",
+                height: 2
+            }]
+        });
+        this.items = [{
+            xtype: "tbspacer",
+            height: 9
+        },
+        {
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.textSize
+        },
+        this._SizePanel, {
+            xtype: "tbspacer",
+            height: 5
+        },
+        {
+            xtype: "tbspacer",
+            width: "100%",
+            height: 10,
+            style: "padding-right: 10px;",
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.textInsert
+        },
+        this._UrlPanel];
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    setOriginalSize: function () {
+        if (this.api) {
+            var imgsize = this.api.asc_getOriginalImageSize();
+            if (imgsize) {
+                var w = imgsize.asc_getImageWidth();
+                var h = imgsize.asc_getImageHeight();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putWidth(w);
+                properties.asc_putHeight(h);
+                this.api.asc_setGraphicObjectProps(properties);
+            }
+            this.fireEvent("editcomplete", this);
+        }
+    },
+    setApi: function (api) {
+        if (api == undefined) {
+            return;
+        }
+        this.api = api;
+    },
+    ChangeSettings: function (props) {
+        if (this._initSettings) {
+            this.createDelayedElements();
+            this._initSettings = false;
+        }
+        if (props) {
+            this.SuspendEvents();
+            var value = props.asc_getWidth();
+            if (Math.abs(this._state.Width - value) > 0.001 || (this._state.Width === null || value === null) && (this._state.Width !== value)) {
+                this._spnWidth.setValue((value !== null) ? Common.MetricSettings.fnRecalcFromMM(value) : "");
+                this._state.Width = value;
+            }
+            value = props.asc_getHeight();
+            if (Math.abs(this._state.Height - value) > 0.001 || (this._state.Height === null || value === null) && (this._state.Height !== value)) {
+                this._spnHeight.setValue((value !== null) ? Common.MetricSettings.fnRecalcFromMM(value) : "");
+                this._state.Height = value;
+            }
+            this.ResumeEvents();
+            if (props.asc_getHeight() > 0) {
+                this._nRatio = props.asc_getWidth() / props.asc_getHeight();
+            }
+            this._btnOriginalSize.setDisabled(props.asc_getImageUrl() === null || props.asc_getImageUrl() === undefined);
+        }
+    },
+    _onOpenImageFromURL: function (mr) {
+        var self = this[0];
+        var url = this[1].txtUrl;
+        if (mr == 1 && self.api) {
+            var checkurl = url.value.replace(/ /g, "");
+            if (checkurl != "") {
+                var props = new Asc.asc_CImgProperty();
+                props.asc_putImageUrl(url.value);
+                self.api.asc_setGraphicObjectProps(props);
+            }
+        }
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+            }
+        }
+    },
+    createDelayedElements: function () {
+        this.updateMetricUnit();
+    },
+    textKeepRatio: "Constant Proportions",
+    textSize: "Size",
+    textWidth: "Width",
+    textHeight: "Height",
+    textOriginalSize: "Default Size",
+    textUrl: "Image URL",
+    textInsert: "Change Image",
+    textFromUrl: "From URL",
+    textFromFile: "From File",
+    txtTitle: "Picture"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/MainMenu.js

@@ -0,0 +1,358 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ var SCALE_MIN = 40;
+var SCALE_FULL = "100%";
+var SCALE_PART = 300;
+var MAINMENU_TOOLBAR_ID = "mainmenu-toolbar-id";
+var MAINMENU_PANEL_ID = "mainmenu-panel-id";
+var MAINMENU_FULL_PANEL_ID = "mainmenu-full-panel-id";
+Ext.define("SSE.view.MainMenu", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.ssemainmenu",
+    requires: ["Ext.toolbar.Toolbar", "Ext.button.Button", "Ext.container.Container", "Ext.toolbar.Spacer"],
+    cls: "lm-style",
+    id: MAINMENU_PANEL_ID,
+    bodyCls: "lm-body",
+    width: SCALE_MIN,
+    layout: "card",
+    currentFullScaleMenuBtn: undefined,
+    fullScaledItemCnt: undefined,
+    buttonCollection: [],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    listeners: {
+        afterrender: function () {
+            var owner = this.ownerCt;
+            if (Ext.isDefined(owner)) {
+                owner.addListener("resize", Ext.bind(this.resizeMenu, this));
+            }
+        }
+    },
+    initComponent: function () {
+        this.items = [];
+        this.dockedItems = this.buildDockedItems();
+        this.addEvents("panelshow", "panelhide");
+        this.callParent(arguments);
+    },
+    buildDockedItems: function () {
+        var addedButtons = [],
+        item,
+        cardId,
+        config;
+        var me = this;
+        for (var i = 0; i < this.buttonCollection.length; i++) {
+            item = this.buttonCollection[i];
+            cardId = -1;
+            config = {
+                xtype: "button",
+                id: item.id,
+                itemScale: item.scale,
+                tooltip: item.tooltip,
+                disabled: item.disabled === true,
+                cls: "asc-main-menu-buttons",
+                iconCls: "asc-main-menu-btn " + item.cls,
+                style: "margin-bottom: 8px;"
+            };
+            if (item.scale == "modal") {
+                config.enableToggle = true;
+                config.listeners = item.listeners;
+                config.getApi = function () {
+                    return me.api;
+                };
+            } else {
+                config.isFullScale = item.scale == "full";
+                config.bodyItems = item.items;
+                config.toggleGroup = "tbMainMenu";
+                config.listeners = {
+                    click: function (btnCall) {
+                        if (btnCall.pressed) {
+                            me.openButtonMenu(btnCall);
+                        }
+                    },
+                    toggle: function (btnCall, pressed) {
+                        btnCall[pressed ? "addCls" : "removeCls"]("asc-main-menu-btn-selected");
+                        if (!pressed) {
+                            me.fireEvent("panelbeforehide");
+                            if (btnCall.isFullScale) {
+                                if (Ext.isDefined(me.fullScaledItemCnt) && me.fullScaledItemCnt.isVisible()) {
+                                    me.fullScaledItemCnt.hide();
+                                    me.currentFullScaleMenuBtn = undefined;
+                                }
+                                var panel = me.fullScaledItemCnt;
+                            } else {
+                                window.localStorage.setItem("sse-mainmenu-width", me.getWidth());
+                                panel = Ext.getCmp(btnCall.bodyCardId);
+                                me.setWidth(SCALE_MIN);
+                            }
+                            me.fireEvent("panelhide", panel, btnCall.isFullScale);
+                        }
+                    }
+                };
+            }
+            addedButtons.push(config);
+        }
+        this.mainToolbar = Ext.create("Ext.toolbar.Toolbar", {
+            cls: "lm-default-toolbar",
+            width: this.width || SCALE_MIN,
+            vertical: true,
+            dock: "left",
+            defaultType: "button",
+            items: addedButtons,
+            style: "padding-top:15px;",
+            listeners: {
+                afterrender: function (cmp) {
+                    cmp.getEl().on("keydown", me._onMenuKeyDown, me, {
+                        button: undefined
+                    });
+                }
+            }
+        });
+        return this.mainToolbar;
+    },
+    closeFullScaleMenu: function () {
+        if (Ext.isDefined(this.currentFullScaleMenuBtn)) {
+            this.currentFullScaleMenuBtn.toggle(false);
+        }
+    },
+    openButtonMenu: function (btn) {
+        this.fireEvent("panelbeforeshow", btn.isFullScale);
+        if (Ext.isNumber(btn.itemScale)) {
+            var saved_width = window.localStorage.getItem("sse-mainmenu-width");
+            saved_width = saved_width ? parseInt(saved_width) : btn.itemScale;
+            this.setSize({
+                width: saved_width
+            });
+        } else {
+            this.setWidth(btn.isFullScale ? SCALE_MIN : SCALE_PART);
+        }
+        if (btn.isFullScale) {
+            var ownerEl = this.ownerCt.el;
+            var startPos = ownerEl.getXY();
+            var panel = this.fullScaledItemCnt;
+            this.currentFullScaleMenuBtn = btn;
+            this.fullScaledItemCnt.setSize(ownerEl.getWidth() - SCALE_MIN, ownerEl.getHeight());
+            this.fullScaledItemCnt.setPosition(startPos[0] + this.width, startPos[1]);
+            this.fullScaledItemCnt.show();
+            this.fullScaledItemCnt.getLayout().setActiveItem(Ext.getCmp(btn.bodyCardId));
+        } else {
+            panel = Ext.getCmp(btn.bodyCardId);
+            this.getLayout().setActiveItem(btn.bodyCardId);
+        }
+        btn.removeCls("notify");
+        this.fireEvent("panelshow", panel, btn.isFullScale);
+        this.doComponentLayout();
+        Common.component.Analytics.trackEvent("Main Menu", btn.tooltip);
+    },
+    resizeMenu: function (Component, adjWidth, adjHeight, eOpts) {
+        if (Ext.isDefined(this.fullScaledItemCnt) && this.fullScaledItemCnt.isVisible()) {
+            var ownerEl = this.ownerCt.el;
+            var startPos = ownerEl.getXY();
+            this.fullScaledItemCnt.setSize(adjWidth - SCALE_MIN, adjHeight);
+            this.fullScaledItemCnt.setPosition(startPos[0] + this.width, startPos[1]);
+        } else {
+            for (var i = 0; i < this.items.length; i++) {
+                var h = this.items.items[i].getHeight();
+                if (adjHeight != h) {
+                    this.items.items[i].setHeight(adjHeight);
+                }
+            }
+        }
+        this.doComponentLayout();
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onCoAuthoringChatReceiveMessage", Ext.bind(this.onCoAuthoringChatReceiveMessage, this));
+        this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(this.onCoAuthoringDisconnect, this));
+        this.api.asc_registerCallback("asc_onGetLicense", Ext.bind(this.onGetLicense, this));
+        return this;
+    },
+    selectMenu: function (clsname) {
+        var btnCall, btn, i, panel;
+        var tbMain = this.mainToolbar;
+        for (i = tbMain.items.length; i > 0; i--) {
+            btnCall = tbMain.items.items[i - 1];
+            if (btnCall.iconCls && !(btnCall.iconCls.search(clsname) < 0)) {
+                break;
+            } else {
+                btnCall = undefined;
+            }
+        }
+        if (btnCall && !btnCall.pressed) {
+            if (Ext.isDefined(tbMain)) {
+                for (i = 0; i < tbMain.items.length; i++) {
+                    btn = tbMain.items.items[i];
+                    if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                        if (btn.id != btnCall.id && btn.pressed) {
+                            btn.toggle(false);
+                        }
+                    }
+                }
+            }
+            btnCall.toggle(true);
+            if (btnCall.itemScale != "modal") {
+                this.openButtonMenu(btnCall);
+            }
+        }
+    },
+    clearSelection: function (exclude) {
+        var btn, i;
+        var tbMain = this.mainToolbar;
+        if (Ext.isDefined(tbMain)) {
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                    if (btn.pressed) {
+                        if (exclude) {
+                            if (typeof exclude == "object") {
+                                if (exclude.id == btn.id) {
+                                    continue;
+                                }
+                            } else {
+                                if (btn.iconCls && !(btn.iconCls.search(exclude) < 0)) {
+                                    continue;
+                                }
+                            }
+                        }
+                        btn.toggle(false);
+                    }
+                }
+            }
+        }
+    },
+    disableMenu: function (btns, disabled) {
+        var btn, i;
+        var tbMain = this.mainToolbar;
+        if (Ext.isDefined(tbMain)) {
+            var apply_all = false;
+            typeof btns == "string" && (btns == "all" ? apply_all = true : btns = [btns]);
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                    if (apply_all || !(btns.indexOf(btn.id) < 0)) {
+                        btn.pressed && btn.toggle(false);
+                        btn.setDisabled(disabled);
+                    }
+                }
+            }
+        }
+    },
+    onCoAuthoringChatReceiveMessage: function (messages) {
+        var mainMenu = Ext.getCmp("view-main-menu");
+        if (mainMenu) {
+            var activeStep;
+            mainMenu.getLayout().getActiveItem() && (activeStep = mainMenu.getLayout().getActiveItem().down("container"));
+            var btnChat = Ext.getCmp("id-menu-chat");
+            if (btnChat) {
+                if (!activeStep || !activeStep.isXType("commonchatpanel") || activeStep.getWidth() < 1) {
+                    btnChat.addCls("notify");
+                }
+            }
+        }
+    },
+    onCoAuthoringDisconnect: function () {
+        this.disableMenu(["id-menu-comments", "id-menu-chat"], true);
+    },
+    onGetLicense: function (license) {
+        var panel = Ext.getCmp("main-menu-about");
+        if (panel) {
+            panel.setLicInfo(license);
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        this.hkEsc = new Ext.util.KeyMap(document, [{
+            key: Ext.EventObject.ESC,
+            fn: function (key, e) {
+                if (Ext.isDefined(me.currentFullScaleMenuBtn)) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    me.currentFullScaleMenuBtn.toggle(false);
+                }
+            }
+        }]);
+        var addedItems = [],
+        addedButtons = this.mainToolbar.items.items,
+        item;
+        for (var i = 0; i < this.buttonCollection.length; i++) {
+            item = this.buttonCollection[i];
+            if (item.scale == "modal") {} else {
+                if (item.scale != "full") {
+                    var cardPanel = Ext.create("Ext.container.Container", {
+                        items: item.items,
+                        menubutton: addedButtons[i],
+                        listeners: {
+                            afterrender: function (cmp) {
+                                cmp.getEl().on("keydown", me._onMenuKeyDown, me, {
+                                    button: cmp.menubutton
+                                });
+                            }
+                        }
+                    });
+                    addedButtons[i].bodyCardId = cardPanel.getId();
+                    addedItems.push(cardPanel);
+                } else {
+                    if (this.fullScaledItemCnt === undefined) {
+                        this.fullScaledItemCnt = Ext.create("Ext.container.Container", {
+                            id: MAINMENU_FULL_PANEL_ID,
+                            layout: "card",
+                            shadow: false,
+                            floating: true,
+                            toFrontOnShow: true,
+                            closeMenu: function () {
+                                me.closeFullScaleMenu();
+                            },
+                            getApi: function () {
+                                return me.api;
+                            }
+                        });
+                    }
+                    addedButtons[i].bodyCardId = item.items[0].id;
+                    this.fullScaledItemCnt.add(item.items);
+                }
+            }
+        }
+        me.api.asc_getLicense();
+        this.add(addedItems);
+    },
+    _onMenuKeyDown: function (event, target, opt) {
+        if (event.getKey() == event.ESC) {
+            if (opt.button) {
+                opt.button.toggle(false);
+            } else {
+                this.clearSelection();
+            }
+        }
+    }
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/MainSettingsGeneral.js

@@ -0,0 +1,353 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.MainSettingsGeneral", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssemainsettingsgeneral",
+    cls: "sse-documentsettings-body",
+    requires: ["Ext.button.Button", "Ext.container.Container", "Ext.form.Label", "Ext.form.field.Checkbox", "Ext.util.Cookies"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this._changedProps = {
+            zoomIdx: 5,
+            showchangesIdx: 1,
+            fontrenderIdx: 0,
+            unitIdx: 0,
+            saveVal: 600
+        };
+        this._oldUnit = undefined;
+        this.chLiveComment = Ext.create("Ext.form.field.Checkbox", {
+            id: "docsettings-live-comment",
+            checked: true,
+            boxLabel: this.strLiveComment,
+            width: 500
+        });
+        this._arrZoom = [[50, "50%"], [60, "60%"], [70, "70%"], [80, "80%"], [90, "90%"], [100, "100%"], [110, "110%"], [120, "120%"], [150, "150%"], [175, "175%"], [200, "200%"]];
+        this.cmbZoom = Ext.create("Ext.form.field.ComboBox", {
+            width: 90,
+            editable: false,
+            store: this._arrZoom,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrZoom[5][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.zoomIdx = records[0].index;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this._arrFontRender = [[c_oAscFontRenderingModeType.hintingAndSubpixeling, this.txtWin], [c_oAscFontRenderingModeType.noHinting, this.txtMac], [c_oAscFontRenderingModeType.hinting, this.txtNative]];
+        this.cmbFontRender = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-font-render",
+            width: 150,
+            editable: false,
+            store: this._arrFontRender,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrFontRender[0][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.fontrenderIdx = records[0].index;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this._arrUnit = [[Common.MetricSettings.c_MetricUnits.cm, this.txtCm], [Common.MetricSettings.c_MetricUnits.pt, this.txtPt]];
+        this.cmbUnit = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-combo-unit",
+            width: 150,
+            editable: false,
+            store: this._arrUnit,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrUnit[0][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.unitIdx = records[0].index;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this._arrAutoSave = [[0, this.textDisabled], [60, this.textMinute], [300, this.text5Minutes], [600, this.text10Minutes], [1800, this.text30Minutes], [3600, this.text60Minutes]];
+        this.cmbAutoSave = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-combo-save",
+            width: 150,
+            editable: false,
+            store: this._arrAutoSave,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrAutoSave[3][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.saveVal = records[0].data.field1;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this.btnOk = Ext.widget("button", {
+            cls: "asc-blue-button",
+            width: 90,
+            height: 22,
+            text: this.okButtonText,
+            listeners: {
+                click: function (btn) {
+                    this.applySettings();
+                },
+                scope: this
+            }
+        });
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 2,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    style: "padding: 5px 10px;"
+                }
+            },
+            height: "100%",
+            items: [{
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtLiveComment,
+                style: "display: block;text-align: right; margin-bottom: 1px;",
+                width: "100%",
+                hideId: "element-coauthoring"
+            },
+            this.chLiveComment, {
+                xtype: "tbspacer",
+                hideId: "element-coauthoring"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.strZoom,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%"
+            },
+            this.cmbZoom, {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.strFontRender,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%"
+            },
+            this.cmbFontRender, {
+                xtype: "tbspacer",
+                hideId: "element-edit-mode"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.textAutoSave,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%",
+                hideId: "element-autosave"
+            },
+            this.cmbAutoSave, {
+                xtype: "tbspacer",
+                hideId: "element-autosave"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.strUnit,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%",
+                hideId: "element-edit-mode"
+            },
+            this.cmbUnit, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "tbspacer"
+            },
+            this.btnOk]
+        }];
+        this.addEvents("savedocsettings");
+        this.addEvents("changemeasureunit");
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        this.api = o;
+    },
+    applySettings: function () {
+        window.localStorage.setItem("sse-settings-livecomment", this.chLiveComment.getValue() ? 1 : 0);
+        window.localStorage.setItem("sse-settings-zoom", this._arrZoom[this._changedProps.zoomIdx][0]);
+        window.localStorage.setItem("sse-settings-fontrender", this._arrFontRender[this._changedProps.fontrenderIdx][0]);
+        window.localStorage.setItem("sse-settings-unit", this._arrUnit[this._changedProps.unitIdx][0]);
+        window.localStorage.setItem("sse-settings-autosave", this._changedProps.saveVal);
+        Common.component.Analytics.trackEvent("File Menu", "SaveSettings");
+        this.fireEvent("savedocsettings", this);
+        if (this._oldUnit !== this._arrUnit[this._changedProps.unitIdx][0]) {
+            this.fireEvent("changemeasureunit", this);
+        }
+    },
+    updateSettings: function () {
+        value = window.localStorage.getItem("sse-settings-livecomment");
+        this.chLiveComment.setValue(!(value !== null && parseInt(value) == 0));
+        var value = window.localStorage.getItem("sse-settings-zoom");
+        this._changedProps.zoomIdx = 5;
+        if (value !== null) {
+            for (var i = 0; i < this._arrZoom.length; i++) {
+                if (this._arrZoom[i][0] == parseInt(value)) {
+                    this._changedProps.zoomIdx = i;
+                    break;
+                }
+            }
+        }
+        this.cmbZoom.setValue(this._arrZoom[this._changedProps.zoomIdx][1]);
+        value = window.localStorage.getItem("sse-settings-fontrender");
+        if (value !== null) {
+            value = parseInt(value);
+        } else {
+            value = window.devicePixelRatio > 1 ? c_oAscFontRenderingModeType.noHinting : c_oAscFontRenderingModeType.hintingAndSubpixeling;
+        }
+        for (i = 0; i < this._arrFontRender.length; i++) {
+            if (this._arrFontRender[i][0] == value) {
+                this._changedProps.fontrenderIdx = i;
+                break;
+            }
+        }
+        this.cmbFontRender.setValue(this._arrFontRender[this._changedProps.fontrenderIdx][1]);
+        value = window.localStorage.getItem("sse-settings-unit");
+        this._changedProps.unitIdx = 0;
+        if (value !== null) {
+            for (i = 0; i < this._arrUnit.length; i++) {
+                if (this._arrUnit[i][0] == parseInt(value)) {
+                    this._changedProps.unitIdx = i;
+                    break;
+                }
+            }
+        }
+        this.cmbUnit.setValue(this._arrUnit[this._changedProps.unitIdx][1]);
+        this._oldUnit = this._arrUnit[this._changedProps.unitIdx][0];
+        value = window.localStorage.getItem("sse-settings-autosave");
+        value = (value !== null) ? parseInt(value) : 600;
+        this._changedProps.saveVal = 600;
+        var idx = 3;
+        for (i = 0; i < this._arrAutoSave.length; i++) {
+            if (this._arrAutoSave[i][0] == value) {
+                this._changedProps.saveVal = value;
+                idx = i;
+                break;
+            }
+        }
+        this.cmbAutoSave.setValue(this._arrAutoSave[idx][1]);
+        this._ShowHideDocSettings("element-autosave", this.mode.isEdit && (this.mode.canAutosave > -1));
+    },
+    _ShowHideSettingsItem: function (cmp, visible) {
+        var tr = cmp.getEl().up("tr");
+        if (tr) {
+            tr.setDisplayed(visible);
+        }
+    },
+    _ShowHideDocSettings: function (id, visible) {
+        if (!this.rendered) {
+            return;
+        }
+        var components = Ext.ComponentQuery.query('[hideId="' + id + '"]', this);
+        for (var i = 0; i < components.length; i++) {
+            this._ShowHideSettingsItem(components[i], visible);
+        }
+    },
+    setMode: function (mode) {
+        this.mode = mode;
+        if (this.mode.canAutosave > -1) {
+            var idx = 0;
+            for (idx = 1; idx < this._arrAutoSave.length; idx++) {
+                if (this.mode.canAutosave < this._arrAutoSave[idx][0]) {
+                    break;
+                }
+            }
+        }
+        var arr = [];
+        arr = this._arrAutoSave.slice(idx, this._arrAutoSave.length);
+        arr.unshift(this._arrAutoSave[0]);
+        if (arr.length > 0) {
+            this.cmbAutoSave.getStore().loadData(arr);
+        }
+    },
+    strLiveComment: "Turn on live commenting option",
+    txtLiveComment: "Live Commenting",
+    strInputMode: "Turn on hieroglyphs",
+    strZoom: "Default Zoom Value",
+    strShowChanges: "Realtime Collaboration Changes",
+    txtAll: "View All",
+    txtLast: "View Last",
+    okButtonText: "Apply",
+    txtWin: "as Windows",
+    txtMac: "as OS X",
+    txtNative: "Native",
+    strFontRender: "Font Hinting",
+    strUnit: "Unit of Measurement",
+    txtCm: "Centimeter",
+    txtPt: "Point",
+    textDisabled: "Disabled",
+    textMinute: "Every Minute",
+    text5Minutes: "Every 5 Minutes",
+    text10Minutes: "Every 10 Minutes",
+    text30Minutes: "Every 30 Minutes",
+    text60Minutes: "Every Hour",
+    textAutoSave: "Autosave"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/MainSettingsPrint.js

@@ -0,0 +1,366 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.MainSettingsPrint", {
+    extend: "Ext.container.Container",
+    alias: "widget.ssemainsettingsprint",
+    cls: "sse-documentsettings-body",
+    requires: ["Ext.button.Button", "Ext.container.Container", "Ext.form.Label", "Common.component.IndeterminateCheckBox"],
+    listeners: {
+        show: function (cmp, eOpts) {}
+    },
+    height: "100%",
+    initComponent: function () {
+        var me = this;
+        this.cmbSheet = Ext.create("Ext.form.field.ComboBox", {
+            id: "advsettings-print-combo-sheets",
+            width: 260,
+            editable: false,
+            store: Ext.create("Ext.data.Store", {
+                fields: ["sheetname", {
+                    type: "int",
+                    name: "sheetindex"
+                }],
+                data: [{
+                    sheetname: me.strAllSheets,
+                    sheetindex: -255
+                }]
+            }),
+            queryMode: "local",
+            displayField: "sheetname",
+            valueField: "sheetindex",
+            triggerAction: "all"
+        });
+        this.cmbPaperSize = Ext.widget("combo", {
+            width: 260,
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "size"],
+                data: [{
+                    size: "215.9|279.4",
+                    description: "US Letter (21,59cm x 27,94cm)"
+                },
+                {
+                    size: "215.9|355.6",
+                    description: "US Legal (21,59cm x 35,56cm)"
+                },
+                {
+                    size: "210|297",
+                    description: "A4 (21cm x 29,7cm)"
+                },
+                {
+                    size: "148.1|209.9",
+                    description: "A5 (14,81cm x 20,99cm)"
+                },
+                {
+                    size: "176|250.1",
+                    description: "B5 (17,6cm x 25,01cm)"
+                },
+                {
+                    size: "104.8|241.3",
+                    description: "Envelope #10 (10,48cm x 24,13cm)"
+                },
+                {
+                    size: "110.1|220.1",
+                    description: "Envelope DL (11,01cm x 22,01cm)"
+                },
+                {
+                    size: "279.4|431.7",
+                    description: "Tabloid (27,94cm x 43,17cm)"
+                },
+                {
+                    size: "297|420.1",
+                    description: "A3 (29,7cm x 42,01cm)"
+                },
+                {
+                    size: "304.8|457.1",
+                    description: "Tabloid Oversize (30,48cm x 45,71cm)"
+                },
+                {
+                    size: "196.8|273",
+                    description: "ROC 16K (19,68cm x 27,3cm)"
+                },
+                {
+                    size: "119.9|234.9",
+                    description: "Envelope Choukei 3 (11,99cm x 23,49cm)"
+                },
+                {
+                    size: "330.2|482.5",
+                    description: "Super B/A3 (33,02cm x 48,25cm)"
+                }]
+            }),
+            displayField: "description",
+            valueField: "size",
+            queryMode: "local",
+            editable: false
+        });
+        this.cmbPaperOrientation = Ext.widget("combo", {
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "orient"],
+                data: [{
+                    description: me.strPortrait,
+                    orient: c_oAscPageOrientation.PagePortrait
+                },
+                {
+                    description: me.strLandscape,
+                    orient: c_oAscPageOrientation.PageLandscape
+                }]
+            }),
+            displayField: "description",
+            valueField: "orient",
+            queryMode: "local",
+            editable: false,
+            width: 200
+        });
+        this.chPrintGrid = Ext.widget("cmdindeterminatecheckbox", {
+            boxLabel: this.textPrintGrid,
+            width: 500
+        });
+        this.chPrintRows = Ext.widget("cmdindeterminatecheckbox", {
+            boxLabel: this.textPrintHeadings,
+            width: 500
+        });
+        this.spnMarginLeft = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            listeners: {}
+        });
+        this.spnMarginRight = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            listeners: {}
+        });
+        this.spnMarginTop = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            listeners: {}
+        });
+        this.spnMarginBottom = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            listeners: {}
+        });
+        this.btnOk = Ext.widget("button", {
+            id: "advsettings-print-button-save",
+            cls: "asc-blue-button",
+            width: 90,
+            height: 22,
+            text: this.okButtonText
+        });
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 2,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    style: "padding: 10px 10px;"
+                }
+            },
+            items: [{
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: me.textSettings,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%"
+            },
+            this.cmbSheet, {
+                xtype: "tbspacer",
+                height: 5
+            },
+            {
+                xtype: "tbspacer",
+                height: 5
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: me.textPageSize,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%"
+            },
+            this.cmbPaperSize, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: me.textPageOrientation,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%"
+            },
+            this.cmbPaperOrientation, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell label-align-top",
+                text: me.strMargins,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.cntMargins = Ext.widget("container", {
+                height: 100,
+                width: 200,
+                layout: {
+                    type: "hbox"
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    height: 100
+                },
+                items: [{
+                    flex: 1,
+                    items: [{
+                        xtype: "label",
+                        width: "100%",
+                        text: me.strTop
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.spnMarginTop, {
+                        xtype: "tbspacer",
+                        height: 12
+                    },
+                    {
+                        xtype: "label",
+                        width: "100%",
+                        text: me.strLeft
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.spnMarginLeft]
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 20
+                },
+                {
+                    flex: 1,
+                    items: [{
+                        xtype: "label",
+                        text: me.strBottom,
+                        width: "100%"
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.spnMarginBottom, {
+                        xtype: "tbspacer",
+                        height: 12
+                    },
+                    {
+                        xtype: "label",
+                        text: me.strRight,
+                        width: "100%"
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.spnMarginRight]
+                }]
+            }), {
+                xtype: "label",
+                cellCls: "doc-info-label-cell label-align-top",
+                text: me.strPrint,
+                style: "display: block;text-align: right; margin-top: 4px;",
+                width: "100%"
+            },
+            this.cntAdditional = Ext.widget("container", {
+                height: 45,
+                width: 500,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [this.chPrintGrid, this.chPrintRows]
+            }), {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            this.btnOk]
+        }];
+        this.addEvents("savedocsettings");
+        this.callParent(arguments);
+    },
+    applySettings: function () {},
+    setMode: function (mode) {},
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+            }
+        }
+    },
+    okButtonText: "Save",
+    strPortrait: "Portrait",
+    strLandscape: "Landscape",
+    textPrintGrid: "Print Gridlines",
+    textPrintHeadings: "Print Rows and Columns Headings",
+    strLeft: "Left",
+    strRight: "Right",
+    strTop: "Top",
+    strBottom: "Bottom",
+    strMargins: "Margins",
+    textPageSize: "Page Size",
+    textPageOrientation: "Page Orientation",
+    strPrint: "Print",
+    textSettings: "Settings for"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/OpenDialog.js

@@ -0,0 +1,274 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.OpenDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.sseopendialog",
+    requires: ["Ext.window.Window", "Common.plugin.ComboBoxScrollPane"],
+    modal: true,
+    closable: false,
+    resizable: false,
+    height: 218,
+    width: 250,
+    padding: "15px 0 0 0",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    cls: "csv-open-dialog",
+    initComponent: function () {
+        this.title = this.title || this.txtTitle;
+        var encodedata = [];
+        if (this.codepages) {
+            encodedata = [];
+            for (var i = 0; i < this.codepages.length; i++) {
+                var codepage = this.codepages[i];
+                var c = [];
+                c[0] = codepage.asc_getCodePage();
+                c[1] = codepage.asc_getCodePageName();
+                encodedata.push(c);
+            }
+        } else {
+            encodedata = [[37, "IBM EBCDIC (US-Canada)"], [437, "OEM United States"], [500, "IBM EBCDIC (International)"], [708, "Arabic (ASMO 708)"], [720, "Arabic (DOS)"], [737, "Greek (DOS)"], [775, "Baltic (DOS)"], [850, "Western European (DOS)"], [852, "Central European (DOS)"], [855, "OEM Cyrillic"], [857, "Turkish (DOS)"], [858, "OEM Multilingual Latin I"], [860, "Portuguese (DOS)"], [861, "Icelandic (DOS)"], [862, "Hebrew (DOS)"], [863, "French Canadian (DOS)"], [864, "Arabic (864) "], [865, "Nordic (DOS)"], [866, "Cyrillic (DOS)"], [869, "Greek, Modern (DOS)"], [870, "IBM EBCDIC (Multilingual Latin-2)"], [874, "Thai (Windows)"], [875, "IBM EBCDIC (Greek Modern)"], [932, "Japanese (Shift-JIS)"], [936, "Chinese Simplified (GB2312)"], [949, "Korean"], [950, "Chinese Traditional (Big5)"], [1026, "IBM EBCDIC (Turkish Latin-5)"], [1047, "IBM Latin-1"], [1140, "IBM EBCDIC (US-Canada-Euro)"], [1141, "IBM EBCDIC (Germany-Euro)"], [1142, "IBM EBCDIC (Denmark-Norway-Euro)"], [1143, "IBM EBCDIC (Finland-Sweden-Euro)"], [1144, "IBM EBCDIC (Italy-Euro)"], [1145, "IBM EBCDIC (Spain-Euro)"], [1146, "IBM EBCDIC (UK-Euro)"], [1147, "IBM EBCDIC (France-Euro)"], [1148, "IBM EBCDIC (International-Euro)"], [1149, "IBM EBCDIC (Icelandic-Euro)"], [1200, "Unicode"], [1201, "Unicode (Big-Endian)"], [1250, "Central European (Windows)"], [1251, "Cyrillic (Windows)"], [1252, "Western European (Windows)"], [1253, "Greek (Windows)"], [1254, "Turkish (Windows)"], [1255, "Hebrew (Windows) "], [1256, "Arabic (Windows) "], [1257, "Baltic (Windows)"], [1258, "Vietnamese (Windows)"], [1361, "Korean (Johab)"], [10000, "Western European (Mac)"], [10001, "Japanese (Mac)"], [10002, "Chinese Traditional (Mac)"], [10003, "Korean (Mac)"], [10004, "Arabic (Mac) "], [10005, "Hebrew (Mac)"], [10006, "Greek (Mac) "], [10007, "Cyrillic (Mac)"], [10008, "Chinese Simplified (Mac)"], [10010, "Romanian (Mac)"], [10017, "Ukrainian (Mac)"], [10021, "Thai (Mac)"], [10029, "Central European (Mac) "], [10079, "Icelandic (Mac)"], [10081, "Turkish (Mac)"], [10082, "Croatian (Mac)"], [12000, "Unicode (UTF-32)"], [12001, "Unicode (UTF-32 Big-Endian)"], [20000, "Chinese Traditional (CNS)"], [20001, "TCA Taiwan"], [20002, "Chinese Traditional (Eten)"], [20003, "IBM5550 Taiwan"], [20004, "TeleText Taiwan"], [20005, "Wang Taiwan"], [20105, "Western European (IA5)"], [20106, "German (IA5)"], [20107, "Swedish (IA5) "], [20108, "Norwegian (IA5) "], [20127, "US-ASCII"], [20261, "T.61 "], [20269, "ISO-6937"], [20273, "IBM EBCDIC (Germany)"], [20277, "IBM EBCDIC (Denmark-Norway) "], [20278, "IBM EBCDIC (Finland-Sweden)"], [20280, "IBM EBCDIC (Italy)"], [20284, "IBM EBCDIC (Spain)"], [20285, "IBM EBCDIC (UK)"], [20290, "IBM EBCDIC (Japanese katakana)"], [20297, "IBM EBCDIC (France)"], [20420, "IBM EBCDIC (Arabic)"], [20423, "IBM EBCDIC (Greek)"], [20424, "IBM EBCDIC (Hebrew)"], [20833, "IBM EBCDIC (Korean Extended)"], [20838, "IBM EBCDIC (Thai)"], [20866, "Cyrillic (KOI8-R)"], [20871, "IBM EBCDIC (Icelandic) "], [20880, "IBM EBCDIC (Cyrillic Russian)"], [20905, "IBM EBCDIC (Turkish)"], [20924, "IBM Latin-1 "], [20932, "Japanese (JIS 0208-1990 and 0212-1990)"], [20936, "Chinese Simplified (GB2312-80) "], [20949, "Korean Wansung "], [21025, "IBM EBCDIC (Cyrillic Serbian-Bulgarian)"], [21866, "Cyrillic (KOI8-U)"], [28591, "Western European (ISO) "], [28592, "Central European (ISO)"], [28593, "Latin 3 (ISO)"], [28594, "Baltic (ISO)"], [28595, "Cyrillic (ISO) "], [28596, "Arabic (ISO)"], [28597, "Greek (ISO) "], [28598, "Hebrew (ISO-Visual)"], [28599, "Turkish (ISO)"], [28603, "Estonian (ISO)"], [28605, "Latin 9 (ISO)"], [29001, "Europa"], [38598, "Hebrew (ISO-Logical)"], [50220, "Japanese (JIS)"], [50221, "Japanese (JIS-Allow 1 byte Kana) "], [50222, "Japanese (JIS-Allow 1 byte Kana - SO/SI)"], [50225, "Korean (ISO)"], [50227, "Chinese Simplified (ISO-2022)"], [51932, "Japanese (EUC)"], [51936, "Chinese Simplified (EUC) "], [51949, "Korean (EUC)"], [52936, "Chinese Simplified (HZ)"], [54936, "Chinese Simplified (GB18030)"], [57002, "ISCII Devanagari "], [57003, "ISCII Bengali "], [57004, "ISCII Tamil"], [57005, "ISCII Telugu "], [57006, "ISCII Assamese "], [57007, "ISCII Oriya"], [57008, "ISCII Kannada"], [57009, "ISCII Malayalam "], [57010, "ISCII Gujarati"], [57011, "ISCII Punjabi"], [65000, "Unicode (UTF-7)"], [65001, "Unicode (UTF-8)"]];
+        }
+        var encodestore = Ext.create("Ext.data.ArrayStore", {
+            autoDestroy: true,
+            storeId: "encodeStore",
+            idIndex: 0,
+            fields: [{
+                name: "value",
+                type: "int"
+            },
+            {
+                name: "name",
+                type: "string"
+            }],
+            data: encodedata
+        });
+        this.cmbEncoding = Ext.create("Ext.form.field.ComboBox", {
+            store: encodestore,
+            displayField: "name",
+            queryMode: "local",
+            typeAhead: false,
+            editable: false,
+            listeners: {
+                keydown: this._handleKeyDown,
+                select: function (combo, records, eOpts) {
+                    this.encoding = records[0].data.value;
+                },
+                scope: this
+            },
+            enableKeyEvents: true,
+            plugins: [{
+                pluginId: "scrollpane",
+                ptype: "comboboxscrollpane",
+                settings: {
+                    enableKeyboardNavigation: true
+                }
+            }]
+        });
+        this.cmbEncoding.select(encodestore.getAt(0));
+        this.encoding = encodestore.getAt(0).data.value;
+        var delimiterstore = Ext.create("Ext.data.ArrayStore", {
+            autoDestroy: true,
+            storeId: "delimiterStore",
+            idIndex: 0,
+            fields: [{
+                name: "value",
+                type: "int"
+            },
+            {
+                name: "description",
+                type: "string"
+            }],
+            data: [[4, ","], [2, ";"], [3, ":"], [1, this.txtTab], [5, this.txtSpace]]
+        });
+        this.cmbDelimiter = Ext.create("Ext.form.field.ComboBox", {
+            width: 70,
+            store: delimiterstore,
+            displayField: "description",
+            queryMode: "local",
+            typeAhead: false,
+            editable: false,
+            listeners: {
+                select: function (combo, records, eOpts) {
+                    this.delimiter = records[0].data.value;
+                },
+                scope: this
+            }
+        });
+        this.cmbDelimiter.select(delimiterstore.getAt(0));
+        this.delimiter = delimiterstore.getAt(0).data.value;
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            padding: "0 20px 0 20px",
+            height: 46,
+            width: 210,
+            items: [{
+                xtype: "label",
+                text: this.txtEncoding,
+                style: "font-weight: bold;margin:0 0 4px 0;"
+            },
+            this.cmbEncoding]
+        },
+        {
+            xtype: "tbspacer",
+            height: 10
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "left"
+            },
+            padding: "0 20px 0 20px",
+            height: 46,
+            width: 210,
+            items: [{
+                xtype: "label",
+                text: this.txtDelimiter,
+                style: "font-weight: bold;margin:0 0 4px 0;"
+            },
+            this.cmbDelimiter]
+        },
+        {
+            xtype: "tbspacer",
+            height: 10
+        },
+        {
+            xtype: "tbspacer",
+            height: 8,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 86,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 1, {
+                                encoding: this.encoding,
+                                delimiter: this.delimiter
+                            });
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    setSettings: function (s) {
+        var index = this.cmbEncoding.getStore().find("value", s.asc_getCodePage ? s.asc_getCodePage() : s.encoding);
+        if (! (index < 0)) {
+            this.cmbEncoding.select(this.cmbEncoding.getStore().getAt(index));
+            this.encoding = s.asc_getCodePage();
+        }
+        index = this.cmbDelimiter.getStore().find("value", s.asc_getDelimiter ? s.asc_getDelimiter() : s.delimiter);
+        if (! (index < 0)) {
+            this.cmbDelimiter.select(this.cmbDelimiter.getStore().getAt(index));
+            this.delimiter = s.asc_getDelimiter();
+        }
+    },
+    scrollViewToNode: function (dataview, node) {
+        if (dataview && node) {
+            var plugin = dataview.getPlugin("scrollpane");
+            if (plugin) {
+                var doScroll = new Ext.util.DelayedTask(function () {
+                    plugin.scrollToElement(node, false, true);
+                });
+                doScroll.delay(100);
+            }
+        }
+    },
+    _handleKeyDown: function (combo, event) {
+        if (event.ctrlKey || event.altKey) {
+            return;
+        }
+        var charcode = String.fromCharCode(event.getCharCode());
+        if (/[A-Z0-9]/.test(charcode)) {
+            if ((new Date().getTime()) - combo.lastsearchtime > 3000) {
+                combo.lastsearchquery = "";
+            }
+            var str = combo.lastsearchquery + charcode;
+            var index = combo.getStore().find("name", str, combo.lastsearchindex);
+            if (index < 0) {
+                str = charcode;
+                index = combo.getStore().find("name", str, combo.lastsearchindex);
+                if (index < 0) {
+                    index = combo.getStore().find("name", str, 0);
+                }
+            }
+            combo.lastsearchtime = new Date().getTime();
+            if (! (index < 0)) {
+                var item = combo.getStore().getAt(index);
+                var node = combo.getPicker().getNode(item);
+                combo.select(item);
+                this.scrollViewToNode(combo, node);
+                combo.lastsearchquery = str;
+                combo.lastsearchindex = ++index < combo.getStore().getCount() ? index : 0;
+            } else {
+                combo.lastsearchquery = "";
+                combo.lastsearchindex = 0;
+            }
+        }
+    },
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtEncoding: "Encoding ",
+    txtDelimiter: "Delimiter",
+    txtTab: "Tab",
+    txtSpace: "Space",
+    txtTitle: "Choose CSV options"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/ParagraphSettings.js

@@ -0,0 +1,441 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ var c_paragraphLinerule = {
+    LINERULE_LEAST: 0,
+    LINERULE_AUTO: 1,
+    LINERULE_EXACT: 2
+};
+Ext.define("SSE.view.ParagraphSettings", {
+    extend: "Common.view.AbstractSettingsPanel",
+    alias: "widget.sseparagraphsettings",
+    height: 176,
+    requires: ["Ext.DomHelper", "Ext.button.Button", "Ext.form.Label", "Ext.container.Container", "Ext.toolbar.Spacer", "Common.component.MetricSpinner", "Ext.form.field.ComboBox", "SSE.view.ParagraphSettingsAdvanced"],
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onParaSpacingLine", Ext.bind(this._onLineSpacing, this));
+    },
+    initComponent: function () {
+        this.title = this.txtTitle;
+        this._initSettings = true;
+        this._state = {
+            LineRuleIdx: 1,
+            LineHeight: 1.5,
+            LineSpacingBefore: 0,
+            LineSpacingAfter: 0.35
+        };
+        this._arrLineRule = [this.textAtLeast, this.textAuto, this.textExact];
+        this._arrLineDefaults = [[5, "cm", 0.03, 0.01], [1, "", 0.5, 0.01], [5, "cm", 0.03, 0.01]];
+        this.cmbLineRule = Ext.create("Ext.form.field.ComboBox", {
+            id: "table-combo-line-rule",
+            width: 85,
+            editable: false,
+            store: this._arrLineRule,
+            mode: "local",
+            triggerAction: "all",
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    if (this.api) {
+                        this.api.asc_putPrLineSpacing(records[0].index, this._arrLineDefaults[records[0].index][0]);
+                    }
+                    this.numLineHeight.setDefaultUnit(this._arrLineDefaults[records[0].index][1]);
+                    this.numLineHeight.setMinValue(this._arrLineDefaults[records[0].index][2]);
+                    this.numLineHeight.setStep(this._arrLineDefaults[records[0].index][3]);
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.cmbLineRule.setValue(this._arrLineRule[1]);
+        this.controls.push(this.cmbLineRule);
+        this.numLineHeight = Ext.widget("commonmetricspinner", {
+            id: "paragraph-spin-line-height",
+            readOnly: false,
+            step: 0.01,
+            width: 85,
+            value: "1.5",
+            defaultUnit: "",
+            maxValue: 132,
+            minValue: 0,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this.cmbLineRule.getValue() == "") {
+                        return;
+                    }
+                    var type = c_paragraphLinerule.LINERULE_AUTO;
+                    for (var i = 0; i < this._arrLineRule.length; i++) {
+                        if (this.cmbLineRule.getValue() == this._arrLineRule[i]) {
+                            type = i;
+                            break;
+                        }
+                    }
+                    if (this.api) {
+                        this.api.asc_putPrLineSpacing(type, (type == c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this.numLineHeight);
+        this.numSpacingBefore = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraph-spin-spacing-before",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.88,
+            minValue: 0,
+            allowAuto: true,
+            autoText: this.txtAutoText,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this.api) {
+                        var num = field.getNumberValue();
+                        if (num < 0) {
+                            this.api.asc_putLineSpacingBeforeAfter(0, -1);
+                        } else {
+                            this.api.asc_putLineSpacingBeforeAfter(0, Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                        }
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this.numSpacingBefore);
+        this.numSpacingAfter = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraph-spin-spacing-after",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0.35 cm",
+            maxValue: 55.88,
+            minValue: 0,
+            allowAuto: true,
+            autoText: this.txtAutoText,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this.api) {
+                        var num = field.getNumberValue();
+                        if (num < 0) {
+                            this.api.asc_putLineSpacingBeforeAfter(1, -1);
+                        } else {
+                            this.api.asc_putLineSpacingBeforeAfter(1, Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                        }
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this.numSpacingAfter);
+        this._SpacingPanel = Ext.create("Ext.container.Container", {
+            layout: "vbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            height: 107,
+            width: 190,
+            items: [{
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                height: 41,
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;vertical-align: middle;"
+                    }
+                },
+                items: [{
+                    xtype: "label",
+                    text: this.strLineHeight,
+                    style: "display: block;",
+                    width: 85
+                },
+                {
+                    xtype: "label",
+                    text: this.textAt,
+                    style: "display: block;",
+                    width: 85
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 2
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 2
+                },
+                this.cmbLineRule, this.numLineHeight]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;"
+                    }
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    height: 48,
+                    style: "float:left;"
+                },
+                items: [{
+                    items: [{
+                        xtype: "label",
+                        text: this.strSpacingBefore,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numSpacingBefore]
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.strSpacingAfter,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numSpacingAfter]
+                }]
+            }]
+        });
+        this.items = [{
+            xtype: "tbspacer",
+            height: 9
+        },
+        {
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.strParagraphSpacing
+        },
+        this._SpacingPanel, {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "tbspacer",
+            width: "100%",
+            height: 10,
+            style: "padding-right: 10px;",
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "container",
+            height: 20,
+            width: "100%",
+            items: [{
+                xtype: "box",
+                html: '<div style="width:100%;text-align:center;padding-right:15px;"><label id="paragraph-advanced-link" class="asc-advanced-link">' + this.textAdvanced + "</label></div>",
+                listeners: {
+                    afterrender: function (cmp) {
+                        document.getElementById("paragraph-advanced-link").onclick = Ext.bind(this._openAdvancedSettings, this);
+                    },
+                    scope: this
+                }
+            }]
+        }];
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    _onLineSpacing: function (value) {
+        var linerule = value.asc_getLineRule();
+        var line = value.asc_getLine();
+        this.numLineHeight.suspendEvents(false);
+        this.cmbLineRule.suspendEvents(false);
+        if (this._state.LineRuleIdx !== linerule) {
+            this.cmbLineRule.setValue((linerule !== null) ? this._arrLineRule[linerule] : "");
+            this.numLineHeight.setMinValue(this._arrLineDefaults[(linerule !== null) ? linerule : 1][2]);
+            this.numLineHeight.setDefaultUnit(this._arrLineDefaults[(linerule !== null) ? linerule : 1][1]);
+            this.numLineHeight.setStep(this._arrLineDefaults[(linerule !== null) ? linerule : 1][3]);
+            this._state.LineRuleIdx = linerule;
+        }
+        if (Math.abs(this._state.LineHeight - line) > 0.001 || (this._state.LineHeight === null || line === null) && (this._state.LineHeight !== line)) {
+            var val = "";
+            if (linerule == c_paragraphLinerule.LINERULE_AUTO) {
+                val = line;
+            } else {
+                if (linerule !== null && line !== null) {
+                    val = Common.MetricSettings.fnRecalcFromMM(line);
+                }
+            }
+            this.numLineHeight.setValue((val !== null) ? val : "");
+            this._state.LineHeight = line;
+        }
+        this.numLineHeight.resumeEvents();
+        this.cmbLineRule.resumeEvents();
+    },
+    ChangeSettings: function (prop) {
+        if (this._initSettings) {
+            this.createDelayedElements();
+            this._initSettings = false;
+        }
+        if (prop) {
+            this.SuspendEvents();
+            var Spacing = {
+                Line: prop.asc_getSpacing().asc_getLine(),
+                Before: prop.asc_getSpacing().asc_getBefore(),
+                After: prop.asc_getSpacing().asc_getAfter(),
+                LineRule: prop.asc_getSpacing().asc_getLineRule()
+            };
+            if (this._state.LineRuleIdx !== Spacing.LineRule) {
+                this.cmbLineRule.setValue((Spacing.LineRule !== null) ? this._arrLineRule[Spacing.LineRule] : "");
+                this.numLineHeight.setMinValue(this._arrLineDefaults[(Spacing.LineRule !== null) ? Spacing.LineRule : 1][2]);
+                this.numLineHeight.setDefaultUnit(this._arrLineDefaults[(Spacing.LineRule !== null) ? Spacing.LineRule : 1][1]);
+                this.numLineHeight.setStep(this._arrLineDefaults[(Spacing.LineRule !== null) ? Spacing.LineRule : 1][3]);
+                this._state.LineRuleIdx = Spacing.LineRule;
+            }
+            if (Math.abs(this._state.LineHeight - Spacing.Line) > 0.001 || (this._state.LineHeight === null || Spacing.Line === null) && (this._state.LineHeight !== Spacing.Line)) {
+                var val = "";
+                if (Spacing.LineRule == c_paragraphLinerule.LINERULE_AUTO) {
+                    val = Spacing.Line;
+                } else {
+                    if (Spacing.LineRule !== null && Spacing.Line !== null) {
+                        val = Common.MetricSettings.fnRecalcFromMM(Spacing.Line);
+                    }
+                }
+                this.numLineHeight.setValue((val !== null) ? val : "");
+                this._state.LineHeight = Spacing.Line;
+            }
+            if (Math.abs(this._state.LineSpacingBefore - Spacing.Before) > 0.001 || (this._state.LineSpacingBefore === null || Spacing.Before === null) && (this._state.LineSpacingBefore !== Spacing.Before)) {
+                this.numSpacingBefore.setValue((Spacing.Before !== null) ? ((Spacing.Before < 0) ? Spacing.Before : Common.MetricSettings.fnRecalcFromMM(Spacing.Before)) : "");
+                this._state.LineSpacingBefore = Spacing.Before;
+            }
+            if (Math.abs(this._state.LineSpacingAfter - Spacing.After) > 0.001 || (this._state.LineSpacingAfter === null || Spacing.After === null) && (this._state.LineSpacingAfter !== Spacing.After)) {
+                this.numSpacingAfter.setValue((Spacing.After !== null) ? ((Spacing.After < 0) ? Spacing.After : Common.MetricSettings.fnRecalcFromMM(Spacing.After)) : "");
+                this._state.LineSpacingAfter = Spacing.After;
+            }
+            this.ResumeEvents();
+        }
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                if (spinner.id == "paragraph-spin-line-height") {
+                    continue;
+                }
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.01 : 1);
+            }
+        }
+        this._arrLineDefaults[2][1] = this._arrLineDefaults[0][1] = Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()];
+        this._arrLineDefaults[2][2] = this._arrLineDefaults[0][2] = parseFloat(Common.MetricSettings.fnRecalcFromMM(0.3).toFixed(2));
+        this._arrLineDefaults[2][3] = this._arrLineDefaults[0][3] = (Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm) ? 0.01 : 1;
+        if (this._state.LineRuleIdx !== null) {
+            this.numLineHeight.setDefaultUnit(this._arrLineDefaults[this._state.LineRuleIdx][1]);
+            this.numLineHeight.setStep(this._arrLineDefaults[this._state.LineRuleIdx][3]);
+        }
+    },
+    _openAdvancedSettings: function (e) {
+        var me = this;
+        var win;
+        if (me.api) {
+            var selectedElements = me.api.asc_getGraphicObjectProps();
+            if (selectedElements && Ext.isArray(selectedElements)) {
+                var elType, elValue;
+                for (var i = selectedElements.length - 1; i >= 0; i--) {
+                    elType = selectedElements[i].asc_getObjectType();
+                    elValue = selectedElements[i].asc_getObjectValue();
+                    if (c_oAscTypeSelectElement.Paragraph == elType) {
+                        win = Ext.create("SSE.view.ParagraphSettingsAdvanced");
+                        win.updateMetricUnit();
+                        win.setSettings({
+                            paragraphProps: elValue,
+                            api: me.api
+                        });
+                        break;
+                    }
+                }
+            }
+        }
+        if (win) {
+            win.addListener("onmodalresult", Ext.bind(function (o, mr, s) {
+                if (mr == 1 && s) {
+                    me.api.asc_setGraphicObjectProps(s.paragraphProps);
+                }
+            },
+            this), false);
+            win.addListener("close", function () {
+                me.fireEvent("editcomplete", me);
+            },
+            false);
+            win.show();
+        }
+    },
+    createDelayedElements: function () {
+        this.updateMetricUnit();
+    },
+    strParagraphSpacing: "Spacing",
+    strLineHeight: "Line Spacing",
+    strSpacingBefore: "Before",
+    strSpacingAfter: "After",
+    textAuto: "Multiple",
+    textAtLeast: "At least",
+    textExact: "Exactly",
+    textAt: "At",
+    txtTitle: "Paragraph",
+    txtAutoText: "Auto",
+    textAdvanced: "Show advanced settings"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/ParagraphSettingsAdvanced.js

@@ -0,0 +1,964 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.ParagraphSettingsAdvanced", {
+    extend: "Ext.window.Window",
+    alias: "widget.sseparagraphsettingsadvanced",
+    requires: ["Ext.Array", "Ext.form.field.ComboBox", "Ext.window.Window", "Common.component.ThemeColorPalette", "Common.component.MetricSpinner", "Common.component.IndeterminateCheckBox", "Common.plugin.GridScrollPane", "Ext.grid.Panel"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 390,
+    width: 516,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this._changedProps = null;
+        this.checkGroup = 0;
+        this._noApply = true;
+        this._tabListChanged = false;
+        this.numFirstLine = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraphadv-spin-first-line",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        if (this._changedProps.asc_getInd() === null || this._changedProps.asc_getInd() === undefined) {
+                            this._changedProps.asc_putInd(new Asc.asc_CParagraphInd());
+                        }
+                        this._changedProps.asc_getInd().asc_putFirstLine(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this.numIndentsLeft = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-indent-left",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        if (this._changedProps.asc_getInd() === null || this._changedProps.asc_getInd() === undefined) {
+                            this._changedProps.asc_putInd(new Asc.asc_CParagraphInd());
+                        }
+                        this._changedProps.asc_getInd().asc_putLeft(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this.numIndentsRight = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-indent-right",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        if (this._changedProps.asc_getInd() === null || this._changedProps.asc_getInd() === undefined) {
+                            this._changedProps.asc_putInd(new Asc.asc_CParagraphInd());
+                        }
+                        this._changedProps.asc_getInd().asc_putRight(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.chStrike = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-strike",
+            width: 140,
+            boxLabel: this.strStrike,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 1) {
+                        this._changedProps.asc_putStrikeout(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 1;
+                        this.chDoubleStrike.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.asc_putDStrikeout(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putStrikeout(field.getValue() == "checked");
+                        properties.asc_putDStrikeout(this.chDoubleStrike.getValue() == "checked");
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chDoubleStrike = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-double-strike",
+            width: 140,
+            boxLabel: this.strDoubleStrike,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 1) {
+                        this._changedProps.asc_putDStrikeout(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 1;
+                        this.chStrike.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.asc_putStrikeout(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putDStrikeout(field.getValue() == "checked");
+                        properties.asc_putStrikeout(this.chStrike.getValue() == "checked");
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chSuperscript = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-superscript",
+            width: 140,
+            boxLabel: this.strSuperscript,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 2) {
+                        this._changedProps.asc_putSuperscript(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 2;
+                        this.chSubscript.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.asc_putSubscript(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putSuperscript(field.getValue() == "checked");
+                        properties.asc_putSubscript(this.chSubscript.getValue() == "checked");
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chSubscript = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-subscript",
+            width: 140,
+            boxLabel: this.strSubscript,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 2) {
+                        this._changedProps.asc_putSubscript(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 2;
+                        this.chSuperscript.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.asc_putSuperscript(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putSubscript(field.getValue() == "checked");
+                        properties.asc_putSuperscript(this.chSuperscript.getValue() == "checked");
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chSmallCaps = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-small-caps",
+            width: 140,
+            boxLabel: this.strSmallCaps,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 3) {
+                        this._changedProps.asc_putSmallCaps(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 3;
+                        this.chAllCaps.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.asc_putAllCaps(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putSmallCaps(field.getValue() == "checked");
+                        properties.asc_putAllCaps(this.chAllCaps.getValue() == "checked");
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chAllCaps = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-all-caps",
+            width: 140,
+            boxLabel: this.strAllCaps,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 3) {
+                        this._changedProps.asc_putAllCaps(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 3;
+                        this.chSmallCaps.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.asc_putSmallCaps(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putAllCaps(field.getValue() == "checked");
+                        properties.asc_putSmallCaps(this.chSmallCaps.getValue() == "checked");
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.numSpacing = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraphadv-spin-spacing",
+            readOnly: false,
+            step: 0.01,
+            width: 100,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        this._changedProps.asc_putTextSpacing(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CParagraphProperty();
+                        properties.asc_putTextSpacing(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                        this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.fontImage = Ext.create("Ext.container.Container", {
+            id: "paragraphadv-font-img",
+            width: "100%",
+            height: 80,
+            style: "background-color:#ffffff; border:1px solid #CDCDCD;"
+        });
+        this.numTab = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-tab",
+            readOnly: false,
+            step: 0.1,
+            width: 180,
+            defaultUnit: "cm",
+            value: "1.25 cm",
+            maxValue: 55.87,
+            minValue: 0
+        });
+        this.numDefaultTab = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-default-tab",
+            readOnly: false,
+            step: 0.1,
+            width: 107,
+            defaultUnit: "cm",
+            value: "1.25 cm",
+            maxValue: 55.87,
+            minValue: 0,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        this._changedProps.asc_putDefaultTab(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this.btnAddTab = Ext.create("Ext.Button", {
+            width: 90,
+            text: this.textSet,
+            enableToggle: false,
+            listeners: {
+                click: Ext.bind(function (btn, eOpts) {
+                    var val = this.numTab.getNumberValue();
+                    var align = this.radioLeft.getValue() ? 1 : (this.radioCenter.getValue() ? 3 : 2);
+                    var idx = fieldStore.findBy(function (record, id) {
+                        return (Math.abs(record.data.tabPos - val) < 0.001);
+                    },
+                    this);
+                    if (idx < 0) {
+                        var rec = fieldStore.add({
+                            tabPos: this.numTab.getNumberValue(),
+                            tabStr: this.numTab.getNumberValue() + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()],
+                            tabAlign: align
+                        });
+                        fieldStore.sort();
+                        this.tabList.getSelectionModel().select(rec);
+                    } else {
+                        var rec = fieldStore.getAt(idx);
+                        rec.set("tabAlign", align);
+                    }
+                },
+                this)
+            }
+        });
+        this.btnRemoveTab = Ext.create("Ext.Button", {
+            width: 90,
+            text: this.textRemove,
+            enableToggle: false,
+            listeners: {
+                click: Ext.bind(function (btn, eOpts) {
+                    var rec = this.tabList.getSelectionModel().getSelection();
+                    if (rec.length > 0) {
+                        var idx = rec[0].index;
+                        fieldStore.remove(rec);
+                        if (idx > fieldStore.count() - 1) {
+                            idx = fieldStore.count() - 1;
+                        }
+                        if (idx > -1) {
+                            this.tabList.getSelectionModel().select(idx);
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.btnRemoveAll = Ext.create("Ext.Button", {
+            width: 90,
+            text: this.textRemoveAll,
+            enableToggle: false,
+            listeners: {
+                click: Ext.bind(function (btn, eOpts) {
+                    fieldStore.removeAll();
+                },
+                this)
+            }
+        });
+        this.radioLeft = Ext.create("Ext.form.field.Radio", {
+            boxLabel: this.textTabLeft,
+            name: "asc-radio-tab",
+            checked: true
+        });
+        this.radioCenter = Ext.create("Ext.form.field.Radio", {
+            boxLabel: this.textTabCenter,
+            name: "asc-radio-tab",
+            checked: false
+        });
+        this.radioRight = Ext.create("Ext.form.field.Radio", {
+            boxLabel: this.textTabRight,
+            name: "asc-radio-tab",
+            checked: false
+        });
+        Ext.define("SSE.model.TabDataModel", {
+            extend: "Ext.data.Model",
+            fields: [{
+                name: "tabPos",
+                name: "tabStr",
+                name: "tabAlign"
+            }]
+        });
+        var fieldStore = Ext.create("Ext.data.Store", {
+            model: "SSE.model.TabDataModel",
+            data: [],
+            sorters: ["tabPos"],
+            listeners: {
+                datachanged: Ext.bind(function (btn, eOpts) {
+                    if (!this._noApply) {
+                        this._tabListChanged = true;
+                    }
+                },
+                this),
+                update: Ext.bind(function (btn, eOpts) {
+                    if (!this._noApply) {
+                        this._tabListChanged = true;
+                    }
+                },
+                this),
+                clear: Ext.bind(function (btn, eOpts) {
+                    if (!this._noApply) {
+                        this._tabListChanged = true;
+                    }
+                },
+                this)
+            }
+        });
+        this.tabList = Ext.create("Ext.grid.Panel", {
+            activeItem: 0,
+            id: "paragraphadv-tab-list",
+            store: fieldStore,
+            mode: "local",
+            scroll: false,
+            columns: [{
+                flex: 1,
+                dataIndex: "tabStr"
+            }],
+            height: 80,
+            width: 180,
+            hideHeaders: true,
+            viewConfig: {
+                stripeRows: false
+            },
+            plugins: [{
+                pluginId: "scrollpane",
+                ptype: "gridscrollpane"
+            }],
+            listeners: {
+                select: function (o, record, index, eOpts) {
+                    this.numTab.setValue(record.data.tabPos);
+                    (record.data.tabAlign == 1) ? this.radioLeft.setValue(true) : ((record.data.tabAlign == 3) ? this.radioCenter.setValue(true) : this.radioRight.setValue(true));
+                },
+                scope: this
+            }
+        });
+        this.btnIndents = Ext.widget("button", {
+            width: 160,
+            height: 27,
+            cls: "asc-dialogmenu-btn",
+            text: this.strParagraphIndents,
+            textAlign: "right",
+            enableToggle: true,
+            allowDepress: false,
+            toggleGroup: "advtablecardGroup",
+            pressed: true,
+            listeners: {
+                click: function (btn) {
+                    if (btn.pressed) {
+                        this.mainCard.getLayout().setActiveItem("card-indents");
+                    }
+                },
+                scope: this
+            }
+        });
+        this.btnFont = Ext.widget("button", {
+            width: 160,
+            height: 27,
+            cls: "asc-dialogmenu-btn",
+            text: this.strParagraphFont,
+            textAlign: "right",
+            enableToggle: true,
+            allowDepress: false,
+            toggleGroup: "advtablecardGroup",
+            listeners: {
+                click: function (btn) {
+                    if (btn.pressed) {
+                        this.mainCard.getLayout().setActiveItem("card-font");
+                    }
+                },
+                scope: this
+            }
+        });
+        this.btnTabs = Ext.widget("button", {
+            width: 160,
+            height: 27,
+            cls: "asc-dialogmenu-btn",
+            textAlign: "right",
+            text: this.strTabs,
+            enableToggle: true,
+            allowDepress: false,
+            toggleGroup: "advtablecardGroup",
+            listeners: {
+                click: function (btn) {
+                    if (btn.pressed) {
+                        this.mainCard.getLayout().setActiveItem("card-tabs");
+                        this.tabList.getPlugin("scrollpane").updateScrollPane();
+                    }
+                },
+                scope: this
+            }
+        });
+        this._IndentsContainer = {
+            xtype: "container",
+            itemId: "card-indents",
+            width: 330,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                padding: "0 10",
+                layout: {
+                    type: "table",
+                    columns: 5
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    height: 40,
+                    style: "float:left;"
+                },
+                items: [{
+                    items: [{
+                        xtype: "label",
+                        text: this.strIndentsFirstLine,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numFirstLine]
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 23,
+                    height: 3
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.strIndentsLeftText,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numIndentsLeft]
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 23,
+                    height: 3
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.strIndentsRightText,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numIndentsRight]
+                }]
+            }]
+        };
+        this._FontContainer = {
+            xtype: "container",
+            itemId: "card-font",
+            width: 330,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "label",
+                style: "font-weight: bold;margin-top: 1px; padding-left:10px;height:13px;",
+                text: this.textEffects
+            },
+            {
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                height: 85,
+                width: "100%",
+                padding: "0 10",
+                layout: {
+                    type: "table",
+                    columns: 3,
+                    tdAttrs: {
+                        style: "vertical-align: middle;"
+                    }
+                },
+                items: [this.chStrike, {
+                    xtype: "tbspacer",
+                    width: 20,
+                    height: 2
+                },
+                this.chSubscript, this.chDoubleStrike, {
+                    xtype: "tbspacer",
+                    width: 20,
+                    height: 2
+                },
+                this.chSmallCaps, this.chSuperscript, {
+                    xtype: "tbspacer",
+                    width: 20,
+                    height: 2
+                },
+                this.chAllCaps]
+            },
+            {
+                xtype: "label",
+                style: "font-weight: bold;margin-top: 1px; padding-left:10px;height:13px;",
+                text: this.textCharacterSpacing
+            },
+            {
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                height: 26,
+                padding: "0 10",
+                layout: {
+                    type: "vbox",
+                    align: "left"
+                },
+                items: [this.numSpacing]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                height: 85,
+                padding: "0 10",
+                items: [this.fontImage]
+            }]
+        };
+        this._TabsContainer = {
+            xtype: "container",
+            itemId: "card-tabs",
+            width: 330,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                padding: "0 0 0 10",
+                layout: {
+                    type: "table",
+                    columns: 3,
+                    tdAttrs: {
+                        style: "padding-right: 7px;"
+                    }
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    style: "float:left;"
+                },
+                items: [{
+                    height: 50,
+                    colspan: 2,
+                    items: [{
+                        xtype: "label",
+                        text: this.textTabPosition,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numTab]
+                },
+                {
+                    height: 50,
+                    items: [{
+                        xtype: "label",
+                        text: this.textDefault,
+                        width: 107
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numDefaultTab]
+                },
+                {
+                    height: 95,
+                    colspan: 3,
+                    items: [this.tabList]
+                },
+                {
+                    height: 100,
+                    colspan: 3,
+                    items: [{
+                        xtype: "label",
+                        text: this.textAlign,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.radioLeft, this.radioCenter, this.radioRight]
+                },
+                this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll]
+            }]
+        };
+        this.items = [{
+            xtype: "container",
+            height: 300,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                width: 160,
+                padding: "5px 0 0 0",
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: {
+                        type: "hbox",
+                        align: "middle",
+                        pack: "end"
+                    }
+                },
+                items: [{
+                    height: 30,
+                    items: [this.btnIndents]
+                },
+                {
+                    height: 30,
+                    items: [this.btnFont]
+                },
+                {
+                    height: 30,
+                    items: [this.btnTabs]
+                }]
+            },
+            {
+                xtype: "box",
+                cls: "advanced-settings-separator",
+                height: "100%",
+                width: 8
+            },
+            this.mainCard = Ext.create("Ext.container.Container", {
+                height: 300,
+                flex: 1,
+                padding: "12px 18px 0 10px",
+                layout: "card",
+                items: [this._IndentsContainer, this._FontContainer, this._TabsContainer]
+            })]
+        },
+        this._spacer.cloneConfig({
+            style: "margin: 0 18px"
+        }), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 1, this.getSettings());
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this._setDefaults(this._originalProps);
+        this.setTitle(this.textTitle);
+    },
+    setSettings: function (props) {
+        this._originalProps = new Asc.asc_CParagraphProperty(props.paragraphProps);
+        this._changedProps = null;
+        this.api = props.api;
+    },
+    _setDefaults: function (props) {
+        if (props) {
+            this._originalProps = new Asc.asc_CParagraphProperty(props);
+            this.numFirstLine.setValue((props.asc_getInd() !== null && props.asc_getInd().asc_getFirstLine() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.asc_getInd().asc_getFirstLine()) : "");
+            this.numIndentsLeft.setValue((props.asc_getInd() !== null && props.asc_getInd().asc_getLeft() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.asc_getInd().asc_getLeft()) : "");
+            this.numIndentsRight.setValue((props.asc_getInd() !== null && props.asc_getInd().asc_getRight() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.asc_getInd().asc_getRight()) : "");
+            this._noApply = true;
+            this.chStrike.setValue((props.asc_getStrikeout() !== null && props.asc_getStrikeout() !== undefined) ? props.asc_getStrikeout() : "indeterminate");
+            this.chDoubleStrike.setValue((props.asc_getDStrikeout() !== null && props.asc_getDStrikeout() !== undefined) ? props.asc_getDStrikeout() : "indeterminate");
+            this.chSubscript.setValue((props.asc_getSubscript() !== null && props.asc_getSubscript() !== undefined) ? props.asc_getSubscript() : "indeterminate");
+            this.chSuperscript.setValue((props.asc_getSuperscript() !== null && props.asc_getSuperscript() !== undefined) ? props.asc_getSuperscript() : "indeterminate");
+            this.chSmallCaps.setValue((props.asc_getSmallCaps() !== null && props.asc_getSmallCaps() !== undefined) ? props.asc_getSmallCaps() : "indeterminate");
+            this.chAllCaps.setValue((props.asc_getAllCaps() !== null && props.asc_getAllCaps() !== undefined) ? props.asc_getAllCaps() : "indeterminate");
+            this.numSpacing.setValue((props.asc_getTextSpacing() !== null && props.asc_getTextSpacing() !== undefined) ? Common.MetricSettings.fnRecalcFromMM(props.asc_getTextSpacing()) : "");
+            this.api.asc_setDrawImagePlaceParagraph("paragraphadv-font-img", this._originalProps);
+            this.numDefaultTab.setValue((props.asc_getDefaultTab() !== null && props.asc_getDefaultTab() !== undefined) ? Common.MetricSettings.fnRecalcFromMM(props.asc_getDefaultTab()) : "");
+            var tabs = props.asc_getTabs();
+            if (tabs) {
+                var arr = [];
+                var count = tabs.asc_getCount();
+                for (var i = 0; i < count; i++) {
+                    var tab = tabs.asc_getTab(i);
+                    var rec = {
+                        tabPos: Common.MetricSettings.fnRecalcFromMM(tab.asc_getPos()),
+                        tabAlign: tab.asc_getValue()
+                    };
+                    rec.tabStr = parseFloat(Ext.Number.toFixed(rec.tabPos, 3)) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()];
+                    arr.push(rec);
+                }
+                this.tabList.getStore().loadData(arr);
+                this.tabList.getStore().sort();
+                if (this.tabList.getStore().count() > 0) {
+                    this.tabList.getSelectionModel().select(0);
+                }
+            }
+            this._noApply = false;
+            this._changedProps = new Asc.asc_CParagraphProperty();
+        }
+    },
+    getSettings: function () {
+        if (this._tabListChanged) {
+            if (this._changedProps.asc_getTabs() === null || this._changedProps.asc_getTabs() === undefined) {
+                this._changedProps.asc_putTabs(new Asc.asc_CParagraphTabs());
+            }
+            this.tabList.getStore().each(function (item, index) {
+                var tab = new Asc.asc_CParagraphTab(Common.MetricSettings.fnRecalcToMM(item.data.tabPos), item.data.tabAlign);
+                this._changedProps.asc_getTabs().add_Tab(tab);
+            },
+            this);
+        }
+        return {
+            paragraphProps: this._changedProps
+        };
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                if (spinner.id == "paragraphadv-spin-spacing") {
+                    spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.01 : 1);
+                } else {
+                    spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+                }
+            }
+        }
+    },
+    textTitle: "Paragraph - Advanced Settings",
+    strIndentsFirstLine: "First line",
+    strIndentsLeftText: "Left",
+    strIndentsRightText: "Right",
+    strParagraphIndents: "Indents & Placement",
+    strParagraphFont: "Font",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    textEffects: "Effects",
+    textCharacterSpacing: "Character Spacing",
+    strDoubleStrike: "Double strikethrough",
+    strStrike: "Strikethrough",
+    strSuperscript: "Superscript",
+    strSubscript: "Subscript",
+    strSmallCaps: "Small caps",
+    strAllCaps: "All caps",
+    strTabs: "Tab",
+    textSet: "Specify",
+    textRemove: "Remove",
+    textRemoveAll: "Remove All",
+    textTabLeft: "Left",
+    textTabRight: "Right",
+    textTabCenter: "Center",
+    textAlign: "Alignment",
+    textTabPosition: "Tab Position",
+    textDefault: "Default Tab"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/PrintSettings.js

@@ -0,0 +1,579 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.PrintSettings", {
+    extend: "Ext.window.Window",
+    alias: "widget.sseprintsettings",
+    requires: ["Ext.window.Window", "Ext.form.field.ComboBox", "Ext.form.RadioGroup", "Ext.Array", "Common.component.MetricSpinner", "Common.component.IndeterminateCheckBox"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 588,
+    width: 466,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.cmbPaperSize = Ext.widget("combo", {
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "size"],
+                data: [{
+                    size: "215.9|279.4",
+                    description: "US Letter (21,59cm x 27,94cm)"
+                },
+                {
+                    size: "215.9|355.6",
+                    description: "US Legal (21,59cm x 35,56cm)"
+                },
+                {
+                    size: "210|297",
+                    description: "A4 (21cm x 29,7cm)"
+                },
+                {
+                    size: "148.1|209.9",
+                    description: "A5 (14,81cm x 20,99cm)"
+                },
+                {
+                    size: "176|250.1",
+                    description: "B5 (17,6cm x 25,01cm)"
+                },
+                {
+                    size: "104.8|241.3",
+                    description: "Envelope #10 (10,48cm x 24,13cm)"
+                },
+                {
+                    size: "110.1|220.1",
+                    description: "Envelope DL (11,01cm x 22,01cm)"
+                },
+                {
+                    size: "279.4|431.7",
+                    description: "Tabloid (27,94cm x 43,17cm)"
+                },
+                {
+                    size: "297|420.1",
+                    description: "A3 (29,7cm x 42,01cm)"
+                },
+                {
+                    size: "304.8|457.1",
+                    description: "Tabloid Oversize (30,48cm x 45,71cm)"
+                },
+                {
+                    size: "196.8|273",
+                    description: "ROC 16K (19,68cm x 27,3cm)"
+                },
+                {
+                    size: "119.9|234.9",
+                    description: "Envelope Choukei 3 (11,99cm x 23,49cm)"
+                },
+                {
+                    size: "330.2|482.5",
+                    description: "Super B/A3 (33,02cm x 48,25cm)"
+                }]
+            }),
+            displayField: "description",
+            valueField: "size",
+            queryMode: "local",
+            editable: false,
+            flex: 1
+        });
+        this.cmbPaperOrientation = Ext.widget("combo", {
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "orient"],
+                data: [{
+                    description: me.strPortrait,
+                    orient: c_oAscPageOrientation.PagePortrait
+                },
+                {
+                    description: me.strLandscape,
+                    orient: c_oAscPageOrientation.PageLandscape
+                }]
+            }),
+            displayField: "description",
+            valueField: "orient",
+            queryMode: "local",
+            editable: false,
+            width: 115
+        });
+        this.chPrintGrid = Ext.widget("cmdindeterminatecheckbox", {
+            boxLabel: this.textPrintGrid
+        });
+        this.chPrintRows = Ext.widget("cmdindeterminatecheckbox", {
+            boxLabel: this.textPrintHeadings
+        });
+        this.spnMarginLeft = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {},
+                this)
+            }
+        });
+        this.spnMarginRight = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            listeners: {
+                change: function (field, newValue, oldValue, eOpts) {}
+            }
+        });
+        this.spnMarginTop = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            listeners: {
+                change: function (field, newValue, oldValue, eOpts) {}
+            }
+        });
+        this.spnMarginBottom = Ext.create("Common.component.MetricSpinner", {
+            readOnly: false,
+            maxValue: 48.25,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            listeners: {
+                change: function (field, newValue, oldValue, eOpts) {}
+            }
+        });
+        this.items = [this.topCnt = Ext.widget("container", {
+            height: 490,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                width: 160,
+                padding: "18 0 0 0",
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                defaults: {
+                    xtype: "container",
+                    padding: "0 10 0 0",
+                    layout: {
+                        type: "hbox",
+                        align: "middle",
+                        pack: "end"
+                    }
+                },
+                items: [{
+                    height: 80,
+                    padding: "0 10px 10px 0",
+                    items: [{
+                        xtype: "label",
+                        text: me.textPrintRange,
+                        style: "font-weight: bold;"
+                    }]
+                },
+                {
+                    height: 62,
+                    items: [{
+                        xtype: "label",
+                        text: me.textPageSize,
+                        style: "font-weight: bold;"
+                    }]
+                },
+                {
+                    height: 58,
+                    items: [{
+                        xtype: "label",
+                        text: me.textPageOrientation,
+                        style: "font-weight: bold;"
+                    }]
+                },
+                {
+                    height: 124,
+                    items: [{
+                        xtype: "label",
+                        text: this.strMargins,
+                        style: "font-weight: bold;"
+                    }]
+                },
+                {
+                    height: 68,
+                    items: [{
+                        xtype: "label",
+                        text: me.textLayout,
+                        style: "font-weight: bold;"
+                    }]
+                },
+                {
+                    height: 70,
+                    items: [{
+                        xtype: "label",
+                        text: me.strPrint,
+                        style: "font-weight: bold;"
+                    }]
+                }]
+            },
+            {
+                xtype: "box",
+                cls: "advanced-settings-separator",
+                height: "100%",
+                width: 8
+            },
+            {
+                xtype: "container",
+                padding: "18 0 0 10",
+                width: 280,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "container",
+                    height: 70,
+                    padding: "0 10",
+                    layout: {
+                        type: "hbox",
+                        align: "middle"
+                    },
+                    items: [this.groupRange = Ext.widget("radiogroup", {
+                        id: "dialog-printoptions-grouprange",
+                        columns: 1,
+                        width: 280,
+                        vertical: true,
+                        items: [{
+                            boxLabel: this.textCurrentSheet,
+                            name: "printrange",
+                            inputValue: c_oAscPrintType.ActiveSheets,
+                            checked: true
+                        },
+                        {
+                            boxLabel: this.textAllSheets,
+                            name: "printrange",
+                            inputValue: c_oAscPrintType.EntireWorkbook
+                        },
+                        {
+                            boxLabel: this.textSelection,
+                            name: "printrange",
+                            inputValue: c_oAscPrintType.Selection
+                        }]
+                    })]
+                },
+                this._spacer.cloneConfig({
+                    style: "margin: 15px 0 10px 0;",
+                    height: 6
+                }), {
+                    xtype: "container",
+                    height: 25,
+                    padding: "0 10",
+                    layout: {
+                        type: "hbox",
+                        align: "middle"
+                    },
+                    items: [this.cmbPaperSize]
+                },
+                this._spacer.cloneConfig({
+                    style: "margin: 17px 0 10px 0;",
+                    height: 6
+                }), {
+                    xtype: "container",
+                    height: 25,
+                    padding: "0 10",
+                    layout: {
+                        type: "hbox",
+                        align: "middle"
+                    },
+                    items: [this.cmbPaperOrientation]
+                },
+                this._spacer.cloneConfig({
+                    style: "margin: 16px 0 4px 0;",
+                    height: 6
+                }), this.cntMargins = Ext.widget("container", {
+                    height: 100,
+                    padding: "0 10",
+                    layout: {
+                        type: "hbox"
+                    },
+                    defaults: {
+                        xtype: "container",
+                        layout: {
+                            type: "vbox",
+                            align: "stretch"
+                        },
+                        height: 100
+                    },
+                    items: [{
+                        flex: 1,
+                        items: [{
+                            xtype: "label",
+                            width: "100%",
+                            text: me.strTop
+                        },
+                        {
+                            xtype: "tbspacer",
+                            height: 3
+                        },
+                        this.spnMarginTop, {
+                            xtype: "tbspacer",
+                            height: 12
+                        },
+                        {
+                            xtype: "label",
+                            width: "100%",
+                            text: me.strLeft
+                        },
+                        {
+                            xtype: "tbspacer",
+                            height: 3
+                        },
+                        this.spnMarginLeft]
+                    },
+                    {
+                        xtype: "tbspacer",
+                        width: 20
+                    },
+                    {
+                        flex: 1,
+                        items: [{
+                            xtype: "label",
+                            text: me.strBottom,
+                            width: "100%"
+                        },
+                        {
+                            xtype: "tbspacer",
+                            height: 3
+                        },
+                        this.spnMarginBottom, {
+                            xtype: "tbspacer",
+                            height: 12
+                        },
+                        {
+                            xtype: "label",
+                            text: me.strRight,
+                            width: "100%"
+                        },
+                        {
+                            xtype: "tbspacer",
+                            height: 3
+                        },
+                        this.spnMarginRight]
+                    }]
+                }), this._spacer.cloneConfig({
+                    style: "margin: 14px 0 6px 0;",
+                    height: 6
+                }), this.cntLayout = Ext.widget("container", {
+                    height: 45,
+                    padding: "0 10",
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    items: [this.groupLayout = Ext.widget("radiogroup", {
+                        columns: 1,
+                        width: 280,
+                        vertical: true,
+                        items: [{
+                            boxLabel: this.textActualSize,
+                            name: "printlayout",
+                            inputValue: c_oAscLayoutPageType.ActualSize
+                        },
+                        {
+                            boxLabel: this.textFit,
+                            name: "printlayout",
+                            inputValue: c_oAscLayoutPageType.FitToWidth,
+                            checked: true
+                        }]
+                    })]
+                }), this._spacer.cloneConfig({
+                    style: "margin: 14px 0 8px 0;",
+                    height: 6
+                }), this.cntAdditional = Ext.widget("container", {
+                    height: 65,
+                    padding: "0 10",
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    items: [this.chPrintGrid, this.chPrintRows]
+                })]
+            }]
+        }), this._spacer.cloneConfig({
+            style: "margin: 0 18px"
+        }), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 466,
+                height: 24,
+                style: "padding: 0 30px;",
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "button",
+                    width: 100,
+                    height: 22,
+                    text: this.textHideDetails,
+                    listeners: {
+                        scope: this,
+                        click: this.handlerShowDetails
+                    }
+                },
+                this.btnOk = Ext.widget("button", {
+                    id: "dialog-print-options-ok",
+                    cls: "asc-blue-button",
+                    width: 150,
+                    height: 22,
+                    style: "margin:0 10px 0 60px;",
+                    text: this.btnPrint,
+                    listeners: {}
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+        this.setTitle(this.textTitle);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+    },
+    checkMargins: function () {
+        if (this.cmbPaperOrientation.getValue() == c_oAscPageOrientation.PagePortrait) {
+            var pagewidth = /^\d{3}\.?\d*/.exec(this.cmbPaperSize.getValue());
+            var pageheight = /\d{3}\.?\d*$/.exec(this.cmbPaperSize.getValue());
+        } else {
+            pageheight = /^\d{3}\.?\d*/.exec(this.cmbPaperSize.getValue());
+            pagewidth = /\d{3}\.?\d*$/.exec(this.cmbPaperSize.getValue());
+        }
+        var ml = Common.MetricSettings.fnRecalcToMM(this.spnMarginLeft.getNumberValue());
+        var mr = Common.MetricSettings.fnRecalcToMM(this.spnMarginRight.getNumberValue());
+        var mt = Common.MetricSettings.fnRecalcToMM(this.spnMarginTop.getNumberValue());
+        var mb = Common.MetricSettings.fnRecalcToMM(this.spnMarginBottom.getNumberValue());
+        if (ml > pagewidth) {
+            return "left";
+        }
+        if (mr > pagewidth - ml) {
+            return "right";
+        }
+        if (mt > pageheight) {
+            return "top";
+        }
+        if (mb > pageheight - mt) {
+            return "bottom";
+        }
+        return null;
+    },
+    handlerShowDetails: function (btn) {
+        if (!this.extended) {
+            this.extended = true;
+            this.cntMargins.setDisabled(true);
+            this.cntLayout.setDisabled(true);
+            this.cntAdditional.setDisabled(true);
+            this.topCnt.setHeight(218);
+            this.setHeight(316);
+            btn.setText(this.textShowDetails);
+        } else {
+            this.extended = false;
+            this.cntMargins.setDisabled(false);
+            this.cntLayout.setDisabled(false);
+            this.cntAdditional.setDisabled(false);
+            this.topCnt.setHeight(490);
+            this.setHeight(588);
+            btn.setText(this.textHideDetails);
+        }
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+            }
+        }
+    },
+    textTitle: "Print Settings",
+    strLeft: "Left",
+    strRight: "Right",
+    strTop: "Top",
+    strBottom: "Bottom",
+    strPortrait: "Portrait",
+    strLandscape: "Landscape",
+    textPrintGrid: "Print Gridlines",
+    textPrintHeadings: "Print Rows and Columns Headings",
+    textPageSize: "Page Size",
+    textPageOrientation: "Page Orientation",
+    strMargins: "Margins",
+    strPrint: "Print",
+    btnPrint: "Save & Print",
+    textPrintRange: "Print Range",
+    textLayout: "Layout",
+    textCurrentSheet: "Current Sheet",
+    textAllSheets: "All Sheets",
+    textSelection: "Selection",
+    textActualSize: "Actual Size",
+    textFit: "Fit to width",
+    textShowDetails: "Show Details",
+    cancelButtonText: "Cancel",
+    textHideDetails: "Hide Details"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/RecentFiles.js

@@ -0,0 +1,75 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.RecentFiles", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.sserecentfiles",
+    cls: "sse-recentfiles",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    requires: ["Ext.container.Container", "Ext.data.Model", "Ext.data.Store", "Ext.view.View", "Ext.XTemplate", "Common.plugin.DataViewScrollPane"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+        var me = this;
+        me.add({
+            xtype: "container",
+            flex: 1,
+            layout: "fit",
+            cls: "container-recent-file-list",
+            items: [{
+                xtype: "dataview",
+                store: "RecentFiles",
+                tpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', '<div class="thumb"></div>', '<div class="file-name">{title:htmlEncode}</div>', '<div class="file-info">{folder:htmlEncode}</div>', "</div>", "</tpl>"),
+                singleSelect: true,
+                trackOver: true,
+                style: "overflow:auto",
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "x-view-context",
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    pluginId: "scrollpane",
+                    areaSelector: ".x-view-context",
+                    settings: {
+                        enableKeyboardNavigation: true
+                    }
+                }]
+            }]
+        });
+    }
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/RightMenu.js

@@ -0,0 +1,231 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ var SCALE_MIN = 40;
+var MENU_SCALE_PART = 260;
+var RIGHTMENU_TOOLBAR_ID = "rightmenu-toolbar-id";
+var RIGHTMENU_PANEL_ID = "rightmenu-panel-id";
+Ext.define("SSE.view.RightMenu", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.sserightmenu",
+    requires: ["Ext.toolbar.Toolbar", "Ext.button.Button", "Ext.container.Container", "Ext.toolbar.Spacer", "SSE.view.RightPanel", "Ext.util.Cookies"],
+    cls: "rm-style",
+    id: RIGHTMENU_PANEL_ID,
+    bodyCls: "rm-body",
+    width: SCALE_MIN,
+    buttonCollection: [],
+    listeners: {
+        afterrender: function () {
+            var owner = this.ownerCt;
+            if (Ext.isDefined(owner)) {
+                owner.addListener("resize", Ext.bind(this.resizeMenu, this));
+            }
+        }
+    },
+    initComponent: function () {
+        this.dockedItems = this.buildDockedItems();
+        this._rightSettings = Ext.widget("sserightpanel", {
+            id: "view-right-panel-settings",
+            btnImage: this.btnImage,
+            btnShape: this.btnShape,
+            btnText: this.btnText
+        });
+        this.items = [this._rightSettings];
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    buildDockedItems: function () {
+        var me = this;
+        me.btnShape = Ext.create("Ext.button.Button", {
+            id: "id-right-menu-shape",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuShape",
+            asctype: c_oAscTypeSelectElement.Shape,
+            enableToggle: true,
+            allowDepress: true,
+            toggleGroup: "tabpanelbtnsGroup",
+            disabled: true,
+            style: "margin-bottom:8px;"
+        });
+        me.btnImage = Ext.create("Ext.Button", {
+            id: "id-right-menu-image",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuImage",
+            asctype: c_oAscTypeSelectElement.Image,
+            enableToggle: true,
+            allowDepress: true,
+            toggleGroup: "tabpanelbtnsGroup",
+            disabled: true,
+            style: "margin-bottom:8px;"
+        });
+        me.btnText = Ext.create("Ext.Button", {
+            id: "id-right-menu-text",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuText",
+            asctype: c_oAscTypeSelectElement.Paragraph,
+            enableToggle: true,
+            allowDepress: true,
+            disabled: true,
+            toggleGroup: "tabpanelbtnsGroup"
+        });
+        this.rightToolbar = Ext.create("Ext.toolbar.Toolbar", {
+            cls: "rm-default-toolbar",
+            width: this.width || SCALE_MIN,
+            vertical: true,
+            dock: "right",
+            defaultType: "button",
+            style: "padding-top:15px",
+            items: [me.btnShape, me.btnImage, me.btnText]
+        });
+        return this.rightToolbar;
+    },
+    resizeMenu: function (Component, adjWidth, adjHeight, eOpts) {
+        for (var i = 0; i < this.items.length; i++) {
+            if (this.items.items[i].el && adjHeight != this.items.items[i].getHeight()) {
+                this.items.items[i].setHeight(adjHeight);
+            }
+        }
+        this.doComponentLayout();
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(this.onCoAuthoringDisconnect, this));
+        return this;
+    },
+    disableMenu: function (disabled) {
+        var btn, i;
+        var tbMain = this.rightToolbar;
+        if (Ext.isDefined(tbMain)) {
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (btn) {
+                    btn.pressed && btn.toggle(false);
+                    btn.setDisabled(disabled);
+                }
+            }
+        }
+    },
+    onCoAuthoringDisconnect: function () {
+        this.disableMenu(true);
+        if (this._rightSettings) {
+            this._rightSettings.setDisabled(true);
+            this._rightSettings.setMode({
+                isEdit: false
+            });
+        }
+    },
+    onSelectionChanged: function (info) {
+        var SelectedObjects = [];
+        if (info.asc_getFlags().asc_getSelectionType() == c_oAscSelectionType.RangeImage || info.asc_getFlags().asc_getSelectionType() == c_oAscSelectionType.RangeShape || info.asc_getFlags().asc_getSelectionType() == c_oAscSelectionType.RangeShapeText) {
+            SelectedObjects = this.api.asc_getGraphicObjectProps();
+        }
+        if (SelectedObjects.length <= 0 && !this._rightSettings.minimizedMode) {
+            this.clearSelection();
+            this._rightSettings.minimizedMode = true;
+            this.setWidth(SCALE_MIN);
+        }
+        this._rightSettings.onFocusObject(SelectedObjects);
+    },
+    clearSelection: function (exclude) {
+        var btn, i;
+        var tbMain = this.rightToolbar;
+        if (Ext.isDefined(tbMain)) {
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                    if (btn.pressed) {
+                        if (exclude) {
+                            if (typeof exclude == "object") {
+                                if (exclude.id == btn.id) {
+                                    continue;
+                                }
+                            } else {
+                                if (btn.iconCls && !(btn.iconCls.search(exclude) < 0)) {
+                                    continue;
+                                }
+                            }
+                        }
+                        btn.toggle(false);
+                    }
+                }
+            }
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        this.api.asc_registerCallback("asc_onSelectionChanged", Ext.bind(this.onSelectionChanged, this));
+        me._rightSettings.setHeight(me.getHeight());
+        var toggleHandler = function (btn, pressed) {
+            if (pressed && !me._rightSettings.minimizedMode) {
+                btn.addCls("asc-main-menu-btn-selected");
+                var panel = me._rightSettings._settings[btn.asctype].panel;
+                var props = me._rightSettings._settings[btn.asctype].props;
+                me._rightSettings.TabPanel.getLayout().setActiveItem(panel);
+                me._rightSettings.TabPanel.setHeight(panel.initialHeight);
+                if (props) {
+                    panel.ChangeSettings.call(panel, props);
+                }
+            }
+        };
+        var clickHandler = function (btn) {
+            if (btn.pressed) {
+                if (me._rightSettings.minimizedMode) {
+                    if (me._rightSettings.TabPanel.hidden) {
+                        me._rightSettings.TabPanel.setVisible(true);
+                    }
+                    me.setWidth(MENU_SCALE_PART);
+                    me._rightSettings.minimizedMode = false;
+                    toggleHandler(btn, btn.pressed);
+                } else {
+                    btn.addCls("asc-main-menu-btn-selected");
+                }
+            } else {
+                me._rightSettings.minimizedMode = true;
+                me.setWidth(SCALE_MIN);
+                btn.removeCls("asc-main-menu-btn-selected");
+            }
+            me.fireEvent("editcomplete", me);
+        };
+        var button;
+        var tips = [me.txtShapeSettings, me.txtImageSettings, me.txtParagraphSettings];
+        for (var i = this.rightToolbar.items.items.length; i--;) {
+            button = this.rightToolbar.items.items[i];
+            button.on({
+                "click": clickHandler,
+                "toggle": toggleHandler
+            });
+            button.setTooltip(tips[i]);
+        }
+    },
+    txtImageSettings: "Image Settings",
+    txtShapeSettings: "Shape Settings",
+    txtParagraphSettings: "Text Settings"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/RightPanel.js

@@ -0,0 +1,262 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.RightPanel", {
+    extend: "Ext.container.Container",
+    alias: "widget.sserightpanel",
+    width: 220,
+    layout: {
+        type: "auto"
+    },
+    autoScroll: true,
+    cls: "asc-right-panel-container",
+    preventHeader: true,
+    requires: ["Ext.toolbar.Toolbar", "Ext.container.Container", "Common.plugin.ScrollPane", "SSE.view.ImageSettings", "SSE.view.ShapeSettings", "SSE.view.ParagraphSettings", "Ext.button.Button", "Ext.panel.Panel"],
+    uses: ["Ext.DomHelper", "Ext.util.Cookies"],
+    listeners: {
+        afterrender: function () {
+            var owner = this.ownerCt;
+            if (Ext.isDefined(owner)) {
+                owner.addListener("resize", Ext.bind(this.resizeRightPanels, this));
+            }
+        }
+    },
+    resizeRightPanels: function (cnt) {
+        this.doComponentLayout();
+    },
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.editMode = true;
+        me.minimizedMode = true;
+        me.plugins = [{
+            ptype: "scrollpane",
+            pluginId: "scrollpane",
+            areaSelector: ".x-container",
+            settings: {
+                enableKeyboardNavigation: true,
+                verticalGutter: 0
+            }
+        }];
+        me.callParent(arguments);
+    },
+    updateScrollPane: function () {
+        var me = this;
+        me.getPlugin("scrollpane").updateScrollPane();
+    },
+    onFocusObject: function (SelectedObjects) {
+        if (!this.editMode) {
+            return;
+        }
+        for (var i = 0; i < this._settings.length; i++) {
+            if (this._settings[i]) {
+                this._settings[i].hidden = 1;
+            }
+        }
+        for (i = 0; i < SelectedObjects.length; i++) {
+            var type = SelectedObjects[i].asc_getObjectType();
+            if (type >= this._settings.length || this._settings[type] === undefined) {
+                continue;
+            }
+            var value = SelectedObjects[i].asc_getObjectValue();
+            if (type == c_oAscTypeSelectElement.Image) {
+                if (value.asc_getShapeProperties() !== null) {
+                    type = c_oAscTypeSelectElement.Shape;
+                }
+            }
+            this._settings[type].props = value;
+            this._settings[type].hidden = 0;
+        }
+        var lastactive = -1,
+        currentactive, priorityactive = -1;
+        for (i = 0; i < this._settings.length; i++) {
+            if (this._settings[i] === undefined) {
+                continue;
+            }
+            if (this._settings[i].hidden) {
+                if (!this._settings[i].btn.isDisabled()) {
+                    this._settings[i].btn.setDisabled(true);
+                }
+                if (this.TabPanel.getLayout().getActiveItem() == this._settings[i].panel) {
+                    currentactive = -1;
+                }
+            } else {
+                if (this._settings[i].btn.isDisabled()) {
+                    this._settings[i].btn.setDisabled(false);
+                }
+                lastactive = i;
+                if (this._settings[i].needShow) {
+                    this._settings[i].needShow = false;
+                    priorityactive = i;
+                } else {
+                    if (this.TabPanel.getLayout().getActiveItem() == this._settings[i].panel) {
+                        currentactive = i;
+                    }
+                }
+            }
+        }
+        if (!this.minimizedMode) {
+            var active;
+            if (priorityactive > -1) {
+                active = priorityactive;
+            } else {
+                if (lastactive >= 0 && currentactive < 0) {
+                    active = lastactive;
+                } else {
+                    if (currentactive >= 0) {
+                        active = currentactive;
+                    }
+                }
+            }
+            if (active !== undefined) {
+                if (!this._settings[active].btn.pressed) {
+                    this._settings[active].btn.toggle();
+                } else {
+                    if (this._settings[active].panel.ChangeSettings) {
+                        this._settings[active].panel.ChangeSettings.call(this._settings[active].panel, this._settings[active].props);
+                    }
+                }
+            }
+        }
+        this._settings[c_oAscTypeSelectElement.Image].needShow = false;
+    },
+    onInsertImage: function () {
+        this._settings[c_oAscTypeSelectElement.Image].needShow = true;
+    },
+    SendThemeColors: function (effectcolors, standartcolors) {
+        this.effectcolors = effectcolors;
+        if (standartcolors && standartcolors.length > 0) {
+            this.standartcolors = standartcolors;
+        }
+        if (this.ShapePanel) {
+            this.ShapePanel.SendThemeColors(effectcolors, standartcolors);
+        }
+    },
+    setApi: function (api) {
+        this.api = api;
+        return this;
+    },
+    setMode: function (mode) {
+        this.editMode = mode.isEdit;
+    },
+    FillAutoShapes: function () {
+        this.ShapePanel.FillAutoShapes();
+    },
+    hideMenus: function () {
+        for (var i = 0; i < this._settings.length; i++) {
+            if (this._settings[i] === undefined) {
+                continue;
+            }
+            if (Ext.isDefined(this._settings[i].panel.hideMenus)) {
+                this._settings[i].panel.hideMenus();
+            }
+        }
+    },
+    updateMetricUnit: function () {
+        this.ImagePanel.updateMetricUnit();
+        this.ParagraphPanel.updateMetricUnit();
+    },
+    _onSelectionChanged: function (info) {
+        var need_disable = info.asc_getLocked();
+        if (this._settings.prevDisabled != need_disable) {
+            this._settings.prevDisabled = need_disable;
+            this._settings.forEach(function (item) {
+                item.panel[need_disable ? "disable" : "enable"]();
+            });
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        me.panelHolder = Ext.create("Ext.container.Container", {
+            layout: {
+                type: "anchor"
+            },
+            items: [me.TabPanel = Ext.create("Ext.panel.Panel", {
+                hidden: true,
+                id: "view-tab-panel",
+                cls: "asc-right-tabpanel",
+                preventHeader: true,
+                layout: "card",
+                items: [me.ShapePanel = Ext.create("SSE.view.ShapeSettings", {
+                    id: "view-shape-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Shape
+                }), me.ImagePanel = Ext.create("SSE.view.ImageSettings", {
+                    id: "view-image-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Image
+                }), me.ParagraphPanel = Ext.create("SSE.view.ParagraphSettings", {
+                    id: "view-paragraph-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Paragraph
+                })],
+                listeners: {
+                    afterlayout: function () {
+                        me.updateScrollPane();
+                    }
+                }
+            })],
+            listeners: {
+                afterlayout: function () {
+                    me.updateScrollPane();
+                }
+            }
+        });
+        me.add(me.panelHolder);
+        me.ShapePanel.setApi(me.api);
+        me.ImagePanel.setApi(me.api);
+        me.ParagraphPanel.setApi(me.api);
+        me.api.asc_registerCallback("asc_onSelectionChanged", Ext.bind(me._onSelectionChanged, me));
+        me._settings = [];
+        me._settings[c_oAscTypeSelectElement.Image] = {
+            panel: me.ImagePanel,
+            btn: me.btnImage,
+            hidden: 1
+        };
+        me._settings[c_oAscTypeSelectElement.Shape] = {
+            panel: me.ShapePanel,
+            btn: me.btnShape,
+            hidden: 1
+        };
+        me._settings[c_oAscTypeSelectElement.Paragraph] = {
+            panel: me.ParagraphPanel,
+            btn: me.btnText,
+            hidden: 1
+        };
+        if (this.effectcolors && this.standartcolors) {
+            this.ShapePanel.SendThemeColors(this.effectcolors, this.standartcolors);
+        }
+    }
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/SetValueDialog.js

@@ -0,0 +1,133 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.SetValueDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.setvaluedialog",
+    requires: ["Ext.window.Window", "Ext.window.MessageBox"],
+    modal: true,
+    resizable: false,
+    plain: true,
+    height: 138,
+    width: 222,
+    padding: "20px",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.udRetValue.focus(false, 500);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this.items = [{
+            xtype: "container",
+            height: 42,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [this.udRetValue = Ext.widget("numberfield", {
+                minValue: 0,
+                maxValue: me.maxvalue,
+                value: me.startvalue,
+                step: 1,
+                flex: 1,
+                allowDecimals: true,
+                validateOnBlur: false,
+                msgTarget: "side",
+                minText: this.txtMinText,
+                maxText: this.txtMaxText,
+                listeners: {
+                    specialkey: function (field, e) {
+                        if (e.getKey() == e.ENTER) {
+                            me.btnOk.fireEvent("click");
+                        } else {
+                            if (e.getKey() == e.ESC) {
+                                me.btnCancel.fireEvent("click");
+                            }
+                        }
+                    }
+                }
+            })]
+        },
+        {
+            xtype: "container",
+            height: 30,
+            layout: {
+                type: "vbox",
+                align: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            if (me.udRetValue.isValid()) {
+                                me.fireEvent("onmodalresult", me, 1, me.udRetValue.value);
+                                me.close();
+                            }
+                        }
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            me.fireEvent("onmodalresult", this, 0);
+                            me.close();
+                        }
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtMinText: "The minimum value for this field is {0}",
+    txtMaxText: "The maximum value for this field is {0}"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/SheetCopyDialog.js

@@ -0,0 +1,152 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.SheetCopyDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.ssesheetcopydialog",
+    requires: ["Ext.window.Window", "Common.plugin.GridScrollPane"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    plain: true,
+    height: 300,
+    width: 280,
+    padding: "20px",
+    layout: "vbox",
+    constrain: true,
+    layoutConfig: {
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.sheetList.getSelectionModel().select(0);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        var _btnOk = Ext.create("Ext.Button", {
+            id: "wscopydialog-button-ok",
+            text: Ext.Msg.buttonText.ok,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    me._modalresult = 1;
+                    me.fireEvent("onmodalresult", me, me._modalresult, me.sheetList.getSelectionModel().selected.items[0].data.sheetindex);
+                    me.close();
+                }
+            }
+        });
+        var _btnCancel = Ext.create("Ext.Button", {
+            id: "wscopydialog-button-cancel",
+            text: me.cancelButtonText,
+            width: 80,
+            cls: "asc-darkgray-button",
+            listeners: {
+                click: function () {
+                    me._modalresult = 0;
+                    me.fireEvent("onmodalresult", this, this._modalresult);
+                    me.close();
+                }
+            }
+        });
+        Ext.define("worksheet", {
+            extend: "Ext.data.Model",
+            fields: [{
+                type: "int",
+                name: "sheetindex"
+            },
+            {
+                type: "string",
+                name: "name"
+            }]
+        });
+        this.sheetList = Ext.create("Ext.grid.Panel", {
+            activeItem: 0,
+            id: "wscopydialog-sheetlist-list",
+            scroll: false,
+            store: {
+                model: "worksheet",
+                data: this.names
+            },
+            columns: [{
+                flex: 1,
+                sortable: false,
+                dataIndex: "name"
+            }],
+            plugins: [{
+                ptype: "gridscrollpane"
+            }],
+            height: 160,
+            width: 240,
+            hideHeaders: true,
+            listeners: {
+                itemdblclick: function (o, record, item, index, e, eOpts) {
+                    _btnOk.fireEvent("click", _btnOk);
+                }
+            }
+        });
+        this.items = [{
+            xtype: "label",
+            text: this.listtitle || this.labelList,
+            width: "100%",
+            style: "text-align:left"
+        },
+        {
+            xtype: "tbspacer",
+            height: 10
+        },
+        this.sheetList, {
+            xtype: "tbspacer",
+            height: 14
+        },
+        {
+            xtype: "container",
+            width: 240,
+            layout: "hbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            items: [{
+                xtype: "tbspacer",
+                flex: 1
+            },
+            _btnOk, {
+                xtype: "tbspacer",
+                width: 5
+            },
+            _btnCancel]
+        }];
+        this.callParent(arguments);
+    },
+    labelList: "Copy before sheet",
+    cancelButtonText: "Cancel"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/SheetRenameDialog.js

@@ -0,0 +1,178 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.SheetRenameDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.ssesheetrenamedialog",
+    requires: ["Ext.window.Window"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    preventHeader: true,
+    plain: true,
+    height: 116,
+    width: 280,
+    padding: "20px",
+    layout: "vbox",
+    constrain: true,
+    layoutConfig: {
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.txtName.focus(true, 100);
+        }
+    },
+    initComponent: function () {
+        this.addEvents("onmodalresult");
+        var me = this;
+        var checkName = function (n) {
+            var ac = me.names.length;
+            while (! (--ac < 0)) {
+                if (me.names[ac] == n) {
+                    return ac == me.renameindex ? -255 : true;
+                }
+            }
+            return false;
+        };
+        var _btnOk = Ext.create("Ext.Button", {
+            id: "wsrenamedialog-button-ok",
+            text: Ext.Msg.buttonText.ok,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    if (
+                    /*me.txtName.getValue().length ||*/
+                    ! me.txtName.isValid()) {} else {
+                        var res = checkName(me.txtName.getValue());
+                        if (res === true) {
+                            Ext.Msg.show({
+                                title: me.errTitle,
+                                msg: me.errNameExists,
+                                icon: Ext.Msg.ERROR,
+                                buttons: Ext.Msg.OK,
+                                fn: function () {
+                                    me.txtName.focus(true, 500);
+                                }
+                            });
+                        } else {
+                            me._modalresult = res == -255 ? 0 : 1;
+                            me.fireEvent("onmodalresult", me, me._modalresult, me.txtName.getValue());
+                            me.close();
+                        }
+                    }
+                }
+            }
+        });
+        var _btnCancel = Ext.create("Ext.Button", {
+            id: "wsrenamedialog-button-cancel",
+            text: me.cancelButtonText,
+            width: 80,
+            cls: "asc-darkgray-button",
+            listeners: {
+                click: function () {
+                    me._modalresult = 0;
+                    me.fireEvent("onmodalresult", me, me._modalresult);
+                    me.close();
+                }
+            }
+        });
+        this.txtName = Ext.create("Ext.form.Text", {
+            id: "wsrenamedialog-text-wsname",
+            width: 240,
+            msgTarget: "side",
+            validateOnBlur: false,
+            allowBlank: false,
+            value: this.names[this.renameindex],
+            enforceMaxLength: true,
+            maxLength: 31,
+            validator: function (value) {
+                if (value.length > 2 && value[0] == '"' && value[value.length - 1] == '"') {
+                    return true;
+                }
+                if (!/[:\\\/\*\?\[\]\']/.test(value)) {
+                    return true;
+                } else {
+                    return me.errNameWrongChar;
+                }
+            },
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        _btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            _btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.items = [{
+            xtype: "label",
+            text: this.labelSheetName,
+            width: "100%",
+            style: "text-align:left"
+        },
+        {
+            xtype: "tbspacer",
+            height: 4
+        },
+        this.txtName, {
+            xtype: "tbspacer",
+            height: 4
+        },
+        {
+            xtype: "container",
+            width: 240,
+            layout: "hbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            items: [{
+                xtype: "tbspacer",
+                flex: 1
+            },
+            _btnOk, {
+                xtype: "tbspacer",
+                width: 5
+            },
+            _btnCancel]
+        }];
+        this.callParent(arguments);
+    },
+    labelSheetName: "Sheet Name",
+    errTitle: "Error",
+    errNameExists: "Worksheet with such name already exist.",
+    errNameWrongChar: "A sheet name cannot contain characters: \\/*?[]:",
+    cancelButtonText: "Cancel"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/TableOptionsDialog.js

@@ -0,0 +1,149 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("SSE.view.TableOptionsDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.tableoptionsdialog",
+    requires: ["Ext.window.Window"],
+    closable: true,
+    resizable: false,
+    height: 145,
+    width: 300,
+    padding: "12px 20px 0 20px",
+    constrain: true,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            var options = this.api.asc_getAddFormatTableOptions();
+            this.txtDataRange.setValue(options.asc_getRange());
+            this.chTitle.setValue(options.asc_getIsTitle());
+            this.api.asc_setSelectionDialogMode(true, options.asc_getRange());
+        },
+        beforedestroy: function () {
+            this.api.asc_setSelectionDialogMode(false);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        var worksheets = "",
+        names = this.names;
+        if (names) {
+            worksheets = names[0];
+            var i = names.length;
+            while (--i) {
+                worksheets += ("|" + names[i]);
+            }
+        }
+        var longRe = new RegExp(worksheets + "![A-Z]+[1-9]\d*:[A-Z]+[1-9]\d*");
+        var shortRe = new RegExp(worksheets + "![A-Z]+[1-9]\d*");
+        this.txtDataRange = Ext.create("Ext.form.Text", {
+            height: 22,
+            msgTarget: "side",
+            validateOnBlur: false,
+            allowBlank: false,
+            value: "",
+            editable: false,
+            check: false,
+            validator: function (value) {
+                if (!this.check) {
+                    return true;
+                }
+                var isvalid = longRe.test(value); ! isvalid && (isvalid = shortRe.test(value));
+                if (isvalid) {
+                    $("#" + this.id + " input").css("color", "black");
+                    return true;
+                } else {
+                    $("#" + this.id + " input").css("color", "red");
+                    return "ERROR! Invalid cells range";
+                }
+            }
+        });
+        this.chTitle = Ext.widget("checkbox", {
+            style: "margin: 0 26px 0 0",
+            boxLabel: this.txtTitle
+        });
+        var _btnOk = Ext.create("Ext.Button", {
+            text: Ext.Msg.buttonText.ok,
+            width: 80,
+            style: "margin: 0 6px 0 0;",
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    if (me.txtDataRange.validate()) {
+                        me.fireEvent("onmodalresult", me, 1, me.getSettings());
+                        me.close();
+                    }
+                }
+            }
+        });
+        var _btnCancel = Ext.create("Ext.Button", {
+            text: this.textCancel,
+            width: 80,
+            cls: "asc-darkgray-button",
+            listeners: {
+                click: function () {
+                    me.close();
+                }
+            }
+        });
+        this.items = [this.txtDataRange, this.chTitle, {
+            xtype: "container",
+            height: 26,
+            style: "margin: 8px 0 0 0;",
+            layout: {
+                type: "hbox",
+                align: "stretch",
+                pack: "end"
+            },
+            items: [_btnOk, _btnCancel]
+        }];
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onSelectionRangeChanged", Ext.bind(this._onRangeChanged, this));
+        }
+        this.callParent(arguments);
+        this.setTitle(this.txtFormat);
+    },
+    _onRangeChanged: function (info) {
+        this.txtDataRange.setValue(info);
+    },
+    getSettings: function () {
+        var options = this.api.asc_getAddFormatTableOptions();
+        options.asc_setRange(this.txtDataRange.getValue());
+        options.asc_setIsTitle(this.chTitle.getValue());
+        return options;
+    },
+    txtTitle: "Title",
+    txtFormat: "Format as table",
+    textCancel: "Cancel"
+});

OfficeWeb/apps/spreadsheeteditor/main/app/view/Viewport.js

@@ -0,0 +1,312 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ window.cancelButtonText = "Cancel";
+Ext.define("SSE.view.Viewport", {
+    extend: "Ext.container.Viewport",
+    alias: "widget.sseviewport",
+    layout: "fit",
+    uses: ["SSE.view.DocumentHolder", "SSE.view.MainMenu", "SSE.view.File", "SSE.view.DocumentStatusInfo", "SSE.view.CellInfo", "Common.view.ChatPanel", "Common.view.CommentsPanel", "Common.view.Header", "SSE.view.Toolbar", "Common.view.SearchDialog", "Common.view.About", "SSE.view.RightMenu"],
+    initComponent: function () {
+        this.header = Ext.widget("commonheader", {
+            config: {
+                headerCaption: "Spreadsheet Editor"
+            }
+        });
+        this.applicationUI = Ext.widget("container", {
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            flex: 1,
+            hidden: true,
+            items: [{
+                xtype: "container",
+                flex: 1,
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "ssemainmenu",
+                    id: "view-main-menu",
+                    maxWidth: 600,
+                    listeners: {
+                        panelshow: function (panel, fulscreen) {
+                            if (fulscreen) {
+                                var menu = Ext.getCmp("view-main-menu");
+                                menu.clearSelection({
+                                    id: menu.currentFullScaleMenuBtn.id
+                                });
+                            }
+                        }
+                    },
+                    buttonCollection: [{
+                        cls: "menuFile",
+                        tooltip: this.tipFile + " (Alt+F)",
+                        id: "id-menu-file",
+                        scale: "full",
+                        disabled: true,
+                        items: [{
+                            xtype: "ssefile",
+                            id: "main-menu-file-options",
+                            width: "100%",
+                            height: "100%"
+                        }]
+                    },
+                    {
+                        cls: "menuSearch",
+                        scale: "modal",
+                        id: "main-menu-search",
+                        disabled: true,
+                        tooltip: this.tipSearch + " (Ctrl+F)"
+                    },
+                    {
+                        cls: "menuComments",
+                        id: "id-menu-comments",
+                        hideMode: "display",
+                        scale: 300,
+                        tooltip: this.tipComments + " (Ctrl+Shift+H)",
+                        disabled: true,
+                        items: [{
+                            xtype: "commoncommentspanel",
+                            height: "100%"
+                        }]
+                    },
+                    {
+                        cls: "menuChat",
+                        id: "id-menu-chat",
+                        scale: 300,
+                        tooltip: this.tipChat + " (Ctrl+Alt+Q)",
+                        disabled: true,
+                        items: [{
+                            xtype: "commonchatpanel",
+                            height: "100%"
+                        }]
+                    },
+                    {
+                        cls: "menuAbout",
+                        id: "id-menu-about",
+                        tooltip: "About",
+                        scale: "full",
+                        disabled: true,
+                        items: [{
+                            xtype: "commonabout",
+                            id: "main-menu-about",
+                            width: "100%",
+                            height: "100%"
+                        }]
+                    }]
+                },
+                {
+                    xtype: "splitter",
+                    id: "main-menu-splitter",
+                    cls: "splitter-document-area",
+                    defaultSplitMin: 300,
+                    hidden: true
+                },
+                {
+                    xtype: "container",
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    maintainFlex: true,
+                    flex: 1,
+                    items: [{
+                        xtype: "ssecellinfo",
+                        id: "cell-edit",
+                        style: "border-left:solid 1px #afafaf;"
+                    },
+                    {
+                        xtype: "splitter",
+                        id: "field-formula-splitter",
+                        defaultSplitMin: 23,
+                        cls: "splitter-document-area"
+                    },
+                    {
+                        id: "editor_sdk",
+                        minHeight: 70,
+                        xtype: "ssedocumentholder",
+                        maintainFlex: true,
+                        flex: 1
+                    }]
+                }]
+            },
+            {
+                xtype: "documentstatusinfo",
+                id: "view-status"
+            }]
+        });
+        this.items = {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [this.header, this.applicationUI]
+        };
+        Ext.tip.QuickTipManager.init();
+        this.callParent(arguments);
+    },
+    applyMode: function () {
+        this.hkSaveAs[this.mode.canDownload ? "enable" : "disable"]();
+        this.hkChat[this.mode.canCoAuthoring ? "enable" : "disable"]();
+        this.hkComments[(this.mode.canCoAuthoring && this.mode.isEdit) ? "enable" : "disable"]();
+    },
+    setMode: function (m, delay) {
+        m.isDisconnected ? this.mode.canDownload = this.mode.canCoAuthoring = false : this.mode = m;
+        if (!delay) {
+            this.applyMode();
+        }
+    },
+    applyEditorMode: function () {
+        var me = this;
+        me._toolbar = Ext.widget("ssetoolbar", {
+            id: "view-toolbar"
+        });
+        me._rightMenu = Ext.widget("sserightmenu", {
+            id: "view-right-menu"
+        });
+        me.applicationUI.insert(0, me._toolbar);
+        me.applicationUI.items.items[1].add(me._rightMenu);
+        me._toolbar.setVisible(true);
+    },
+    createDelayedElements: function () {
+        var _self = this;
+        this.hotKeys = new Ext.util.KeyMap(document, [{
+            key: "f",
+            ctrl: true,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (canHotKey()) {
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuSearch");
+                    }
+                }
+            }
+        },
+        {
+            key: [Ext.EventObject.PAGE_DOWN, Ext.EventObject.PAGE_UP],
+            ctrl: false,
+            shift: false,
+            alt: true,
+            defaultEventAction: "stopEvent",
+            fn: function (key, event) {
+                if (canHotKey()) {
+                    var cmp = Ext.getCmp("view-status");
+                    if (cmp) {
+                        cmp.setActiveWorksheet(undefined, key == event.PAGE_DOWN ? ACTIVE_TAB_NEXT : ACTIVE_TAB_PREV);
+                    }
+                }
+            }
+        },
+        {
+            key: "f",
+            alt: true,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (canHotKey()) {
+                    Ext.menu.Manager.hideAll();
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuFile");
+                    }
+                }
+            }
+        }]);
+        this.hkSaveAs = new Ext.util.KeyMap(document, {
+            key: "s",
+            ctrl: true,
+            shift: true,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (canHotKey()) {
+                    Ext.menu.Manager.hideAll();
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuFile");
+                    }
+                }
+            }
+        });
+        this.hkHelp = new Ext.util.KeyMap(document, {
+            key: Ext.EventObject.F1,
+            ctrl: false,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            scope: this,
+            fn: function () {
+                if (canHotKey()) {
+                    Ext.menu.Manager.hideAll();
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuFile");
+                    }
+                }
+            }
+        });
+        this.hkChat = new Ext.util.KeyMap(document, {
+            key: "q",
+            ctrl: true,
+            alt: true,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (canHotKey()) {
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuChat");
+                    }
+                }
+            }
+        });
+        this.hkComments = new Ext.util.KeyMap(document, {
+            key: "H",
+            ctrl: true,
+            shift: true,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (canHotKey()) {
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuComments");
+                    }
+                }
+            }
+        });
+    },
+    tipChat: "Chat",
+    tipComments: "Comments",
+    tipFile: "File",
+    tipSearch: "Search"
+});