ExtJs—FormPanel居中

最新推荐文章于 2021-06-22 01:55:34 发布

不善^

最新推荐文章于 2021-06-22 01:55:34 发布

阅读量1.6w

点赞数

分类专栏： JavaScript 文章标签： extjs stylesheet validation login html class

本文链接：https://blog.csdn.net/java_cxrs/article/details/5684088

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

初学ExtJs 在使用FormPanel时发现产生后在窗口的左上方，在API里找了下配置属性貌似没看到可以让FormPanel居中的

也许是有这个属性但是我没注意到，如果知道的朋友希望能给我说下

虽然没有找到居中的属性但是可以通过以下的方法使FormPanel居中

代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Register</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/> <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-all.js"></script> <style> .main{ width:100%; text-align:center; vertical-align:center; } .login{ margin-left:auto; margin-right:auto; text-align:center; width:500px; height:200px; } </style> <body> <div class="main" id="main"> <div class="login" id="login"></div> </div> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); // turn on validation errors beside the field globally //Ext.form.Field.prototype.msgTarget = 'side'; var bd = Ext.getBody(); /* * ================ Simple form ======================= */ // bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'}); var loginPanel = new Ext.FormPanel({ labelWidth: 75, // label settings here cascade unless overridden url:'save-form.jsp', frame:true, title: '用户登陆', bodyStyle:'padding:5px 5px 0', buttonAlign:'center' , width: 400, defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: '        用户名', name: 'uname', allowBlank:false, blankText:'用户名不能为空', minLength:6, minLengthText:'用户名的长度为[6-20]', maxLength:20, maxLengthText:'用户名的长度为[6-20]' },{ xtype: 'textfield', inputType:'password', fieldLabel:'        密   码', name:'pwd', allowBlank:false, blankText:'密码不能为空', minLength:6, minLengthText:'密码的长度为[6-20]', maxLength:20, maxLengthText:'密码的长度为[6-20]' }], buttons: [{ text: 'Save' },{ text: 'Cancel' }] }); loginPanel.render("main"); }); </script> </body> </html>