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

https://bitbucket.org/srogerf/javascript · JavaScript · 157 lines · 134 code · 14 blank · 9 comment · 4 complexity · bf09466c43f6e11f404745e23b9fcd34 MD5 · raw file

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