`

ExtJs-FormPanel学习

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="ext/resources/css/ext-all.css" type="text/css"
 rel="stylesheet" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
 Ext.onReady(function() {
  var form1 = new Ext.FormPanel({
   width : 350,
   frame : true,
   renderTo : 'form1',
   title : 'FormPanel',
   bodyStyle : 'padding:5px 5px 0',//制定body元素的CSS样式
   defaults : {//应用在全体组件上的配置项对象，无论组件是由items指定，抑或是通过a……
    width : 200,
    xtype : 'textfield'
   },
   items : [ {//此容器的组件集合
    fieldLabel : "UserName",//文本框标题
    //xtype : 'textfield',//表单文本框
    name : 'user',//后台通过name属性来获得该组件的值
    id : 'user',
    //width : 200
   }, {
    fieldLabel : 'Password',//在组件旁边那里显示的label文本, 默认为""
    //xtype : 'textfield',//用于登记一个xtype
    inputType : 'password',//input的各种类型，其中有radio，check，text（默认），file，password
    name : 'pass',
    id : 'pass',//唯一的组件id(默认为自动分配的id)
    //width : 200
   } ],
   buttons : [ {//面板的按钮组成元素
    text : '确定'
   }, {
    text : '取消',
    handler : function() {
     alert('事件！');
    }
   } ]
  });
 });
</script>
</head>
<body>
 <div id="form1"></div>
</body>
</html>

 主要是一些代码，其中解释了一些属性的用途

 

分享到：
| ExtJs--FormPanel主要配置项
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics