ExtJS--学习--window窗体属性--解决重复窗体事件---子组件的添加---工具条tbar

day08
组件---Ext.window.Window
--xtype:组件的别名
--Hierarchy层次结构
--Inherited mixins混入的类
--Requires 该组件需要使用的类
--configs 组件的配置信息
--properties 组件的属性
--methods 组件的方法
--events 组件的事件

-----
Ext.onReady(function(){
//Ext.create方法创建一实例对象
Ext.create('Ext.window.Window',{
title:'我的第一个组件,window',
width:400,//Number 型 也可以是字符串类型width:'90%'
height:300,
layout:'fit',
constrain:true,//限制窗口不超出浏览器边界
constrainHeader:true,//不允许窗口的title 超出浏览器边界
model:true,//设置一个模态窗口
plain:true,//true为窗口设置透明背景
x:50,
y:50,//固定位置
autoScroll:true,//添加滚动条
icon='',//添加图片字符串参数，路径
iconCls:'',//CSS样式

html:'<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是一个div</div>',
rederTO:Ext.getBody()//新创建的组件渲染到什么位置
}).show();//必须.show(),才能展示，要不就是默认隐藏

});

day09
1.获取页面button的value的值
var btn=Ext.get('btn');//这个元素是经过Ext包装的一个Ext的Dom对象
alert(btn.dom.value);
// 用js写
//var btn=$('#btn');
//var dombtn=btn.get(0);

--------点击事件-创建一个新窗体
Ext.onReady(function(){
var btn=Ext.get('btn');
btn.on('onclick',function(){
Ext.create('Ext.window.Window',{
id:'mywin',//如果你给组件加了一个id 那么这个组件就会被Ext所管理
title:'新界面',
height:300,
width:400,
renderTo:Ext.getBody()
}).show();
});
));

---解决避免重复点击创建多个窗口
第一种
modal:true //模态属性框
第二种，判断
if(!Ext.getCmp('mywin')){
Ext.create('Ext.window.Window',{
id:'mywin',//如果你给组件加了一个id 那么这个组件就会被Ext所管理
title:'新界面',
height:300,
width:400,
renderTo:Ext.getBody()
}).show();
}

或者--
var win=Ext.create('Ext.window.Window',{
title:'新界面',
height:300,
width:400,
renderTo:Ext.getBody(),
closeAction:'hide' //closeAction默认是destory回收垃圾,hide表示隐藏再次点击出现
});
Ext.get('btn').on('click',function(){
win.show();
});

day10
1.一些小属性
Ext.onReady(function(){
var win=new Ext.window.Window({
title:"添加子组件实例",
width:'40%',
height:400,
renderTo:Ext.getBody(),
draggable:false,//不允许拖拽
resizable:false,//不允许改变窗口大小
closeable:false,//显示折叠按钮
bodyStyle:'background:#ffc;padding:10px',//设置样式，padding为边距
html:'我是window 的内容!!'
});
win.show();
});

2.window组件里边在添加子组件---items:[{xtype}]
Ext.onReady(function(){
var win=new Ext.window.Window({
title:"添加子组件实例",
width:'40%',
height:400,
renderTo:Ext.getBody(),
draggable:false,//不允许拖拽
resizable:false,//不允许改变窗口大小
closeable:false,//显示折叠按钮
bodyStyle:'background:#ffc;padding:10px',//设置样式，padding为边距
html:'我是window 的内容!!'
//Ext items(array)配置了组件的配置项
items:[{
//Ext的组件给我们提供了一个简单的写法 xtype属性去创建组件
xtype:'panel',
width:'50%',
height:100,
html:'我是面板',
},{
xtype:'button',
text:'我是按钮',
handler:function(btn){ //btn表示当前按钮
alert('我被点击了');
alert(btn.text);
}
}]
});
win.show();
});

3.添加窗口的工具条--tbar顶部
Ext.onReady(function(){
var win=new Ext.Window({
id:'mywin',
title:'操作形式',
width:500,
height:300,
renderTo:Ext.getBody(),
//表示在当前组件的top位置添加一个工具条
tbar:[{ //(bootom)bbar底部--(leftbar)lbar左--(rightbar)rbar右--(footbar)fbar底部
text:'添加',
handler:function(btn){
//组件都会有up,down这两个方法(表示向上，或者向下查找)需要的参数是数组的xtype或者是选择器
alert(btn.up('window').title);
}
},{
text:'保存',
handler:function(btn){
//最常用的方式
alert(Ext.getCmp('mywin').title);
}
},{
text:'删除',
//以上一级组件的形式去查找OwnerCt
//console.info(btn.ownerCt);//控制台打印出undefined--说明他访问的是tbar
alert(btn.ownerCt.ownerCt.title);

}]
});
win.show();
});