ExtJs基础UI设计进阶教程(1)

最新推荐文章于 2024-03-09 15:47:41 发布
最新推荐文章于 2024-03-09 15:47:41 发布
阅读量1.6k 收藏
点赞数
分类专栏： ExtJs学习

转自：http://blog.csdn.net/yu624774720hua/article/details/6552190

了解Ext.Button

  • 说明：该主键代替了传统的submit，reset，button,HTML控件
  • 构造参数：--text：按钮上的名称
  • 属性：-text：获得当前按钮上的名称 -minWindth：按钮的最小宽度
  • 方法：-setText：设置按钮上的名称
  • 事件：-click：当点击按钮是触发

 

button实例

[xhtml] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>普通按钮</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         var _button = new Ext.Button({  
  15.                     renderTo:document.body,  
  16.                     text:"确 定",  
  17.                     minWidth:100  
  18.             }) ;  
  19.           
  20.     }) ;  
  21.       
  22. // --></mce:script>  
  23. </head>  
  24. <body>  
  25. </body>  
  26. </html>  

 

Ext.Button产生的引申话题

属性：       -renderTO：将当前对象所生成的HTML对象存放进指的的对象中

构造参数    -handler：指定一个函数句柄，在默认事件触发是调用，此时的默认事件为click

-listeners：这个是在对象初始化之前，就将1系列事件进行定义的手段，在进行组件化编程时，特别有用

 

click（handler）实例

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>带事件的按钮</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.Button({  
  15.                     renderTo:Ext.getBody(),  
  16.                     text:"确 定",  
  17.                     handler:function(){  
  18.                           
  19.                         alert("欢迎你学习EXTJS") ;  
  20.                     }  
  21.             }) ;  
  22.           
  23.     }) ;  
  24.       
  25. // --></mce:script>  
  26. </head>  
  27. <body>  
  28. </body>  
  29. </html>  
 

 

listeners调用（推荐）：

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>第二种编写带事件的按钮</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.Button({  
  15.                     renderTo:Ext.getBody(),  
  16.                     text:"确 定",  
  17.                     listeners:{  
  18.                           
  19.                         "click":function(){  
  20.                               
  21.                             alert("欢迎你学习EXTJS") ;  
  22.                         }  
  23.                     }  
  24.             }) ;  
  25.           
  26.     }) ;  
  27.       
  28. // --></mce:script>  
  29. </head>  
  30. <body>  
  31. </body>  
  32. </html>  
 

 

传统调用方法（不推荐）

 

 

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>第三种编写带事件的按钮</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         var _btn = new Ext.Button({  
  15.                     renderTo:Ext.getBody(),  
  16.                     text:"确 定"  
  17.             }) ;  
  18.               
  19.         _btn.on("click" , function(){  
  20.                                   
  21.                                 alert("欢迎你学习EXTJS") ;  
  22.                           }) ;  
  23.           
  24.     }) ;  
  25.       
  26. // --></mce:script>  
  27. </head>  
  28. <body>  
  29. </body>  
  30. </html>  
 

 

了解Ext.form.TextField

 

  • 说明：该组件代替了传统的text组件
  • 属性：-fieldLabel：文本框的标签名称
  • 方法-getValue()：得到文本框的值

textfield实例

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>文本框</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.form.TextField({  
  15.                 renderTo:Ext.getBody(),  
  16.                 fieldLabel:"姓名"  
  17.             }) ;  
  18.           
  19.     }) ;  
  20.       
  21. // --></mce:script>  
  22. </head>  
  23. <body>  
  24. </body>  
  25. </html>  
 

 

以上这个代码，无法实现textLabel的内容，原因是我们没有使用布局

 

由Ext.form.TextField产生的引申话题

 

  • Ext.layout.FormLayout:只有在此布局下才能正确显示文本框的标签名，布局的宿主对象必须是Ext.Container或者Ext.Container的子类
  • 在应用FormLayout布局时只要在宿主对象的参数中指定layout:"form"即可
  • Ext.getCmp(String_id):的到id为_id的组件对象

