ExtjsUI
1. Ext.Button
在button這個組件代替的是原先的<input type=“button/button/submit...”/>，
他的作用是觸發事件，和現實文字，提交表單-（json方式）等信息。
其屬性：
renderTo:----一般是上级的容器（Html-DOM模型的容器）
e.g. renderTo:Ext.getBody(),//document.body,效果是一样的
text:"確 定",
现实按钮上面的文字
minWidth : 40,
按钮的宽度
listeners:
同时监听的时间：
handler:
默认在click button的时候出发的处理事件，即是：指定一个事件句柄
综合实例：
Ext.onReady(function(){
var _text = new Ext.Button({
renderTo:Ext.getBody(),
text:"確 定",
minWidth : 40,
listeners:{
"click":function() {
alert("鎖定點擊！");
this.setDisabled(true);
}
}
});
alert(_text.text);
_text.setText("取 消");
//_text.setDisabled(true);
// _text.setHandler( function() {
// this.setDisabled(true);
// });
_text.on("click",function(){
this.setText("取=== 消");
});
});
//说明；Listeners 没有setListeners()这个方法，其他的属性都有setXyy方法。故
Listeners一定要在初始化button 的时候初始化上。
2.Ext.Panel()
Ext.onReady(function(){
var _panel = new Ext.Panel({
renderTo: Ext.getBody(),
layout:"form",//构建出来的是formPanel
/**
* layout 的值
* absolute accordion anchor auto Default border card column fit form hbox menu
* table toolbar vbox
*/
labelWidth:30,
listeners:{
"render":function(_panel){//render: 当前对象被正确构建后创建
_panel.add(new Ext.form.TextField({
id:"textName",
fieldLabel:"姓名"
}));
}
}
});
new Ext.Button({
text:"确 定",
renderTo:Ext.getBody(),
handler:function() {
alert(Ext.getCmp("textName").getValue());//getCmp("id");获得是一个组件对象
}
});
});
说明：renderTo，在初始化的时候创建，
applyTo：给定对象的操作
3.Ext.form.TextField
Ext.form.TextField 只有在
Class: Container
Subclasses: Panel, Toolbar, Viewport, Menu
Extends: BoxComponent
xtype: container
中才能显示出来，见上面Panel的例子
Ext.onReady(function(){
var _panel = new Ext.Panel({
//layout:"form",
frame:true,
labelWidth:30,
title:"人员信息",
width:400,
height:300
});
_panel.addButton({text:"确 定"});//设计时布局
_panel.addButton(new Ext.Button({
text:"取 消",
minWidth:100
}));
_panel.render(Ext.getBody());//注意不能在构造方法中设置renderTo，要不然panel已经构造完成了，button就添加不上了
});
