Ext JS学习第五天 Ext_window组件（一）

此文来记录学习笔记

•第一个组件：Ext.window.Window。对于组件，也就是Ext最吸引开发者的地方，那么我们要真正的使用Ext的组件，首先必须学会阅读API文档。

–xtype：组件的别名

–Hierarchy 层次结构

–Inherited mixins 混入的类

–Requires 该组件需要使用的类

–configs：组件的配置信息

–properties：组件的属性

–methods：组件的方法

–events：组件的事件

•window组件常用属性和方法讲解:

•configs:

–constrain:布尔值，true为限制窗口只能在其容器内移动，默认值为false，允许窗口在任何位置移动。(另：constrianHeader属性)

–modal:布尔值，true为设置模态窗口。默认为false

–plain：布尔值，true为窗口设置透明背景。false则为正常背景，默认为false

–x、y 设置窗口左上角坐标位置。

–onEsc：复写onEsc函数，默认情况下按Esc键会关闭窗口。

–closeAction：string值，默认值为‘destroy‘，可以设置‘hide‘关闭时隐藏窗口

–autoScroll：布尔值，是否需要滚动条，默认false

•properties 属性

•methods 方法

•events 事件

附上栗子代码

 1 Ext.onReady(function () {
 2     //Ext.create方法相当于创建一个实例对象
 3     Ext.create(‘Ext.window.Window‘, {
 4         title: ‘我的第一个组件,window‘,
 5         width: 400,     //Number型  也可以是字符串类型  width: ‘90%‘
 6         height: 300,
 7         layout: ‘fit‘,
 8         constrain: true,        //限制窗口不超出浏览器边界
 9         modal: true,            //设置一个模态窗口
10         //plain:true ,
11         icon: ‘JS/Ext/icons/used/browser_window.pngg‘,                //字符串参数,图片的路径
12         //iconCls:‘‘ ,           //CSS样式
13         x: 50,
14         y: 50,
15         autoScroll: true,        //添加滚动条
16         html: ‘<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是第二个div</div>‘,
17         //constrainHeader:true,    //不允许该窗口的title超出浏览器边界
18         renderTo: Ext.getBody()    //新创建的组件 渲染到什么位置
19     }).show();
20
21 });

给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养

Ext JS学习第五天 Ext_window组件（一）,布布扣,bubuko.com