第三章:初级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