1:button
var button=new Ext.Button({
renderTo:Ext.getBody(),
text:"确定", //标题
minWidth:100, //最小宽度
});
button事件:
var button=new Ext.Button({
renderTo:Ext.getBody(),
text:"确定",
minWidth:100,
listeners:{"click":function(){
alert("欢迎学习Ext!");
}
}
});
listeners:在对象初始化之前,就将一系列的时间进行定义。
加事件也可以用handler:
handler:function(){alert("hello")}
handler:指定一个函数的句柄,在默认事件触发时调用,此时默认时间是click。
对象的引用.on()也也可以添加事件如:
button.on("click",function(){
alert("你好");
});
2.textField
为form标签,要显示text前面的fieldLable,必须将textField放入form布局中。
可以通过getValue()方法来获取文本框的值,如:
Ext.getCmp("id").getValue()。
Ext.getCmp("id") 获取id名为**的对象。
3.panel
var panel= new Ext.Panel({
title:"测试",
width:300,
height:200
});
面板添加按钮://设计时添加
panel.addButton({text:"确定"});//将由panel来设计
panel.addButton(new Ext.Button({text:"取消",mixWidth:100})) //自己设计
panel.render(Ext.getBody());//没有render将会不显示添加的两个按钮
属性:
frame:将四个角变成圆角。
panel居中代码:
<style type="text/css">
.contain
{
width:100%;
height:100%;
top:0;
left:0
}
.center
{
position:absolute;
top:30%;
left:43%;
text-align:left;
}
</style>
<script>
Ext.onReady(function(){
var panel= new Ext.Panel({
title:"测试",
frame:true,
width:300,
height:200,
layout:"form",
labelWidth:45,
listeners:{
"render":function(pan){
pan.add({xtype:"textfield",fieldLabel:"姓名"});
pan.add(new Ext.form.TextField({
fieldLabel:"地址"
}))
}
}
});
panel.addButton({text:"确定"});//将由panel来设计
panel.addButton(new Ext.Button({text:"取消",minWidth:100})) //自己设计
//panel.render(Ext.getBody());//没有render将会不显示添加的两个按钮
panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div"));
});
//上面的代码是1.x中的写法,来看下2.x中的:
把集合元素都放到items中了,如:
Ext.onReady(function(){
var panel= new Ext.Panel({
title:"测试",
frame:true,
width:300,
height:200,
layout:"form",
labelWidth:45,
defaults:{xtype:"textfield",width:180},
items:[{
fieldLabel:"账号"
},{
fieldLabel:"密码"
}],
buttons:[{text:"确定"},{text:"取消"}]
});
//panel.render(Ext.getBody());//没有render将会不显示添加的两个按钮
panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div"));
});
在window通过按钮获取其他元素对象:
var _window=new Ext.Window({
title:"测试窗体",
layout:"form",
width:300,
plain:true,
items:[{
xtype:"textfield",
fieldLabel:"姓名"
},
{
xtype:"textfield",
fieldLabel:"密码"
}],
buttons:[{
text:"确定",
handler:function(){
var coll=this.ownerCt.items;
//this.ownerCt表示当前组建所在的父组建
alert("姓名是:"+coll.itemAt(0).getValue()+" 密码是:"+coll.itemAt(1).getValue());
}
}]
});
_window.show();
});