hbox-form.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. Ext.require([
  2. 'Ext.form.Panel',
  3. 'Ext.layout.container.Anchor'
  4. ]);
  5. Ext.onReady(function() {
  6. Ext.create('Ext.form.Panel', {
  7. renderTo: Ext.getBody(),
  8. title: 'Form Panel',
  9. bodyStyle: 'padding:5px 5px 0',
  10. width: 600,
  11. fieldDefaults: {
  12. labelAlign: 'top',
  13. msgTarget: 'side'
  14. },
  15. defaults: {
  16. border: false,
  17. xtype: 'panel',
  18. flex: 1,
  19. layout: 'anchor'
  20. },
  21. layout: 'hbox',
  22. items: [{
  23. items: [{
  24. xtype:'textfield',
  25. fieldLabel: 'First Name',
  26. anchor: '-5',
  27. name: 'first'
  28. }, {
  29. xtype:'textfield',
  30. fieldLabel: 'Company',
  31. anchor: '-5',
  32. name: 'company'
  33. }]
  34. }, {
  35. items: [{
  36. xtype:'textfield',
  37. fieldLabel: 'Last Name',
  38. anchor: '100%',
  39. name: 'last'
  40. },{
  41. xtype:'textfield',
  42. fieldLabel: 'Email',
  43. anchor: '100%',
  44. name: 'email',
  45. vtype:'email'
  46. }]
  47. }],
  48. buttons: ['->', {
  49. text: 'Save'
  50. }, {
  51. text: 'Cancel'
  52. }]
  53. });
  54. });