Ext学习笔记一(使用Ext.Panel创建一个登录面板)

Ext1.0的写法

 

  1. <html>
  2. <head>
  3. <title>登录面板程序</title>
  4. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  6. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  7. <scripttype="text/javascript">
  8. Ext.onReady(function(){
  9. var_panel=newExt.Panel({
  10. frame:true,
  11. layout:"form",
  12. width:260,
  13. height:130,
  14. labelWidth:70,
  15. title:"登录",
  16. listeners:{
  17. "render":function(p){
  18. p.add(newExt.form.TextField({
  19. id:"txt_name",
  20. fieldLabel:"登录账号",
  21. width:160
  22. })
  23. );
  24. p.add(newExt.form.TextField({
  25. id:"txt_psd",
  26. fieldLabel:"登录密码",
  27. width:160
  28. })
  29. );
  30. }
  31. }
  32. });
  33. _panel.addButton({text:"确定",handler:function(){alert("你输入了:"+Ext.getCmp("txt_name").getValue());}});
  34. _panel.addButton({text:"取消",handler:function(){alert("你输入了:"+Ext.getCmp("txt_name").getValue());}});
  35. _panel.render(Ext.getBody());
  36. });
  37. </script>
  38. </head>
  39. <body>
  40. </body>
  41. </html>

Ext2.0的写法

  1. <html>
  2. <head>
  3. <title>登录面板程序</title>
  4. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  6. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  7. <scripttype="text/javascript">
  8. Ext.onReady(function(){
  9. var_panel=newExt.Panel({
  10. frame:true,
  11. layout:"form",
  12. width:260,
  13. height:130,
  14. labelWidth:70,
  15. title:"登录",
  16. defaults:{xtype:"textfield",width:160},
  17. items:[{
  18. fieldLabel:"登录账号"
  19. },{
  20. fieldLabel:"登录密码"
  21. }
  22. ],
  23. buttons:[{
  24. text:"确定"
  25. },{
  26. text:"取消"
  27. }
  28. ]
  29. });
  30. _panel.render(Ext.getBody());
  31. });
  32. </script>
  33. </head>
  34. <body>
  35. </body>
  36. </html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

你可能感兴趣的:(ext)