布局后实例

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>嵌套在具有FormLayout布局特性面板里的文本框</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.               
  14.         var _panel = new Ext.Panel({  
  15.                         renderTo:Ext.getBody(),  
  16.                         layout:"form",  
  17.                         labelWidth:30,  
  18.                         listeners:{  
  19.                             "render":function(_panel){  
  20.                                         _panel.add(new Ext.form.TextField({  
  21.                                                     id:"txt_name",  
  22.                                                     fieldLabel:"姓名"  
  23.                                                 })) ;  
  24.                                      }  
  25.                         }}) ;  
  26.                           
  27.                           
  28.           
  29.         new Ext.Button({  
  30.                 text:"确 定",  
  31.                 renderTo:Ext.getBody(),  
  32.                 handler:function(){  
  33.                               
  34.                             alert(Ext.getCmp("txt_name").getValue()) ;  
  35.                         }  
  36.             }) ;  
  37.           
  38.     }) ;  
  39.       
  40. // --></mce:script>  
  41. </head>  
  42. <body>  
  43. </body>  
  44. </html>  
 

 

 

了解Ext.Panel

 

  • 说明：从某种意义来讲，其彻底改变了网页界面是通过HTML Table进行布局的历史
  • 属性：-title：面板的标签名 -width ：指定版面的宽度 -height：指定版面的高度 -frame 把4个脚变圆角，改变背景色
  • 方法：-addButton（String/Object_config，Function_handler，Object_scope）添加一个按钮对象到面板中

panel基础实例

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>面板</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.Panel({  
  15.                 renderTo:Ext.getBody(),  
  16.                 title:"人员信息"  
  17.             }) ;  
  18.           
  19.     }) ;  
  20.       
  21. // --></mce:script>  
  22. </head>  
  23. <body>  
  24. </body>  
  25. </html>  
 

 

panel实例（2）

 

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>指定长与宽的面板</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         new Ext.Panel({  
  15.                 renderTo:Ext.getBody(),  
  16.                 title:"人员信息",  
  17.                 width:200,  
  18.                 height:300  
  19.             }) ;  
  20.           
  21.     }) ;  
  22.       
  23. // --></mce:script>  
  24. </head>  
  25. <body>  
  26. </body>  
  27. </html>  
 

 

 

addButton实例：

 

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>带两个按钮的面板</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         var _panel = new Ext.Panel({  
  15.                 title:"人员信息",  
  16.                 frame:true,  
  17.                 width:200,  
  18.                 height:300  
  19.             }) ;  
  20.               
  21.         _panel.addButton({text:"确 定"}) ;  
  22.                                   
  23.         _panel.addButton(new Ext.Button({text:"取 消"})) ;  
  24.           
  25.         _panel.render(Ext.getBody()) ;  
  26.           
  27.     }) ;  
  28.       
  29. // --></mce:script>  
  30. </head>  
  31. <body>  
  32. </body>  
  33. </html>  
 

 

 

 

 

panel居中（定位）

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>不顶边面板</title>  
  7. <mce:style type="text/css"><!--  
  8. .contain{  
  9.         width:100%;   
  10.         height:100%;  
  11.         top:0;  
  12.         left:0;  
  13.     }  
  14. .center {  
  15.     position:absolute;  
  16.     top:30%;  
  17.     left:43%;  
  18.     text-align:left;  
  19. }  
  20. --></mce:style><style type="text/css" mce_bogus="1">.contain{  
  21.         width:100%;   
  22.         height:100%;  
  23.         top:0;  
  24.         left:0;  
  25.     }  
  26. .center {  
  27.     position:absolute;  
  28.     top:30%;  
  29.     left:43%;  
  30.     text-align:left;  
  31. }</style>  
  32. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  33. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  34. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  35. <mce:script type="text/javascript"><!--  
  36.       
  37.     Ext.onReady(function(){  
  38.       
  39.         var _panel = new Ext.Panel({  
  40.                 title:"人员信息",  
  41.                 frame:true,  
  42.                 width:200,  
  43.                 height:300  
  44.             }) ;  
  45.               
  46.         _panel.addButton({text:"确 定"}) ;  
  47.                                   
  48.         _panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;  
  49.           
  50.         _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {  
  51.                             tag:"div",  
  52.                             cls:"contain",  
  53.                             cn:[{  
  54.                                 tag:"div",  
  55.                                 cls:"center"  
  56.                             }]  
  57.                       } , true).child("div")) ;  
  58.           
  59.     }) ;  
  60.       
  61. // --></mce:script>  
  62. </head>  
  63. <body>  
  64. </body>  
  65. </html>  
 

 

 

