- 论坛徽章:
- 0
|
在测试过程中,在IE中的显示效果与以下帖图不完全一样。但在FF中是一样的。
2、Ext.Panel
下面讲解事件render,事件render是指当前对象正确构造触发,方法add和getCmp,例子代码如下:
///
//样式
.person_panel
{
padding: 5px inherit inherit 5px;
margin: 5px auto auto 5px;
}
.person_textfield
{
margin: 5px auto auto 5px;
}
Ext.onReady(function(){
var _panel = new Ext.Panel({ //Panel:面板
title:"人员信息",
width:200,
height:150,
cls:"person_panel",
renderTo:Ext.getBody(),
layout:"form",
labelWidth:30,
listeners:{
"render":function(_panel){ //事件render:当当前对象被正确构造后触发
_panel.add(new Ext.form.TextField({ //方法add:添加一个组件到面板中
cls:"person_textfield",
id:"txt_name",
fieldLabel:"姓名",
labelStyle: 'font-weight:bold;margin: 5px auto auto 5px;'
// labelSeparator: '...'
}));
}
}
})
new Ext.Button({
text:"确 定",
cls:"person_panel",
renderTo:Ext.getBody(), //属性renderTo:将当前对象所生成的HTML对象存放到指定的对象中
handler:function(){
var txt = Ext.getCmp("txt_name").getValue();//Ext.getCmp("String_id")得到id为String_id的组件对象
Ext.Msg.alert("提示",txt);
}
});
});
执行上述代码,如下图所示:
![]()
再看下面的例子,主要方法addButton两种构造方式的不同,例子代码如下:
Ext.onReady(function(){
var _panel = new Ext.Panel({ //Panel:面板
title:"人员信息",
frame:true, //属性frame:把四个角变成圆角
cls:"person_panel", //属性cls:增加样式
width:200,
height:150
})
_panel.addButton({text:"确 定"}); //按form的自身构造对象
_panel.addButton(new Ext.Button({text:"取 消",minWidth:100})); //重新构造一个对象
_panel.render(Ext.getBody());
});
执行上述代码,如下图所示:
![]()
接下来重点讲解属性xtype:在EXTJS的可视化组件部署中有一种xtype机制,即通过指定xtype的值来告诉容器组件如何初始化包含组件,如xtype:"textfield",表示使用Ext.form.TextField来进行初始化。运行帮助文档查看xtype的类型信息,如图:
![]()
接下来看一个完整的登陆实例,代码如下图所示:
Ext.onReady(function(){
var _panel = new Ext.Panel({ //Panel:面板
title:"登 陆",
frame:true, //属性frame:把四个角变成圆角
width:260,
height:130,
layout:"form",
labelWidth:45,
defaults:{xtype:"textfield",width:180},
items:[{ //items:指定包含在面板中的组件的配置数组
fieldLabel:"账 号"
},{
fieldLabel:"密 码"
}],
buttons:[{
text:"确 定"
},{
text:"取 消"
}]
});
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{ //applyToMarkup:在当前组件上动态创建
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div")); //true:表示applyToMarkup当前返回的是ExtJs对象
});
执行上述代码,如下图所示:
![]()
本文来自ChinaUnix博客,如果查看原文请点:http://blog.chinaunix.net/u/22371/showart_2044613.html |
|