Extjsでのcolumnwidthとanchorの使用

6840 ワード
extjs columnWidth anchor ExtJs
まずコードをつけて、文の中の赤いフォントに注意します
   
   
   
   
    
    
    
    
    
  1. var form = new Ext.form.FormPanel({ 
    2. 
    
    
    
    
  2.                 autoHeight : true, 
    3. 
    
    
    
    
  3.                 id : 'reformId', 
    4. 
    
    
    
    
  4.                 frame:true, 
    5. 
    
    
    
    
  5.                 width : 400, 
    6. 
    
    
    
    
  6.                 border: false, 
    7. 
    
    
    
    
  7.                 height:300, 
    8. 
    
    
    
    
  8.                 labelWidth:60, 
    9. 
    
    
    
    
  9.                 items: [{ 
    10. 
    
    
    
    
  10.                     layout:'column', 
    11. 
    
    
    
    
  11.                     border:false, 
    12. 
    
    
    
    
  12.                     items: [{ 
    13. 
    
    
    
    
  13.                         layout:'form', 
    14. 
    
    
    
    
  14.                         border:false, 
    15. 
    
    
    
    
  15.                         columnWidth:.7, // columnWidth， 
    16. 
    
    
    
    
  16.                         items:[{ 
    17. 
    
    
    
    
  17.                         xtype : 'textfield', 
    18. 
    
    
    
    
  18.                         fieldLabel: ' ', 
    19. 
    
    
    
    
  19.                         id:'_ent_name', 
    20. 
    
    
    
    
  20.                         readOnly:true, 
    21. 
    
    
    
    
  21.                         anchor:'100%', // anchor
    22. 
    
    
    
    
  22.                         name:'entName', 
    23. 
    
    
    
    
  23.                         allowBlank:false 
    24. 
    
    
    
    
  24.                         }] 
    25. 
    
    
    
    
  25.                     },{layout:'form', 
    26. 
    
    
    
    
  26.                         border:false, 
    27. 
    
    
    
    
  27.                         columnWidth:.3, 
    28. 
    
    
    
    
  28.                         items:[{ 
    29. 
    
    
    
    
  29.                         xtype:'button', 
    30. 
    
    
    
    
  30.                         text:' ', 
    31. 
    
    
    
    
  31.                         name:'choiceEnt', 
    32. 
    
    
    
    
  32.                         anchor:'50%', 
    33. 
    
    
    
    
  33.                         listeners :{ 
    34. 
    
    
    
    
  34.                             click :function(){ 
    35. 
    
    
    
    
  35.                                 choiceTarget(); 
    36. 
    
    
    
    
  36.                             } 
    37. 
    
    
    
    
  37.                         } 
    38. 
    
    
    
    
  38.                         }] 
    39. 
    
    
    
    
  39.                     }]} 
    40. 
    
    
    
    
  40.                     ,{ 
    41. 
    
    
    
    
  41.                     layout:'column',items:[{ 
    42. 
    
    
    
    
  42.                     layout:'form', 
    43. 
    
    
    
    
  43.                     border:false, 
    44. 
    
    
    
    
  44.                     items:[accountGrid] 
    45. 
    
    
    
    
  45.                     },{ 
    46. 
    
    
    
    
  46.                         layout:'form', 
    47. 
    
    
    
    
  47.                         border:false, 
    48. 
    
    
    
    
  48.                         items:[{ 
    49. 
    
    
    
    
  49.                         xtype:'textarea', 
    50. 
    
    
    
    
  50.                         columnWidth:1, 
    51. 
    
    
    
    
  51.                         fieldLabel:' ', 
    52. 
    
    
    
    
  52.                         msgTarget : 'under', 
    53. 
    
    
    
    
  53.                         width:300, 
    54. 
    
    
    
    
  54.                         height:80, 
    55. 
    
    
    
    
  55.                         name:'note', 
    56. 
    
    
    
    
  56.                         emptyText:' '}] 
    57. 
    
    
    
    
  57.                     } 
    58. 
    
    
    
    
  58.                 ] 
    59. 
    
    
    
    
  59.                 }] 
    60. 
    
    
    
    
  60.             }); 
    61.

見ましたね.一行に同じ列に複数のオブジェクトがある場合はcolumnWidthとanchorを使います.両方の位置に注意してください.そうしないと効果が出ません.
[DataStructure] Heap
[SpringBoot&JPA]Web階層開発