Form布局小实例

Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用
<script type="text/javascript">
Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"面板组件",
        width:400,
        layout:"form",
        hideLabels:false,
        labelAlign:"right",
        labelWidth:150,
        height:200,
        defaultType:'textfield',
        items:[{fieldLabel:"please write name",name:"name"},{fieldLabel:"please write address",name:"add"},{fieldLabel:"please write telephone",name:"tel"}]
    });
});

同上面的代码实现了一样的功能
Ext.onReady(function(){
    new Ext.FormPanel({
        renderTo:'hello',
        title:'container tool',
        width:300,
        //layout:'form',
        labelWidth:120,
        hideLabels:false,
        labelAlign:'right',
        height:300,
        defaultType:'textfield',
        items:[{
            fieldLabel:'name',
            name:'name'
        },{
            fieldLabel:'age',
            name:'age'
        },{
            fieldLabel:'sex',
            name:'sex'
        }]
    });
});
    </script>
  </head>
 
  <body>
   
   
    <div id="hello"></div>
  </body>
</html>

你可能感兴趣的:(ext)