docs/source/multi-lang.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.onReady(function(){
   9     Ext.QuickTips.init();
  10     Ext.form.Field.prototype.msgTarget = 'side';
  11
  12     /* Language chooser combobox  */
  13     var store = new Ext.data.ArrayStore({
  14         fields: ['code', 'language', 'charset'],
  15         data : Ext.exampledata.languages // from languages.js
  16     });
  17     var combo = new Ext.form.ComboBox({
  18         store: store,
  19         displayField:'language',
  20         typeAhead: true,
  21         mode: 'local',
  22         triggerAction: 'all',
  23         emptyText: 'Select a language...',
  24         selectOnFocus: true,
  25         onSelect: function(record) {
  26             window.location.search = Ext.urlEncode({"lang":record.get("code"),"charset":record.get("charset")});
  27         }
  28     });
  29     combo.render('languages');
  30
  31     // get the selected language code parameter from url (if exists)
  32     var params = Ext.urlDecode(window.location.search.substring(1));
  33     \r
  34     if (params.lang) {\r
  35         // check if there's really a language with that language code\r
  36         record = store.data.find(function(item, key){\r
  37             if (item.data.code == params.lang) {\r
  38                 return true;\r
  39             }\r
  40             return false;\r
  41         });\r
  42         // if language was found in store assign it as current value in combobox\r
  43         if (record) {\r
  44             combo.setValue(record.data.language);\r
  45         }\r
  46     }\r
  47
  48     /* Email field */
  49     var emailfield = new Ext.FormPanel({
  50         labelWidth: 100, // label settings here cascade unless overridden
  51         frame: true,
  52         title: 'Email Field',
  53         bodyStyle: 'padding:5px 5px 0',
  54         width: 360,
  55         defaults: {width: 220},
  56         defaultType: 'textfield',
  57
  58         items: [
  59             {
  60                 fieldLabel: 'Email',
  61                 name: 'email',
  62                 vtype: 'email'
  63             }
  64         ]
  65     });
  66     emailfield.render('emailfield');
  67
  68     /* Datepicker */
  69     var datefield = new Ext.FormPanel({
  70         labelWidth: 100, // label settings here cascade unless overridden
  71         frame: true,
  72         title: 'Datepicker',
  73         bodyStyle: 'padding:5px 5px 0',
  74         width: 360,
  75         defaults: {width: 220},
  76         defaultType: 'datefield',
  77         items: [
  78             {
  79                 fieldLabel: 'Date',
  80                 name: 'date'
  81             }
  82         ]
  83     });
  84     datefield.render('datefield');
  85
  86     // shorthand alias
  87     var fm = Ext.form, Ed = Ext.grid.GridEditor;
  88
  89     var monthArray = Date.monthNames.map(function (e) { return [e]; });
  90
  91     var ds = new Ext.data.Store({
  92         proxy: new Ext.ux.data.PagingMemoryProxy(monthArray),
  93         reader: new Ext.data.ArrayReader({}, [
  94             {name: 'month'}
  95         ])
  96     });
  97
  98     var cm = new Ext.grid.ColumnModel([{
  99            header: "Months of the year",
 100            dataIndex: 'month',
 101            editor: new Ed(new fm.TextField({
 102                allowBlank: false
 103            })),
 104            width: 240
 105         }]);
 106
 107     cm.defaultSortable = true;
 108
 109     var grid = new Ext.grid.GridPanel({
 110     width: 360,
 111     height: 203,
 112     title:'Month Browser',
 113     store: ds,
 114     cm: cm,
 115     sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
 116
 117     bbar: new Ext.PagingToolbar({
 118             pageSize: 6,
 119             store: ds,
 120             displayInfo: true
 121         })
 122     });
 123
 124     grid.render('grid');
 125
 126     // trigger the data store load
 127     ds.load({params:{start:0, limit:6}});
 128 });</pre>    \r
 129 </body>\r
 130 </html>