一款漂亮的登陆界面

代码如下：

<script type="text/javascript">
   Ext.BLANK_IMAGE_URL="plugins/extjs/resources/images/default/s.gif";
 Ext.QuickTips.init(true);
 Ext.onReady(function(){
  var long = new Ext.Window({
   width : 400,
   height : 210,
   title : '<font color=green><b>用户登陆</b></font>',
   items : [{
    xtype : 'panel',
    layout : 'column',
    items : [{
     xtype : 'panel',
     height : 180,
     width : 200,     
     html : '<img src="images/png-1406.png" style="background-color:#fff " ban width=200 height=100%>'
    },{
     xtype : 'panel',
     frame : true,
     width : 183,     
     items : [{
      height : 50,
      html : ''
     },{
      xtype :'form',
      labelWidth : 50,
      labelAlign : 'right',
      defaults : {xtype : 'textfield', width : 105},
      items : [{
       fieldLabel : '用户名',
       name : 'userName'
      },{
       fieldLabel : '密 码',
       name : 'password',
       inputType : 'password'
      },{
       labelSeparator : '',
       xtype : 'checkboxgroup',
       name : 'remember',items:[{boxLabel : '是否记住'     }]
      }],
      buttons :[{text : '登 陆'},{text : '注 册'}]
      
     }]
    }]
   }]   
  }).show();
 })
   
   
   
  </script>

代码如下： 


   Ext.BLANK_IMAGE_URL="plugins/extjs/resources/images/default/s.gif";
 Ext.QuickTips.init(true);
 Ext.onReady(function(){
  var long = new Ext.Window({
   width : 400,
   height : 210,
   title : '用户登陆',
   items : [{
    xtype : 'panel',
    layout : 'column',
    items : [{
     xtype : 'panel',
     height : 180,
     width : 200,     
     html : ''
    },{
     xtype : 'panel',
     frame : true,
     width : 183,     
     items : [{
      height : 50,
      html : ''
     },{
      xtype :'form',
      labelWidth : 50,
      labelAlign : 'right',
      defaults : {xtype : 'textfield', width : 105},
      items : [{
       fieldLabel : '用户名',
       name : 'userName'
      },{
       fieldLabel : '密 码',
       name : 'password',
       inputType : 'password'
      },{
       labelSeparator : '',
       xtype : 'checkboxgroup',
       name : 'remember',items:[{boxLabel : '是否记住'     }]
      }],
      buttons :[{text : '登 陆'},{text : '注 册'}]
      
     }]
    }]
   }]   
  }).show();
 })
   
   
   

效果图 ：