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

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

2024-07-18 20:37:36   220人阅读

此文来记录学习笔记

•第一个组件：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,学习之余提高文学修养


联系
我们