初学EXT，表单没在网页显示，求指导
日期：2014-05-16 浏览次数：20393 次
初学EXT，表单没有在网页显示，求指导
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form</title>
<link rel="stylesheet" type="text/css" href="EXT/resources/css/ext-all.css"/>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript" src="EXT/bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
width:350,//面板宽度
height:150,//面板高度
frame:true,//圆角和浅蓝色背景
title:"FormPanel",//表单面板的标题
bodyStyle:"padding:5px 5px 0",//正文区域的样式
labelAlign:"right",//统一的提示信息对齐方式，此处为右对齐
//default:{width:200,xtype:"textfield"},
items:[
new Ext.form.TextField({
fieldLabel:"用户名",//表单域提示信息
name:"user",//用于访问的name
allowBlank:false,//不允许为空
}),{
fieldLable:"密码",
name:"pass",
xtype:"textfield",//表示表单域的类型，此处即为Ext.form.TextFiled
inputType:"PassWord",//输入框类型，有三种：文本框，密码框，文件域
allowBlank:false,
}],
buttons:[{
text:"确定",
handler:function(){
//得到name为userName的表单域控件的值
var userName = f.getForm().findField("userName").getValue();
var password = f.getForm().findField("password").getVaule();
Ext.Msg.alert("","用户名："+userName+"<br>密码："+password);
}
},{
text:"重置",
handler:function(){
f.getForm().reset();//重置表单面板中所有表单组建的值
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
------解决方案--------------------
少了renderTo配置
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
width:350,//面板宽度
renderTo:document.body,
不配置这个就需要手动调用实例的render方法
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form</title>
<link rel="stylesheet" type="text/css" href="EXT/resources/css/ext-all.css"/>
<script type="text/javascript" src="EXT/ext-all.js"></script>
<script type="text/javascript" src="EXT/bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
width:350,//面板宽度
height:150,//面板高度
frame:true,//圆角和浅蓝色背景
title:"FormPanel",//表单面板的标题
bodyStyle:"padding:5px 5px 0",//正文区域的样式
labelAlign:"right",//统一的提示信息对齐方式，此处为右对齐
//default:{width:200,xtype:"textfield"},
items:[
new Ext.form.TextField({
fieldLabel:"用户名",//表单域提示信息
name:"user",//用于访问的name
allowBlank:false,//不允许为空
}),{
fieldLable:"密码",
name:"pass",
xtype:"textfield",//表示表单域的类型，此处即为Ext.form.TextFiled
inputType:"PassWord",//输入框类型，有三种：文本框，密码框，文件域
allowBlank:false,
}],
buttons:[{
text:"确定",
handler:function(){
//得到name为userName的表单域控件的值
var userName = f.getForm().findField("userName").getValue();
var password = f.getForm().findField("password").getVaule();
Ext.Msg.alert("","用户名："+userName+"<br>密码："+password);
}
},{
text:"重置",
handler:function(){
f.getForm().reset();//重置表单面板中所有表单组建的值
}
}]
});
});
</script>
</head>
<body>
</body>
</html>
------解决方案--------------------
少了renderTo配置
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
width:350,//面板宽度
renderTo:document.body,
不配置这个就需要手动调用实例的render方法
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
