首页 > 代码库 > Ext JS学习第五天 Ext_window组件(一)

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,学习之余提高文学修养