看了白鹤extjs视频学习资料后整理一下
以后用的时候看看
1
选择器时
1 btn.up()/down().属性 参数是选择器或者组件的xtype
2 Ext.getCmp('id').属性
3btn.ownerct.ownerct(父类的父类——爷爷类 子类的子类应该也有 我没查
可能是child?)
2组件
1 ext自带方式
items{
xtype:button,
text:'123',
handle:function(btn){
}
}
2new方式[1]
new EXT.button.button{
//免写xtype
text:'123',
handle:function(btn){
}
3Window有用的属性
Ext.onReady(function(){
//Ext.create方法相当于创建一个实例对象
Ext.create('Ext.window.Window',{
title:'我的第一个组件,window' ,
width:400 , //Number型 也可以是字符串类型 width: '90%'
height:300 ,
layout:'fit' ,
constrain:true , //限制窗口不超出浏览器边界
modal:true , //设置一个模态窗口
//plain:true ,
icon:'js/extjs/icons/used/browser_window.png', //字符串参数,图片的路径
//iconCls:'' , //CSS样式
x:50 ,
y:50 ,
autoScroll:true, //添加滚动条
html:'<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是第二个div</div>' ,
//constrainHeader:true, //不允许该窗口的title超出浏览器边界
renderTo:Ext.getBody() //新创建的组件 渲染到什么位置
}).show();
});
3简单的新建窗体
Ext.onReady(function(){
//ex001:点击一个按钮 ,打开一个新的窗体 window重复创建的问题
//第一种实现
//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
var btn = Ext.get('btn'); //这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);
btn.on('click',function(){
if(!Ext.getCmp('mywin')){
Ext.create('Ext.window.Window',{
id:'mywin' , //如果你给组件加了一个id 那么这个组件就会被Ext所管理
title:'新窗体' ,
height:300 ,
width:400 ,
renderTo:Ext.getBody() //,
//modal:true
}).show();
}
});
//第二种实现
// var win = Ext.create('Ext.window.Window',{
// title:'新窗体' ,
// height:300 ,
// width:400 ,
// renderTo:Ext.getBody() ,
// closeAction:'hide' //closeAction默认是destroy
// });
//
// Ext.get('btn').on('click',function(){
// win.show();
// });
});
4子组件的作用
Ext.onReady(function(){
//ex002 : 在组件中添加子组件 ,并进行一系列针对于组件的操作
//在组件中添加子组件:
// var win = new Ext.window.Window({
// title:"添加子组件实例" ,
// width:'40%' ,
// height:400 ,
// renderTo:Ext.getBody() ,
// draggable:false , //不允许拖拽
// resizable:false , //不允许改变窗口大小
// closable:false, //不显示关闭按钮
// collapsible:true , //显示折叠按钮
// bodyStyle: 'background:#ffc; padding:10px;' , // 设置样式
// html:'我是window的内容!!' ,
// //Ext items(array) 配置子组件的配置项
// items:[{
// //Ext的组件 给我们提供了一个简单的写法 xtype属性去创建组件
// xtype:'panel',
// width:'50%',
// height:100 ,
// html:'我是面板'
// },
// new Ext.button.Button({
// text:'我是按钮' ,
// handler:function(){
// alert('执行!!');
// }
// })
{
xtype:'button' ,
text:'我是按钮',
handler:function(btn){
alert('我被点击了');
alert(btn.text);
}
}
// ]
//
// });
// win.show();
var win = new Ext.Window({
id:'mywin' ,
title:'操作组件的形式' ,
width:500 ,
height:300 ,
renderTo:Ext.getBody() ,
//表示在当前组件的top位置添加一个工具条
tbar:[{ //bbar(bottom) lbar(leftbar) rbar(rightbar) fbar(footbar)
text:'按钮1' ,
handler:function(btn){
//组件都会有 up、down 这两个方法(表示向上、或者向下查找) 需要的参数是组件的xtype或者是选择器
alert(btn.up('window').title);
}
},{
text:'按钮2' ,
handler:function(btn){
//最常用的方式
alert(Ext.getCmp('mywin').title);
}
},{
text:'按钮3' ,
handler:function(btn){
//以上一级组件的形式去查找 OwnerCt
//console.info(btn.ownerCt);
alert(btn.ownerCt.ownerCt.title);
}
}]
});
win.show();
});
5window窗口的复杂使用
Ext.onReady(function(){
//ex003:用windowGroup对象去操作多个window窗口
var wingroup = new Ext.WindowGroup();
for(var i = 1 ; i <=5;i++){
var win = Ext.create('Ext.Window',{
title:'第' + i + '个窗口' ,
id:'win_' + i ,
width:300 ,
height:300 ,
renderTo:Ext.getBody()
});
win.show();
wingroup.register(win); //把窗体对象注册给ZindexManger
}
var btn1 = Ext.create('Ext.button.Button',{
text:'全部隐藏' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.hideAll(); //隐藏所有被管理起来的window组件
}
});
var btn2 = new Ext.button.Button({
text:'全部显示' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.each(function(cmp){
cmp.show();
});
}
});
var btn3 = new Ext.button.Button({
text:'把第三个窗口显示在最前端' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.bringToFront('win_3'); //把当前的组件显示到最前端
}
});
var btn4 = new Ext.button.Button({
text:'把第五个窗口显示在最末端' ,
renderTo:Ext.getBody(),
handler:function(){
wingroup.sendToBack('win_5'); //把当前的组件显示到最后
}
});
});
参考
- ^免写xtype