EXTJS初级UI设计进阶阶段

来源：互联网发布：齐鲁软件大赛编辑：程序博客网时间：2024/05/19 02:25

了解Ext.Button

说明：该组件代替了传统submit、reset、button HTML控件

Ext.onready(function(){
var -button = new Ext.Button(
renderTo:Ext.getBody()，
text:"确定"，
miniWidth:100,
handler:function(){                                        --》默认事件
alert(""欢迎学习extjs!);
}
listeners:{                                                         --》定义事件
"click":function(){
alert(""欢迎学习extjs!);
}
}
-button.on(click,function(){                           --》引发事件
alert(""欢迎学习extjs!);
});
);
document.body = Ext.getBody.dom;
-button.setText("取消");
});
属性：
renderTo:将当前对象所产生的HTML对象存放进指定的对象中；
text：获得当前按钮上的名称

构造参数：

text----按钮上的名称;
handler----制定一个函数句柄，在默认事件触发时调用，此时的默认事件是click
listeners----这个实在对象初始化之前，就将一系列事件进行定义的手段，在进行组件化编程时，特别有用。

了解Ext.form.textField

Ext.layout.FormLayout:只有再次布局下才能正确显示文本框的标签名，布局的宿主对象必须是Ext.Containner或者Ext.Container的子类；-----》否则fieldLabel不显示等

var -panel = new Ext.Panel([

renderTo:Ext.getBody(),
layout:"form",
labelWidth:30,
listeners:{
"render":function(-panel){
-panel.add(new Ext.form.textField(
id:"text_name",
fieldLabel:"姓名"
));
}
}]);
new Ext.Button({
text:"确定",
renderTo:Ext.getBody();
handler:function(){
alert(Ext.getCmp("text_name").getValues());
}
});

了解Ext.form.Panel

说明：从某种意义上讲，其彻底改变了网页界面是通过HTML Table进行布局的历史

属性：

title：面板的标签名
width：制定面板宽度
height：制定面板高度
frame：将面板直角变成圆角
Ext.onready(function(){
var -panel = new Ext.Panel({
title:"人员信息",
width:200,
height:300,
frame:true
});
-panel.addButton({text："确定"});
-panel.addButton(new Ext.Button({text:"取消"}));
-panel.render(Ext.getBody());
});
下例：不顶边面板：使用了样式表
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.contain{
position:absosule;
top:50%;
left:43%;
text-align:lsft;
}
Ext.onready(function(){
var -panel = new Ext.Panl({
title:"人员信息",
frame:true,
width:200,
height:300
});
-panel.addButton({text:"确定"});
-panel.addButton(new Ext.Button({text:"取消",miniWidth:100}));
-panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",                             本行以及上一行代码是创建了一个div
cn:[{tag:"div",                             本行以及以下两行是创建一个子div
        cls:"center"
}]
},true).child("div"));
});
render:在他之上                                              --》renderTo
applyTo:在他之上                                            --》applyToMarkup

综合示例

做一个登陆示例：

.contain{

width:100%;
height:100%;
top:0;
left:0;

}

.contain{

position:absosule;
top:50%;
left:43%;
text-align:lsft;

}

Ext.onready(function(){

var -panel = new Ext.Panl({
title:"登陆",
frame:true,
width:260,
height:130，
layout:"form",
labelWidth:45,
listeners:{
"render":function(-panel){
-panel.add({xtype:"textfield",fieldLabel:"账号",width:180});
-panel.add({xtype:"textfield",fieldLabel:"密码",width:180});
}
}
//以下是另一种写法
defaults:{xtype:"textfield",width:180},
items:[{fieldLabel:"账号"
},{
fieldLabel:"密码"
}]，
buttons:[{text:"确定"
},{
text:"取消"
}]
});
-panel.addButton({text:"确定"});
-panel.addButton({text:"取消"});
-panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",                             本行以及上一行代码是创建了一个div
cn:[{tag:"div",                             本行以及以下两行是创建一个子div
        cls:"center"
}]
},true).child("div"));

});