代码执行结果截图:
[img]http://dl.iteye.com/upload/attachment/244127/a6d4be22-70f1-3233-8d43-84d8eac3164a.gif[/img]
[img]http://dl.iteye.com/upload/attachment/244127/a6d4be22-70f1-3233-8d43-84d8eac3164a.gif[/img]
/********************************************
* @author henyue@gmail.com (Kong)
* @version CreatedTime:2010-05-04 上午10:59:45
* @Description ExtJs入门练习:Window式简单Form
********************************************/
Ext.onReady(function() {
showPopupPanel = function() {
var form = new Ext.FormPanel({
labelAlign : 'top',
frame : true,
// title : 'Main Form Title',
bodyStyle : 'padding:5px 5px 0',
layout : 'form',
items: [
{
xtype : 'textfield',
fieldLabel : '标题',
name : 'title',
anchor : '100%'
}, {
xtype : 'textfield',
fieldLabel : '作者',
name : 'author',
anchor : '100%'
}, {
xtype : 'htmleditor',
id : 'context',
fieldLabel : '正文',
height : 200,
anchor : '100%'
}
],
buttonAlign: 'center',
buttons : [
{
text : '保存',
handler : function() {
var text = form.getForm().findField('context').getValue();
alert(text);
}
}, {
text : '取消',
handler : function() {
win.close(this);
}
}
]
});
var win = new Ext.Window({
title : 'My PopupPanel',
closeable : true,
modal : true,
//modal为True表示为当window显示时对其后面的一切内容进行遮罩,
//false表示为限制对其它UI元素的语法(默认为 false)。
width : 560,
resizable : false,
plain : true,
//Plain为True表示为渲染window body的背景为透明的背景,这样看来window body与边框元素(framing elements)融为一体,
//false表示为加入浅色的背景,使得在视觉上body元素与外围边框清晰地分辨出来(默认为false)。
layout : 'form',
items : [form]
});
win.show(this);
}
})