ExtJS4.0的组件简介

  1. 一、概述：ExtJS 中的组件体系由框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext 的控件，Ext 组件是由Component类定义，每一种组件都有  
  2.   
  3.    
  4.   
  5. 二、组件大致可以分为三大类：基本组件、工具栏组件、表单及元素组件。  
  6.   
  7. 一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组  
  8.   
  9. 件。  
  10.   
  11. 源码详解：创建一个paenl  
  12.   
  13.      var p2=Ext.create('Ext.panel.Panel',{  
  14.   
  15.                title:'第一个应用程序的面板',  
  16.   
  17.                width:200,//宽度  
  18.   
  19.                height:300,//高度  
  20.   
  21.                renderTo:'hi'//添加到指定的id上  
  22.   
  23.            });  
  24.   
  25. var panel=new Ext.panel.Panel({  
  26.   
  27.                title:'第一个应用程序的面板',  
  28.   
  29.                width:200,//宽度  
  30.   
  31.                height:300,//高度  
  32.   
  33.                renderTo:'hi',//添加到指定的id上  
  34.   
  35.                html:'<spanstylespanstyle="color:red;">你好</span>'  
  36.   
  37.            });  
  38.   
  39.     两个面板的效果是一样，就是在3.0后，4.0创建的组件方法有些扩展，现在可以用create来创建指定组件。  
  40.   
  41. 详解讲解Panel的属性，items、id、tbar、bbar、tools等属性，  
  42.   
  43.        Items：组件，里面可以包含很多组件，例如按钮，需要用xtype指定是那一个组件，并可以设置基本的一些属性，例如fieldLabel、text等，需要根据组件的类型来指定。  
  44.   
  45.        Id：可以给指定的panel指定一个id，在后面等组件中访问和使用此面板  
  46.   
  47.        Tbar：显示的是header，头部信息。  
  48.   
  49.        Bbar：显示的是footer，底部信息。  
  50.   
  51.        Tools：是工具栏，可以添加指定的工具，用type属性指定的那一中工具，用qtip属性来指定提示文本，header属性是调用的时间，是触发后的事件，调用指定的function来处理。  
  52.   
  53.        var panel=Ext.create('Ext.panel.Panel',{  
  54.   
  55.         id:'myPanel',  
  56.   
  57.         title:'第一个Panel应用',  
  58.   
  59.         width:200,  
  60.   
  61.         height:300,  
  62.   
  63.         items:[  
  64.   
  65.            {xtype:'textfield',fieldLabel:'用户名'},  
  66.   
  67.            {xtype:'textfield',fieldLabel:'密码'},  
  68.   
  69.            {xtype:'textfield',fieldLabel:'邮箱'},  
  70.   
  71.            {xtype:'button',text:'按钮'}  
  72.   
  73.         ],  
  74.   
  75.         tbar:[{xtype:'button',text:'头部按钮'}],  
  76.   
  77.         bbar:[{xtype:'button',text:'底部按钮'}],  
  78.   
  79.         tools:[{  
  80.   
  81.                   type:'refresh',  
  82.   
  83.                   qtip: 'Refresh form Data',  
  84.   
  85.                   // hidden:true,  
  86.   
  87.                   handler: function(event,toolEl, panel){  
  88.   
  89.                       // refresh logic  
  90.   
  91.                   }  
  92.   
  93.               },  
  94.   
  95.               {  
  96.   
  97.                   type:'help',  
  98.   
  99.                   qtip: 'Get Help',  
  100.   
  101.                   handler: function(event,toolEl, panel){  
  102.   
  103.                       // show help here  
  104.   
  105.                   }  
  106.   
  107.               }]  
  108.   
  109.     });  
  110.   
  111. 三、浅析讲解viewport使用(Border)  
  112.   
  113.        首先理解viewport是用来指定的布局，与html中的frameSet标签效果相似，Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，  
  114.   
  115. 分别由east，south, west，north, center来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素.  
  116.   
  117. 源码：  
  118.   
  119.         Ext.create('Ext.container.Viewport',{  
  120.   
  121.         renderTo:Ext.getBody(),  
  122.   
  123.         layout:'border',  
  124.   
  125.         items:[  
  126.   
  127.            {  
  128.   
  129.                title:'面板',  
  130.   
  131.                region:"north",  
  132.   
  133.                height:200,  
  134.   
  135.                html:'<h1>网站后台管理系统</h1>'  
  136.   
  137.            },{  
  138.   
  139.                title:'content',  
  140.   
  141.                region:'center',  
  142.   
  143.                html:'<h1>网站后台管理系统</h1>'  
  144.   
  145.            },{  
  146.   
  147.                title:'左',  
  148.   
  149.                region:'west',  
  150.   
  151.                width:100  
  152.   
  153.            }  
  154.   
  155.         ]  
  156.   
  157.     });  
  158.   
  159. 经过指定layout属性指定哪一种类型的布局，然后items来指定布局中的信息。在border布局中，center不可以缺少。在指定items中的对象的时候，resgion用来指定在那一个方位，比如west和center等。  

posted on 2013-11-29 16:00  kangxuebin  阅读(286)  评论(0)    收藏  举报

导航