2个textfield

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>带两个文本框的面板</title>  
  7. <mce:script type="text/javascript" src="../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  8. <mce:script type="text/javascript" src="../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  9. <mce:script type="text/javascript" src="../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  10. <mce:script type="text/javascript"><!--  
  11.       
  12.     Ext.onReady(function(){  
  13.       
  14.         var _panel = new Ext.Panel({  
  15.                 title:"人员信息",  
  16.                 frame:true,  
  17.                 width:300,  
  18.                 height:200,  
  19.                 layout:"form",  
  20.                 listeners:{  
  21.                     "render":function(_panel){  
  22.                                   
  23.                                 _panel.add({xtype:"textfield" , fieldLabel:"姓名"}) ;  
  24.                                   
  25.                                 _panel.add(new Ext.form.TextField({  
  26.                                                       
  27.                                                     fieldLabel:"地址"  
  28.                                                       
  29.                                                 })) ;  
  30.                              }  
  31.                 }  
  32.             }) ;  
  33.               
  34.         _panel.addButton({text:"确 定"}) ;  
  35.                                   
  36.         _panel.addButton(new Ext.Button({text:"取 消" , minWidth:100})) ;  
  37.           
  38.         _panel.render(Ext.getBody()) ;  
  39.           
  40.     }) ;  
  41.       
  42. // --></mce:script>  
  43. </head>  
  44. <body>  
  45. </body>  
  46. </html>  
 

 

 

登陆界面：

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>登陆程序</title>  
  7. <mce:style type="text/css"><!--  
  8. .contain{  
  9.         width:100%;   
  10.         height:100%;  
  11.         top:0;  
  12.         left:0;  
  13.     }  
  14. .center {  
  15.     position:absolute;  
  16.     top:30%;  
  17.     left:43%;  
  18.     text-align:left;  
  19. }  
  20. --></mce:style><style type="text/css" mce_bogus="1">.contain{  
  21.         width:100%;   
  22.         height:100%;  
  23.         top:0;  
  24.         left:0;  
  25.     }  
  26. .center {  
  27.     position:absolute;  
  28.     top:30%;  
  29.     left:43%;  
  30.     text-align:left;  
  31. }</style>  
  32. <mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  33. <mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  34. <mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  35. <mce:script type="text/javascript"><!--  
  36.       
  37.     Ext.onReady(function(){  
  38.       
  39.         var _panel = new Ext.Panel({  
  40.                 title:"登 陆",  
  41.                 frame:true,  
  42.                 width:260,  
  43.                 height:130,  
  44.                 layout:"form",  
  45.                 labelWidth:45,  
  46.                 listeners:{  
  47.                     "render":function(_panel){  
  48.                                   
  49.                                 _panel.add({xtype:"textfield" , fieldLabel:"账号" , width:180}) ;  
  50.                                   
  51.                                 _panel.add({xtype:"textfield" , fieldLabel:"密码" , width:180}) ;  
  52.                              }  
  53.                 }  
  54.             }) ;  
  55.               
  56.         _panel.addButton({text:"确 定"}) ;  
  57.                                   
  58.         _panel.addButton({text:"取 消"}) ;  
  59.           
  60.         _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {  
  61.                             tag:"div",  
  62.                             cls:"contain",  
  63.                             cn:[{  
  64.                                 tag:"div",  
  65.                                 cls:"center"  
  66.                             }]  
  67.                       } , true).child("div")) ;  
  68.           
  69.     }) ;  
  70.       
  71. // --></mce:script>  
  72. </head>  
  73. <body>  
  74. </body>  
  75. </html>  
 

以上全是Ext2.0以下版本的写法，写起来很麻烦

 

2.2版本的登陆界面

