ExtJs入门练习：Window式简单Form

代码执行结果截图：

/********************************************
 * @author  [e-mail] (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);
  }
})