extjs和asp的完美结合！ - 编程论坛

extjs是一个比较美观的JS框架，是实现富客户端编程的较为理想的框架
通过以下示例，可看出是可以与ASP完美的结合，并非是.NET PHP JAVA才能实现的（应该是说EXTJS基于客户端编程，与服务器端编程无关）

程序代码：

代码：
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>登陆</title>
<script type="text/javascript"src="js/extjs/ext-base.js"></script>
<script type="text/javascript"src="js/extjs/ext-all.js"></script>
<script type="text/javascript"src="js/extjs/ext-lang-zh_CN.js"></script>
<link rel="stylesheet"type="text/css"href="js/extjs/resources/css/ext-all.css">
</head>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL="js/extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.onReady(function (){

scode=function(){
     Ext.getDom("imgcode").src="Code.asp?dt=" + (new Date()).getTime();
   }

var LGForm=new Ext.FormPanel({
  el:'hello-tabs',
  name:'LGForm',
  title:'用户登录(User Login)',
  bodyStyle:"padding:10 5 10 5px",
  contentEl:'loginInfo',
  layout:'form',
  frame:true,
  border:false,
  keys:[{key: [10,13],fn:Pass}],
  defaults:{
   width:230
  },
  items:[{
   xtype:"textfield",
   fieldLabel:'帐号(ID??)',
   name:'username',
   allowBlank:false
  },
  {
   xtype:"textfield",
   fieldLabel:'密码(?? ??)',
   name:'password',
   inputType:'password',
   allowBlank:false
  },
  {
   xtype:'panel',
   defaults:{border : false,frame:false},
   style:'border-left: 0px solid #000000;',
   width:420,
   layout:'column',
   items:[{
    columnWidth:.6,
    layout : 'form',
                items:[{ xtype:'textfield',
             width:180,
       fieldLabel : '验证码(????)',
       name : 'verifycode',
       allowBlank:false,
       anchor : '98%'}]
   },{
    xtype:'panel',
    columnWidth:.4,
    html:"<a href='javascript:scode()'><img src='Code.asp' id='imgcode' width='50' height='20'></a>"
   }]
  }

]
});
var _window=new Ext.Window({

el:'hello-win',
frame:true,

width:420,

height:278,

layout:"fit",

closeAction:'close',
modal:true,

collapsible:true,

draggable:true,

resizable:false,

closable:true,

buttonAlign:"center",

bodyStyle:"padding:1 1 1 1px",

labelWidth:40,

items:[LGForm],

buttons:[{
  text:"登陆(Login)",
  handler:Pass

},

{
  text:"关闭(Close)",
  handler:function () {
   _window.close();
  }

}]
});
function Pass () {
   if(LGForm.form.isValid()) {
    LGForm.form.submit({
     url:'login_post.asp',
     waitTitle:"请稍候",
     method:'POST',
     waitMsg:"正在提交数据,请稍候....",
     success:function (form,action) {
      var loginResult=action.result.success;
      if(loginResult==false) {
       Ext.MessageBox.alert('提示',action.result.message);
      }else if(loginResult==true) {
       window.location.href='main.html';
      }
     },
     failure:function (form,action) {
      Ext.MessageBox.alert('提示',action.result.message);
      //_window.getComponent('LGForm').form.reset();
     }
    });
   }
  }
_window.show();
});
</script>
<body>
<div id="center-zone"style="text-align:center;float:center;margin-left:400px;margin-top: 200px;width:210px;"></div>
<div id="hello-win" class="x-hidden">
<div id="hello-tabs"><img  src="images/coc.jpg" width="405" align="center"></div>
<div id='loginInfo'></div></div>
</body>
</html>

只有本站会员才能查看附件，请登录

更多的关于ASP与EXTJS的编程，可到我的博客一看: blog.

[ 本帖最后由 bluegone 于 2010-11-22 22:24 编辑 ]