/ext-4.1.0_b3/examples/locale/multi-lang.js

  1Ext.Loader.setConfig({enabled: true});
  2
  3Ext.Loader.setPath('Ext.ux', '../ux/');
  4
  5Ext.require([
  6    'Ext.data.*',
  7    'Ext.tip.QuickTipManager',
  8    'Ext.form.*',
  9    'Ext.ux.data.PagingMemoryProxy',
 10    'Ext.grid.Panel'
 11]);
 12
 13Ext.onReady(function(){
 14    MultiLangDemo = (function() {
 15        // get the selected language code parameter from url (if exists)
 16        var params = Ext.urlDecode(window.location.search.substring(1));
 17        //Ext.form.Field.prototype.msgTarget = 'side';
 18                
 19        return {
 20            init: function() {
 21                Ext.tip.QuickTipManager.init();
 22            
 23                /* Language chooser combobox  */
 24                var store = Ext.create('Ext.data.ArrayStore', {
 25                    fields: ['code', 'language', 'charset'],
 26                    data : Ext.exampledata.languages // from languages.js
 27                });
 28                
 29                var combo = Ext.create('Ext.form.field.ComboBox', {
 30                    renderTo: 'languages',
 31                    store: store,
 32                    displayField:'language',
 33                    queryMode: 'local',
 34                    emptyText: 'Select a language...',
 35                    hideLabel: true,
 36                    listeners: {
 37                        select: {
 38                            fn: function(cb, records) {
 39                                var record = records[0];
 40                                window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
 41                            },
 42                            scope: this
 43                        }
 44                    }
 45                });
 46        
 47                if (params.lang) {
 48                    // check if there's really a language with that language code
 49                    var record = store.findRecord('code', params.lang, null, null, null, true);
 50                    // if language was found in store assign it as current value in combobox
 51                    if (record) {
 52                        combo.setValue(record.data.language);
 53                    }
 54                }            
 55            
 56                if (params.lang) {
 57                    var url = Ext.util.Format.format("../../locale/ext-lang-{0}.js", params.lang);
 58                
 59                    Ext.Ajax.request({
 60                        url: url,
 61                        success: this.onSuccess,
 62                        failure: this.onFailure,
 63                        scope: this 
 64                    });
 65                } else {
 66                    this.setupDemo();
 67                }
 68            },
 69            onSuccess: function(response, opts) {
 70                eval(response.responseText);
 71                this.setupDemo();
 72            },
 73            onFailure: function() {
 74                Ext.Msg.alert('Failure', 'Failed to load locale file.');
 75                this.setupDemo();
 76            },
 77            setupDemo: function() {
 78                /* Email field */
 79                Ext.create('Ext.FormPanel', {
 80                    renderTo: 'emailfield',
 81                    labelWidth: 100, // label settings here cascade unless overridden
 82                    frame: true,
 83                    title: 'Email Field',
 84                    bodyStyle: 'padding:5px 5px 0',
 85                    width: 380,
 86                    defaults: {
 87                        msgTarget: 'side',
 88                        width: 340
 89                    },
 90                    defaultType: 'textfield',
 91                    items: [{
 92                        fieldLabel: 'Email',
 93                        name: 'email',
 94                        vtype: 'email'
 95                    }]
 96                });
 97            
 98                /* Datepicker */
 99                Ext.create('Ext.FormPanel', {
100                    renderTo: 'datefield',
101                    labelWidth: 100, // label settings here cascade unless overridden
102                    frame: true,
103                    title: 'Datepicker',
104                    bodyStyle: 'padding:5px 5px 0',
105                    width: 380,
106                    defaults: {
107                        msgTarget: 'side',
108                        width: 340
109                    },
110                    defaultType: 'datefield',
111                    items: [{
112                        fieldLabel: 'Date',
113                        name: 'date'
114                    }]
115                });
116            
117                // shorthand alias                
118                var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
119                var ds = Ext.create('Ext.data.Store', {
120                     fields: ['month'],
121                     remoteSort: true,
122                     pageSize: 6,
123                     proxy: {
124                         type: 'pagingmemory',
125                         data: monthArray,
126                         reader: {
127                             type: 'array'
128                         }
129                     }
130                 });
131                             
132                 Ext.create('Ext.grid.Panel', {
133                     renderTo: 'grid',
134                     width: 380,
135                     height: 203,
136                     title:'Month Browser',
137                     columns:[{
138                         text: 'Month of the year',
139                         dataIndex: 'month',
140                         width: 240 
141                     }],
142                     store: ds,            
143                     bbar: Ext.create('Ext.toolbar.Paging', {
144                             pageSize: 6,
145                             store: ds,
146                             displayInfo: true
147                     })
148                 });
149            
150                // trigger the data store load
151                ds.load();            
152            }
153        };
154    
155    })();
156    MultiLangDemo.init();
157});