Implement settings window in external file

application/views/header.php

@@ -15,6 +15,7 @@
   var BASE_PATH = '<?=base_url();?>';
   </script>
   <?=script_tag('assets/js/language/' . $this->config->item('language') . '.js');?>
+  <?=script_tag('assets/js/SettingsWindow.js');?>
   <?=script_tag('assets/js/common.js');?>
 </head>
 

assets/js/SettingsWindow.js

@@ -0,0 +1,97 @@
+/**
+ * Generates the settings window.
+ * 
+ * @class SettingsWindow
+ * @extends Ext.Window
+ */
+SettingsWindow = Ext.extend(Ext.Window, {
+    title: lang['settings_window_title'],
+    id: 'settings-window',
+    width: 400,
+    autoHeight: true,
+    closeAction: 'hide',
+    draggable: false,
+    resizable: false,
+    modal: true,
+    initComponent: function() {
+        this.items = [{
+            xtype: 'form',
+            id: 'settings-form',
+            url: BASE_URL + 'auth/settings',
+            method: 'POST',
+            border: false,
+            items: [{
+                xtype: 'tabpanel',
+                border: false,
+                activeTab: 0,
+                defaults: {
+                    layout: 'form',
+                    defaultType: 'textfield',
+                    labelWidth: 170,
+                    autoHeight: true,
+                    bodyStyle: 'padding: 10px'
+                },
+                items: [{
+                    xtype: 'panel',
+                    id: 'password',
+                    title: lang['settings_window_panel_password'],
+                    items: [{
+                        fieldLabel: lang['settings_window_old_password'],
+                        name: 'old_password'
+                    }, {
+                        fieldLabel: lang['settings_window_new_password'],
+                        name: 'new_password'
+                    }, {
+                        fieldLabel: lang['settings_window_new_password_confirm'],
+                        name: 'new_password_confirm'
+                    }]
+                }, {
+                    xtype: 'panel',
+                    title: lang['settings_window_panel_profile'],
+                    items: [{
+                        fieldLabel: lang['settings_window_firstname'],
+                        name: 'firstname'
+                    }, {
+                        fieldLabel: lang['settings_window_lastname'],
+                        name: 'lastname'
+                    }, {
+                        fieldLabel: lang['settings_window_institution'],
+                        name: 'institution'
+                    }, {
+                        fieldLabel: lang['settings_window_phone'],
+                        name: 'phone'
+                    }, {
+                        fieldLabel: lang['settings_window_email'],
+                        name: 'email'
+                    }]
+                }]
+            }],
+            buttons: [{
+                text: lang['settings_window_save'],
+                handler: function() {
+                    Ext.getCmp('settings-form').getForm().submit();
+                }
+            }, {
+                text: lang['settings_window_close'],
+                handler: function() {
+                    this.hide();
+                }
+            }]
+        }];
+
+        // call parent
+        SettingsWindow.superclass.initComponent.apply(this);
+    },
+    beforeShow: function() {
+        Ext.getCmp('settings-form').load({
+            url : BASE_URL + 'auth/settings',
+            waitMsg: "Lade..."
+        });
+
+        // call parent
+        SettingsWindow.superclass.beforeShow.apply(this);
+    }
+});
+
+// register xtype to allow for lazy initialization
+Ext.reg('settingswindow', SettingsWindow);

assets/js/common.js

@@ -13,97 +13,13 @@ var message = function(title, message, icon) {
         icon: Ext.Msg.ERROR,
         buttons: Ext.Msg.OK
     });
-}
+};
 
-settings = new Ext.Window({
+var settings = new SettingsWindow();
-    layout: 'fit',
-    title: lang['settings_window_title'],
-    id: 'settings-window',
-    width: 400,
-    height: 300,
-    closeAction: 'hide',
-    draggable: false,
-    resizable: false,
-    modal: true,
-    items: new Ext.FormPanel({
-        id: 'settings-form',
-        url: BASE_URL + 'auth/settings',
-        method: 'POST',
-        border: false,
-        items: [{
-            xtype: 'tabpanel',
-            border: false,
-            activeTab: 0,
-            defaults: {
-                layout: 'form',
-                defaultType: 'textfield',
-                labelWidth: 200,
-                autoHeight: true,
-                bodyStyle: 'padding: 10px'
-            },
-            items: [{
-				xtype: 'panel',
-				id: 'password',
-				title: "Passwort",
-				items: [{
-				    fieldLabel: "Altes Passwort",
-				    name: 'old_password'
-				}, {
-				    fieldLabel: "Neues Passwort",
-				    name: 'new_password'
-				}, {
-				    fieldLabel: "Neues Passwort wiederholen",
-				    name: 'new_password_confirm'
-				}]
-		    }, {
-                xtype: 'panel',
-                title: "Profil",
-                items: [{
-                    fieldLabel: "Vorname"
-                }, {
-                    fieldLabel: "Nachname"
-                }, {
-                    fieldLabel: "Firma"
-                }, {
-                    fieldLabel: "Telefonnummer"
-                }, {
-                    fieldLabel: "E-Mail-Adresse"
-                }]
-            }]
-        }],
-        buttons: [{
-            text: lang['settings_window_save'],
-            handler: function() {
-                Ext.getCmp('settings-form').getForm().submit();
-            }
-        }, {
-            text: lang['settings_window_close'],
-            handler: function() {
-                settings.hide();
-            }
-        }]
-    })
-});
-
-/*var extender = Ext.getCmp("settings-tabs");
-
-settings.on('beforeshow', function() {
-    extender.removeAll();
-
-    Ext.Ajax.request({
-        url : BASE_URL + 'auth/change_password',
-        success: function(result) {
-            extender.add(Ext.util.JSON.decode(result.responseText));
-            extender.setActiveTab(0);
-        }
-    });
-
-    settings.doLayout();
-});*/
 
 /**
- * Initialize tooltips.
+ * Application main entry point
  */
-$(document).ready(function() {
+Ext.onReady(function() {
     Ext.QuickTips.init();
 });

assets/js/language/english.js

@@ -1,5 +1,15 @@
 var lang = {
     settings_window_title: "Settings",
     settings_window_save: "Save",
-    settings_window_close: "Close"
+    settings_window_close: "Close",
+    settings_window_panel_password: "Password",
+    settings_window_panel_profile: "Profile",
+    settings_window_old_password: "Old password",
+    settings_window_new_password: "New password",
+    settings_window_new_password_confirm: "Confirm new password",
+    settings_window_firstname: "Firstname",
+    settings_window_lastname: "Lastname",
+    settings_window_institution: "Company",
+    settings_window_phone: "Phone",
+    settings_window_email: "Email address"
 };

assets/js/language/german.js

@@ -1,5 +1,15 @@
 var lang = {
     settings_window_title: "Einstellungen",
     settings_window_save: "Speichern",
-    settings_window_close: "Schließen"
+    settings_window_close: "Schließen",
+    settings_window_panel_password: "Passwort",
+    settings_window_panel_profile: "Profil",
+    settings_window_old_password: "Altes Passwort",
+    settings_window_new_password: "Neues Passwort",
+    settings_window_new_password_confirm: "Neues Passwort wiederholen",
+    settings_window_firstname: "Vorname",
+    settings_window_lastname: "Nachname",
+    settings_window_institution: "Institut",
+    settings_window_phone: "Telefon",
+    settings_window_email: "E-Mail-Adresse"
 };