Ext Form布局

最新推荐文章于 2018-12-19 19:25:00 发布

原创最新推荐文章于 2018-12-19 19:25:00 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #stylesheet #html #function #layout #div

Ext 专栏收录该内容

10 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建的基本表单示例。该表单包含两个字段：帐户和密码，采用右对齐标签布局。通过Ext.form.FormPanel组件实现，展示了如何设置表单的基本属性和渲染。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </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>
</head>

<body>
    <script>
    Ext.onReady(function(){
        new Ext.form.FormPanel({//这行换成 new Ext.Panel({ 是等效的
             renderTo:'show',
             title:'我的表单',
             width:300,
             //若实例化的是panel请加上声明布局为form layout:'form',
             labelAlign:'right', //标签为右对齐
             height:120,
             defaultType: 'textfield', //默认字段类型为文本域
             items:[{
                       fieldLabel:'帐户',
                       name:'name'
                   },{
                       fieldLabel:'密码',
                       name:'pws'
                   }]

        });
    });
    </script>
<div id='show'></div>
</body>
</html>