vbox-form.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux', '../ux/');
  3. Ext.require([
  4. 'Ext.form.*',
  5. 'Ext.window.Window',
  6. 'Ext.data.*',
  7. 'Ext.ux.FieldReplicator'
  8. ]);
  9. Ext.onReady(function() {
  10. var form = Ext.create('Ext.form.Panel', {
  11. plain: true,
  12. border: 0,
  13. bodyPadding: 5,
  14. url: 'save-form.php',
  15. fieldDefaults: {
  16. labelWidth: 55,
  17. anchor: '100%'
  18. },
  19. layout: {
  20. type: 'vbox',
  21. align: 'stretch' // Child items are stretched to full width
  22. },
  23. items: [{
  24. xtype: 'combo',
  25. store: Ext.create('Ext.data.ArrayStore', {
  26. fields: [ 'email' ],
  27. data: [
  28. ['test@example.com'],
  29. ['someone@example.com'],
  30. ['someone-else@example.com']
  31. ]
  32. }),
  33. displayField: 'email',
  34. plugins: [ Ext.ux.FieldReplicator ],
  35. fieldLabel: 'Send To',
  36. queryMode: 'local',
  37. selectOnTab: false,
  38. name: 'to',
  39. onReplicate: function(){
  40. this.getStore().clearFilter();
  41. }
  42. }, {
  43. xtype: 'textfield',
  44. fieldLabel: 'Subject',
  45. name: 'subject'
  46. }, {
  47. xtype: 'textarea',
  48. fieldLabel: 'Message text',
  49. hideLabel: true,
  50. name: 'msg',
  51. style: 'margin:0', // Remove default margin
  52. flex: 1 // Take up all *remaining* vertical space
  53. }]
  54. });
  55. var win = Ext.create('Ext.window.Window', {
  56. title: 'Compose message',
  57. collapsible: true,
  58. animCollapse: true,
  59. maximizable: true,
  60. width: 750,
  61. height: 500,
  62. minWidth: 300,
  63. minHeight: 200,
  64. layout: 'fit',
  65. items: form,
  66. dockedItems: [{
  67. xtype: 'toolbar',
  68. dock: 'bottom',
  69. ui: 'footer',
  70. layout: {
  71. pack: 'center'
  72. },
  73. items: [{
  74. minWidth: 80,
  75. text: 'Send'
  76. },{
  77. minWidth: 80,
  78. text: 'Cancel'
  79. }]
  80. }]
  81. });
  82. win.show();
  83. });