2.单例对象及相关组件

1.单例对象 SINGLETON

所谓的单例对象就是Ext里面的一些对象,那这些对象有自己的一些方法,我们可以通过调用单例对象的一些方法来实现我们想要达到的一些效果,例如Ext.MessageBox这个单例对象下面就有alert方法

Ext.Ajax.request({
  url:'...',
  success:function(res,option){},
  failure:function(res,option){}
  
})

2.组件类 xtype(xtype是对组件类的一个描述)

在Ext里面的每一个组件都有它自己所属的一个类,比如上面的meaasagebox就是属于Ext.window.MessageBox这个类

当然还会有event事件的监听等等,这里只是截取了部分,根据单例对象所属的类型不同而不同.

3.configs里面做属性配置,简单的使用如下

//html
<div id="app"></div>

//1.通过new关键字创建一个面板
Ext.onReady(function(){
  
    var panel = new Ext.panel.Panel({

          //这些配置可以在configs里面查看看可以配置些什么

          width:300,
          height:500,
          title:"这是用new关键字创建的面板"

          //配置完成以后,还需要对它进行渲染,渲染用,randerTo,比如下面的是将面板渲染到id为app的div里面
          renderTo:'app'

    });


})

//2.通过create方法来创建一个面板
Ext.onReady(function(){
  Ext.create("Ext.panel.Panel" , {

        width:300,
        height:500,
        title:'这是用create方法创建的一个面板',

        //Ext里面内置的获取body标签的方法,来让面板渲染到body里面
        renderTo:Ext.getBody()

  })

})


//3.使用create和xtype(别名)的方式来创建一个面板
Ext.onReady(function(){
  var panel3 = Ext.create({
      
      //声明别名
      xtype:"panel",

      //做相关配置
      width:300,
      height:500,
      title:'这是用create方法创建的一个面板',
      html:"面板的内容内容内容",

      listeners:{
            close:function(){
                    alert("methods里面的方法调用的方式")
            }
      },      

      renderTo:getBody()


  })
})

//4.渲染的方式除了以上的方式,我们还可以在指定的事件下面执行,这与直接写在configs里面渲染的效果一样,只不过这样就可以在执行事件时,再进行渲染.

panel3.render(Ext.getBody()) 

4.properties用来查看属性的属性值,一般为只读,其使用如下:

//查看panel3是否可以拖拽,结果为false
console.log(panel3.draggable)

5.methods方法就是组件上面拥有的方法,一下列举监听事件的三种方式

//1.用listeners:{   eventName : fn   }
//比如上面的panel3有一个close方法,那我要执行close方法就:
panel3.close();

//2.对组件通过on设置  obj.on("eventName" , fn)
//或者用另外一种方式,给panel3添加事件
panel3.on('open' , function(){
      
        console.log('我用on来监听');

})

//通过组件的addListener('eventName' , fn , [object scope] , [object options])