ExtJS学习笔记:复杂页面布局实现

系统 1860 0
[javascript] view plain copy
  1. <scripttype= 'text/javascript' >
  2. Ext.onReady( function (){
  3. new Ext.Window({
  4. title: "添加人员" ,
  5. width:500,
  6. height:345,
  7. plain: true ,
  8. layout: "form" ,
  9. labelWidth:55,
  10. defaultType: "textfield" ,
  11. bodyStyle: "padding:5px" ,
  12. //style:"padding:5px",
  13. items:[{
  14. xtype: "panel" ,
  15. //设置背景色和容器颜色一致
  16. baseCls: "x-plain" ,
  17. layout: "column" ,
  18. items:[{
  19. columnWidth:0.5,
  20. baseCls: "x-plain" ,
  21. layout: "form" ,
  22. defaultType: "textfield" ,
  23. defaults:{width:160},
  24. labelWidth:55,
  25. items:[{
  26. fieldLabel: "姓名"
  27. },{
  28. fieldLabel: "年龄"
  29. },{
  30. fieldLabel: "出生日期"
  31. },{
  32. fieldLabel: "联系电话"
  33. },{
  34. fieldLabel: "手机号码"
  35. },{
  36. fieldLabel: "电子邮件"
  37. },{
  38. fieldLabel: "性别"
  39. }]
  40. },{
  41. columnWidth:0.5,
  42. baseCls: "x-plain" ,
  43. layout: "form" ,
  44. labelWidth:55,
  45. items:{
  46. xtype: "textfield" ,
  47. inputType: "image" ,
  48. fieldLabel: "个人照片" ,
  49. width:170,
  50. height:170
  51. }
  52. }]
  53. },{
  54. fieldLabel: "身份证号" ,width:400
  55. },{
  56. fieldLabel: "具体地址" ,width:400
  57. },{
  58. fieldLabel: "职位" ,width:400
  59. }],
  60. showLock: false , //用于只加载一次
  61. listeners:{
  62. "show" : function (_window){
  63. //得到Ext中元素对象
  64. if (!_window[ "showLock" ])
  65. _window.findByType( "textfield" )[7].getEl().dom.src= "zhao.jpg" ;
  66. }
  67. },
  68. buttons:[{
  69. text: "确定"
  70. },{
  71. text: "取消"
  72. }]
  73. }).show();
  74. })
  75. </script>
ExtJS学习笔记:复杂页面布局实现

ExtJS学习笔记:复杂页面布局实现


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论