ExtJS4.0的组件简介

一、概述：ExtJS 中的组件体系由框架进行了非常大的重构，其中最重要的就是形成了一个结构及层次分明的组件体系，由这些组件形成了Ext 的控件，Ext 组件是由Component类定义，每一种组件都有

 

二、组件大致可以分为三大类：基本组件、工具栏组件、表单及元素组件。

一个指定的xtype 属性值，通过该值可以得到一个组件的类型或者是定义一个指定类型的组

件。

源码详解：创建一个paenl

     var p2=Ext.create('Ext.panel.Panel',{

               title:'第一个应用程序的面板',

               width:200,//宽度

               height:300,//高度

               renderTo:'hi'//添加到指定的id上

           });

var panel=new Ext.panel.Panel({

               title:'第一个应用程序的面板',

               width:200,//宽度

               height:300,//高度

               renderTo:'hi',//添加到指定的id上

               html:'<spanstyle="color:red;">你好</span>'

           });

    两个面板的效果是一样，就是在3.0后，4.0创建的组件方法有些扩展，现在可以用create来创建指定组件。

详解讲解Panel的属性，items、id、tbar、bbar、tools等属性，

       Items：组件，里面可以包含很多组件，例如按钮，需要用xtype指定是那一个组件，并可以设置基本的一些属性，例如fieldLabel、text等，需要根据组件的类型来指定。

       Id：可以给指定的panel指定一个id，在后面等组件中访问和使用此面板

       Tbar：显示的是header，头部信息。

       Bbar：显示的是footer，底部信息。

       Tools：是工具栏，可以添加指定的工具，用type属性指定的那一中工具，用qtip属性来指定提示文本，header属性是调用的时间，是触发后的事件，调用指定的function来处理。

       var panel=Ext.create('Ext.panel.Panel',{

        id:'myPanel',

        title:'第一个Panel应用',

        width:200,

        height:300,

        items:[

           {xtype:'textfield',fieldLabel:'用户名'},

           {xtype:'textfield',fieldLabel:'密码'},

           {xtype:'textfield',fieldLabel:'邮箱'},

           {xtype:'button',text:'按钮'}

        ],

        tbar:[{xtype:'button',text:'头部按钮'}],

        bbar:[{xtype:'button',text:'底部按钮'}],

        tools:[{

                  type:'refresh',

                  qtip: 'Refresh form Data',

                  // hidden:true,

                  handler: function(event,toolEl, panel){

                      // refresh logic

                  }

              },

              {

                  type:'help',

                  qtip: 'Get Help',

                  handler: function(event,toolEl, panel){

                      // show help here

                  }

              }]

    });

三、浅析讲解viewport使用(Border)

       首先理解viewport是用来指定的布局，与html中的frameSet标签效果相似，Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，

分别由east，south, west，north, center来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素.

源码：

        Ext.create('Ext.container.Viewport',{

        renderTo:Ext.getBody(),

        layout:'border',

        items:[

           {

               title:'面板',

               region:"north",

               height:200,

               html:'<h1>网站后台管理系统</h1>'

           },{

               title:'content',

               region:'center',

               html:'<h1>网站后台管理系统</h1>'

           },{

               title:'左',

               region:'west',

               width:100

           }

        ]

    });

经过指定layout属性指定哪一种类型的布局，然后items来指定布局中的信息。在border布局中，center不可以缺少。在指定items中的对象的时候，resgion用来指定在那一个方位，比如west和center等。