[xhtml]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <link rel="stylesheet" type="text/css" href="../../../../resources/css/ext-all.css" mce_href="resources/css/ext-all.css" />  
  6. <title>登陆程序</title>  
  7. <mce:style type="text/css"><!--  
  8. .contain{  
  9.         width:100%;   
  10.         height:100%;  
  11.         top:0;  
  12.         left:0;  
  13.     }  
  14. .center {  
  15.     position:absolute;  
  16.     top:30%;  
  17.     left:43%;  
  18.     text-align:left;  
  19. }  
  20. --></mce:style><style type="text/css" mce_bogus="1">.contain{  
  21.         width:100%;   
  22.         height:100%;  
  23.         top:0;  
  24.         left:0;  
  25.     }  
  26. .center {  
  27.     position:absolute;  
  28.     top:30%;  
  29.     left:43%;  
  30.     text-align:left;  
  31. }</style>  
  32. <mce:script type="text/javascript" src="../../../../adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script>  
  33. <mce:script type="text/javascript" src="../../../../ext-all.js" mce_src="ext-all.js"></mce:script>  
  34. <mce:script type="text/javascript" src="../../../../build/locale/ext-lang-zh_CN.js" mce_src="build/locale/ext-lang-zh_CN.js"></mce:script>  
  35. <mce:script type="text/javascript"><!--  
  36.       
  37.     Ext.onReady(function(){  
  38.       
  39.         var _panel = new Ext.Panel({  
  40.                 title:"登 陆",  
  41.                 frame:true,  
  42.                 width:260,  
  43.                 height:130,  
  44.                 layout:"form",  
  45.                 labelWidth:45,  
  46.                 defaults:{xtype:"textfield" , width:180},  
  47.                 items:[{  
  48.                     fieldLabel:"账号"  
  49.                 },{  
  50.                     fieldLabel:"密码"  
  51.                 }],  
  52.                 buttons:[{  
  53.                     text:"确 定"  
  54.                 },{  
  55.                     text:"取 消"  
  56.                 }]  
  57.             }) ;  
  58.           
  59.         _panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(), {  
  60.                             tag:"div",  
  61.                             cls:"contain",  
  62.                             cn:[{  
  63.                                 tag:"div",  
  64.                                 cls:"center"  
  65.                             }]  
  66.                       } , true).child("div")) ;  
  67.           
  68.     }) ;  
  69.       
  70. // --></mce:script>  
  71. </head>  
  72. <body>  
  73. </body>  
  74. </html>  
 

