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 编辑 ]