Upgrade to ExtJS 3.1.0 - Released 12/16/2009

[extjs.git] / examples / locale / multi-lang.js

diff --git a/examples/locale/multi-lang.js b/examples/locale/multi-lang.js
index f28e1d9..222a306 100644 (file)
--- a/examples/locale/multi-lang.js
+++ b/examples/locale/multi-lang.js
@@ -1,127 +1,149 @@
 /*!
 /*!

- * Ext JS Library 3.0.3
+ * Ext JS Library 3.1.0

  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
  */

-Ext.onReady(function(){
-    Ext.QuickTips.init();
-    Ext.form.Field.prototype.msgTarget = 'side';
-
-    /* Language chooser combobox  */
-    var store = new Ext.data.ArrayStore({
-        fields: ['code', 'language', 'charset'],
-        data : Ext.exampledata.languages // from languages.js
-    });
-    var combo = new Ext.form.ComboBox({
-        store: store,
-        displayField:'language',
-        typeAhead: true,
-        mode: 'local',
-        triggerAction: 'all',
-        emptyText: 'Select a language...',
-        selectOnFocus: true,
-        onSelect: function(record) {
-            window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
-        }
-    });
-    combo.render('languages');
-
+MultiLangDemo = function() {

     // get the selected language code parameter from url (if exists)
     var params = Ext.urlDecode(window.location.search.substring(1));
     // get the selected language code parameter from url (if exists)
     var params = Ext.urlDecode(window.location.search.substring(1));

-    \r
-    if (params.lang) {\r
-        // check if there's really a language with that language code\r
-        record = store.data.find(function(item, key){\r
-            if (item.data.code == params.lang) {\r
-                return true;\r
-            }\r
-            return false;\r
-        });\r
-        // if language was found in store assign it as current value in combobox\r
-        if (record) {\r
-            combo.setValue(record.data.language);\r
-        }\r
-    }\r
-
-    /* Email field */
-    var emailfield = new Ext.FormPanel({
-        labelWidth: 100, // label settings here cascade unless overridden
-        frame: true,
-        title: 'Email Field',
-        bodyStyle: 'padding:5px 5px 0',
-        width: 360,
-        defaults: {width: 220},
-        defaultType: 'textfield',
-
-        items: [
-            {
-                fieldLabel: 'Email',
-                name: 'email',
-                vtype: 'email'
-            }
-        ]
-    });
-    emailfield.render('emailfield');
-
-    /* Datepicker */
-    var datefield = new Ext.FormPanel({
-        labelWidth: 100, // label settings here cascade unless overridden
-        frame: true,
-        title: 'Datepicker',
-        bodyStyle: 'padding:5px 5px 0',
-        width: 360,
-        defaults: {width: 220},
-        defaultType: 'datefield',
-        items: [
-            {
-                fieldLabel: 'Date',
-                name: 'date'
+    Ext.form.Field.prototype.msgTarget = 'side';
+                
+    return {
+        init: function() {
+            Ext.QuickTips.init();
+            
+            /* Language chooser combobox  */
+            var store = new Ext.data.ArrayStore({
+                fields: ['code', 'language', 'charset'],
+                data : Ext.exampledata.languages // from languages.js
+            });
+            var combo = new Ext.form.ComboBox({
+                renderTo: 'languages',
+                store: store,
+                displayField:'language',
+                typeAhead: true,
+                mode: 'local',
+                triggerAction: 'all',
+                emptyText: 'Select a language...',
+                selectOnFocus: true,
+                onSelect: function(record) {
+                    window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
+                }
+            });
+        
+            if (params.lang) {
+                // check if there's really a language with that language code
+                record = store.data.find(function(item, key){
+                    if (item.data.code == params.lang) {
+                        return true;
+                    }
+                    return false;
+                });
+                // if language was found in store assign it as current value in combobox
+                if (record) {
+                    combo.setValue(record.data.language);
+                }
+            }            
+            
+            if (params.lang) {
+                var url = String.format("../../src/locale/ext-lang-{0}.js", params.lang);
+                
+                Ext.Ajax.request({
+                    url: url,
+                    success: this.onSuccess,
+                    failure: this.onFailure,
+                    scope: this 
+                });
+            } else {
+                this.setupDemo();

             }
             }

-        ]
-    });
-    datefield.render('datefield');
-
-    // shorthand alias
-    var fm = Ext.form, Ed = Ext.grid.GridEditor;
-
-    var monthArray = Date.monthNames.map(function (e) { return [e]; });
-
-    var ds = new Ext.data.Store({
-        proxy: new Ext.ux.data.PagingMemoryProxy(monthArray),
-        reader: new Ext.data.ArrayReader({}, [
-            {name: 'month'}
-        ])
-    });
-
-    var cm = new Ext.grid.ColumnModel([{
-           header: "Months of the year",
-           dataIndex: 'month',
-           editor: new Ed(new fm.TextField({
-               allowBlank: false
-           })),
-           width: 240
-        }]);
-
-    cm.defaultSortable = true;
-
-    var grid = new Ext.grid.GridPanel({
-    width: 360,
-    height: 203,
-    title:'Month Browser',
-    store: ds,
-    cm: cm,
-    sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
-
-    bbar: new Ext.PagingToolbar({
-            pageSize: 6,
-            store: ds,
-            displayInfo: true
-        })
-    });
+        },
+        onSuccess: function(response, opts) {
+            eval(response.responseText);
+            this.setupDemo();
+        },
+        onFailure: function() {
+            Ext.Msg.alert('Failure', 'Failed to load locale file.');
+            this.setupDemo();
+        },
+        setupDemo: function() {
+            /* Email field */
+            var emailfield = new Ext.FormPanel({
+                renderTo: 'emailfield',
+                labelWidth: 100, // label settings here cascade unless overridden
+                frame: true,
+                title: 'Email Field',
+                bodyStyle: 'padding:5px 5px 0',
+                width: 360,
+                defaults: {width: 220},
+                defaultType: 'textfield',
+        
+                items: [{
+                    fieldLabel: 'Email',
+                    name: 'email',
+                    vtype: 'email'
+                }]
+            });
+            
+            /* Datepicker */
+            var datefield = new Ext.FormPanel({
+                renderTo: 'datefield',
+                labelWidth: 100, // label settings here cascade unless overridden
+                frame: true,
+                title: 'Datepicker',
+                bodyStyle: 'padding:5px 5px 0',
+                width: 360,
+                defaults: {width: 220},
+                defaultType: 'datefield',
+                items: [{
+                    fieldLabel: 'Date',
+                    name: 'date'
+                }]
+            });
+            
+            // shorthand alias
+            var fm = Ext.form, Ed = Ext.grid.GridEditor;
+        
+            var monthArray = Date.monthNames.map(function (e) { return [e]; });
+        
+            var ds = new Ext.data.Store({
+                proxy: new Ext.ux.data.PagingMemoryProxy(monthArray),
+                reader: new Ext.data.ArrayReader({}, [
+                    {name: 'month'}
+                ])
+            });
+        
+            var cm = new Ext.grid.ColumnModel([{
+                header: "Months of the year",
+                dataIndex: 'month',
+                editor: new Ed(new fm.TextField({
+                    allowBlank: false
+                })),
+                width: 240,
+                defaultSortable: true
+            }]);
+        
+            var grid = new Ext.grid.GridPanel({
+                renderTo: 'grid',
+                width: 360,
+                height: 203,
+                title:'Month Browser',
+                store: ds,
+                cm: cm,
+                sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
+            
+                bbar: new Ext.PagingToolbar({
+                        pageSize: 6,
+                        store: ds,
+                        displayInfo: true
+                })
+            });
+            
+            // trigger the data store load
+            ds.load({params:{start:0, limit:6}});            
+        }
+    };

     
     

-    grid.render('grid');
-
-    // trigger the data store load
-    ds.load({params:{start:0, limit:6}});
-});
\ No newline at end of file
+}();
+Ext.onReady(MultiLangDemo.init, MultiLangDemo);
\ No newline at end of file