深度抽象
关注
专栏目录
ext UI效果模板
09-14
涵盖了ext特有功能的所有模板，同时包含源代码，只要简单修改，一个ext构成的前台就出现了。下载你不会后悔的。
Extjs强力教程
02-12
ExtJS 是一个强大的...通过"Extjs强力教程"的学习，你不仅可以掌握ExtJS的基础知识，还能提升解决实际问题的能力。在实际项目中，结合API文档，你将能够灵活运用这些工具，开发出高效、用户体验优秀的Web应用。
Extjs 简单UI设计1
gyl868的专栏
11-16 128
[code="java"]1: button Ext.onReady(function() { new Ext.Button({ renderTo:Ext.getBody(), text:"确 定", minWidth:200, handler:function(...
extjs 项目UI总结
超然等待的专栏
06-19 1419
1.页面布局（border） var panel = Ext.create('Ext.panel.Panel', { height:'100%', layout: 'border', defaults:{ split:true//各个布局之间可拉动 }, items: [
extjs3的“类图”
naxsu的专栏
04-28 160
整理一份extjs3的“类图”，从总体上有个概念产，然后一个一个来解决它。 [code="java"] Object Ext.util.Observable：为EXT组件提供处理的最基本功能。 Ext.Component：提供了Ext组件共有的特性， 比如初始的流程、组件的配置选项应用、插件应用，组件渲染，组件公共的配置选项等，是一个抽象的东西。 Ext.BoxCompo...
ExtJS 3.x UI皮肤设计
书写人生
07-22 704
ExtJS 3.x UI皮肤设计ExtJS发展史UI更新技术支持 ExtJS发展史 ExtJs发展速度有点跟风，目前飘的比较高，现在已经6.x版本，来来回回合并升级，也没什么卵用。当年全世界最好用的Grid控件，没有之一，如今并不火爆。有点走偏。 UI更新 随着大屏幕电脑设备更新换代，扁平化UI界面设计成为潮流，我们对ExtJS3.x版本进行了升级，废话不多说，看效果： 技术支持 还有在用...
EXTJS全套教程实例
09-21
2. **基础组件使用**：通过 `' '`、`' +` 等标签对基础组件进行了简单介绍，这些组件覆盖了界面设计的基础部分。 3. **进阶组件与功能**：`' -` 和 `' ?` 标签可能涉及到了更为复杂的组件和功能，如数据处理、图表...
extjs框架及教程
01-08
接着，可以学习如何利用EXTJS的布局系统（Layouts）来设计适应不同屏幕尺寸的响应式界面。最后，可以深入到高级主题，如数据绑定、图表（Charts）和远程数据通信（Ajax和Store的配置）。 在实际项目中，EXTJS通常与...
Extjs FineUI开发框架 FineOffice框架 OA源码
01-05
基于FineUI开发的OA源码，可作参考。
oa界面设计，供参考
09-09
oa界面设计，仅供参考，本人自己制作，公司内部使用的oa管理界面
ExtJS UI 之 Ext.Window
weixin_30512043的博客
11-25 99
ExtJS UI 之 Ext.Window 说明：该组件是实现窗体化开发的基础。 构造参数： --title:窗体名称 --minimizable:是否显示最小化按钮 --maximizable:是否显示最大化按钮 方法： --show:使得窗口显现 --hide:使得窗口隐藏 事件: --hide:当隐藏时触发 --show:当显现时触发 ...
extjs学习与进阶
Fupengyao的博客
03-04 581
一、先认识一下 extjs的面向对象技术  点击打开链接构建 Ext JS 扩展和插件 二、接着来讨论下作用域 ： 第一个能成功触发，但第二个用了this却没起作用       2013-08-10 13:54 提问者采纳 第二个this指的是当前id为'viewAll‘的对象 追问
ExtJS拥有丰富的UI组件，包括表格、表单、按钮等，这些组件可以快速构建复杂的用户界面
最新发布
BLOG域名:programb.blog.csdn.net
03-09 778
强大的组件库：ExtJS拥有丰富的UI组件，包括表格、表单、按钮等，这些组件可以快速构建复杂的用户界面。数据驱动的开发模式：ExtJS提供了强大的数据绑定和数据处理能力，开发者可以轻松地将数据与UI组件进行关联，并实现数据的增删改查操作。综上所述，ExtJS相比其他前端框架具有强大的组件库、高度可扩展性、数据驱动的开发模式、跨浏览器兼容性以及丰富的文档和社区支持等优势。请注意，以上示例只是修改了一些常见组件的字体大小，如果你想修改其他组件的字体大小，你需要找到对应的组件样式并进行相应的修改。
ExtJS丰富的UI组件和功能，使开发人员能够轻松创建交互式和可扩展的Web应用程序
BLOG域名:programb.blog.csdn.net
03-09 966
插件和扩展：ExtJS支持插件和扩展机制，开发人员可以使用现有的插件或自己编写插件来增强应用程序的功能。主题和样式：ExtJS提供了多个内置主题，开发人员可以根据需要选择合适的主题来美化应用程序的外观。丰富的UI组件库：ExtJS提供了大量的预定义UI组件，例如表格、表单、按钮、菜单等，这些组件可以轻松地集成到应用程序中，并且具有高度的可定制性。属性来指定一个函数，该函数将对输入的值进行自定义验证。通过利用ExtJS提供的丰富功能和工具，开发人员可以更轻松地创建出交互式和可扩展的Web应用程序。
ExtJS UI Develop
TAINK
03-15 120
http://code.google.com/p/extbuilder/wiki/UserGuide
ExtJS 确实提供了大量的 UI 组件，用于构建具有丰富交互性的用户界面
BLOG域名:programb.blog.csdn.net
12-24 1211
ExtJS 确实提供了大量的 UI 组件，用于构建具有丰富交互性的用户界面。ExtJS 是一个功能强大的 JavaScript 框架，主要用于构建富互联网应用程序（RIA）。
ExtJS界面设计工具 Ext Designer
jazywoo_在路上
08-25 3037
Ext Designer 是一个桌面应用工具，帮助你快速开发基于 ExtJS 的用户界面。 Ext Designer 1.2 主要新特性包括： 1. 支持多种框架： 2. 增加图表的设计支持 3. 数据包 4. 新的布局选项 这里有很多都是跟 ExtJS 4 相关的改进。 下载地址：http://www.sencha.com
ExtJs2.0学习系列：从基础到进阶
"这是一份基于ExtJs2.0的基础教程PDF，内容来自一位网友的博客，整理成PDF格式，方便学习。教程详细介绍了ExtJs的各种组件和功能，包括MessageBox、Panel、Window、FormPanel、TabPanel、XTemplate、TreePanel以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值