Extjs学习笔记03

第三章：初级UI(1)

第一节:button

(1) 构造函数

text:属性 按钮名称

renderTo:属性(当前对象所生成的HTML对象要存放的位置)

Ext.body获得页面的body

minWidth按钮最小宽度

2:事件句柄

handler:默认事件触发

listeners：订阅多个事件在组件化开发有用

写法

Ext.onReady(function(){

var _button =   new Ext.Button({

text:"Hello World",

renderTo:Ext.getBody(),

minWidth:100,

listeners:{

"click":function(){

alert('Hello');

}

} 

});

_button.setText('测试');

});

 

 

第三中事件订阅

 

利用对象的on方法参数("事件名称"，函数)；

例如

Ext.onReady(function(){

var _button =   new Ext.Button({

text:"Hello World",

renderTo:Ext.getBody(),

minWidth:100

});

_button.on("click",function(){

alert("Hello");

});

});

第二节：Ext.form.TextField

代替了传统的text组件

配置参数：fieldLabel标签名称

方法：getValue()返回文本框内容

 

 

布局模式

Ext.getCmp("id")获取ID为id的UI页面元素。

Ext中UI组件放到页面上是要指定到一个布局容器中，并且要为这个容器指定布局模式。否则像一些Form类的UI的lable是无法显示的。

这些容器是来自Ext.Container类的其中以panel为代表。

panel

配置属性

layout:设置布局模式

title:标题

事件

render：面板被添加到页面中触发

方法：

add:象面板添加Ui