extjs学习04——extjs的初级UI设计1
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结
一、Ext.Button
说明:改组件代替了传统submit,reset,button等html控件。
构造参数:-text:按钮上的名称
属性:-text:获得当前按钮上的名称
-minWidth:按钮的最小宽度
方法:-setText:设置按钮上的名称
事件:-click:当点击按钮时触发
Ext.onReady(function(){
var _button = new Ext.Button({
renderTo:Ext.getBody(),//此处采用document.body也等同;renderTo始终渲染在页面的body
text:"确定",
handler:function(){【只能代替click事件】
alert(“hello”);
}
});
alert(_button.text);
_button.setText(“取消”);
【_button.text=“取消” 是无效的,因为text属性是read only的】
listeners:{【推荐使用】
“click”:function(){
alert(“world”);
}
}
_button.on(“click”,function(){【extjs的传统写法,写法灵活】
alert(“extjs”);
});
});
引申
属性:
-renderTo:将当前对象所生成的html对象存放进指定的对象中【在里面】
//-applyTo:将当前对象放在构建的对象上【在上面】
构造参数:
-handler:指定一个函数句柄,在默认事件触发时调用,此时的默认事件为click
【当点击按钮时触发的函数(可以用于代替click事件). 】
-listeners:在对象初始化之前,将一系列事件进行定义的手段,在进行组件化编程时特别有用。
【一个配置对象,包含一个或多个事件处理函数,在对象初始化时添加到对象。 它应该是addListener指定的一个有效的监听器配置对象, 一次添加多个事件处理函数。 】
二、Ext.form.TextField
说明:该组件代替了传统的text组件
属性:
-fieldLabel:文本框的标签名称
方法:
-getValue():得到当前文本框的值
Ext.onReady(function(){
var _panel = new Ext.Panel({
renderTo:Ext.getBody(),
layout:"form",【指定一个form布局】
labelWidth:30,
listeners:{
"render":function(_panel){【在对象被添加进指定容器元素后触发】
_panel.add(new Ext.form.TextField({
id:"txt_name",
fieldLabel:"姓名"
}));
}
}
【add方法如果放在此处会出错,因为add方法一定要在_panel对象完全构建完成后才能执行 ,而Ext却不是逐行执行的,所以要放在render事件里面,是运行时方法】
});
new Ext.Button({
text:"确定",
renderTo:Ext.getBody(),
handler:function(){
alert(Ext.getCmp("txt_name").getValue());
}
});
});
引申:
Ext.layout.FormLayout:只有在此布局下才能正确显示文本框的标签名,布局的宿主 对象必须是Ext.Container或者是Ext.Container的子类
在应用FormLayout布局时只要在宿主对象的构造参数中指定layout:”form”即可。
Ext.getCmp(String _id):得到id为**的组件对象
三、Ext.Panel
说明:从某种意义来讲,彻底改变了网页界面是通过html table进行布局的历史
属性:
-title:面板的标签名
-width:指定面板的宽度
-height:指定面板的高度
-frame:为true时把四个角变成圆角
方法:
-addButton(String/Object _config,Function _handler,Object _scope):添加一个按钮对象到面板中
-add(Ext.Component/Object _component):添加一个组件到面板中
事件:
-render:当前对象被正确构造后触发
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"...",
frame:true,
width:200,
height:300,
layout:"form",
listeners:{
"render":function(_panel){
_panel.add({xtype:"textfield",fieldLabel:"name"});【xtype机制】
_panel.add(new Ext.form.TextField({
fieldLabel:"address"
}));
}
}
});
_panel.addButton({text:"..."});【这种方式的按钮是由form创建的】
_panel.addButton(new Ext.Button({text:"...",minWidth:100}));
【这种方式是由我们添加好了再放进去的】
【此处的addButton是设计时方法,需要在当前对象未构建前运行】
_panel.render(Ext.getBody());
【在render方法之后执行addButton方法是无效的】
_panel.applyToMarkup(
Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div")
);
});
引申:
属性:
-xtype:在Extjs的可视化组件部署中有一种xtype机制,即通过指定xtype的值,来告诉容器组件如何初始化包含组件,如xtype:”textfield”,表示使用Ext.form.TextField来进行初始化。
四、通过构造参数方式进行组构
-items:指定包含在面板中的组件的配置数组
-buttons:指定包含在面板中的按钮的配置数组
Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"...",
frame:true,
width:200,
height:300
layout:"form",
labelWidth:45,
defaults:[xtype:"textfield",width:180],
items:[{
fieldLabel:"name"
},{
fieldLabel:"address"
}],
buttons:[{
text:".1.."
},{
text:".2.."
}]
});
_panel.applyToMarkup(
Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div")
);
});
extjs学习04——extjs的初级UI设计1
最新推荐文章于 2020-12-24 14:38:56 发布