Ext简单表单

  小小的表单，给大家分享一下，有可能大家会用的到。

啥也不说啦，童鞋们也没心情看这些废话，请看表单的代码吧！

一、

//定义一个表单

var form = new Ext.form.FormPanel({
   title:'资产租赁登记',
   randerTo:'form',
   layout: 'anchor',
   frame:true,
   width: 500,
   height: 500,
   padding: 5,   
   //tbar:tb,
   reader: new Ext.data.JsonReader({ //用于通过JSON将数据填充到表单
     success : 'success',
     root : 'root'
    }, [{
     name: 'lsh',type: 'string'},

{name: 'codw',type: 'string'},

{name: 'cojbr',type: 'string'},

{name: 'colxfs',type: 'string'},

{name: 'cidw',type: 'string'},

{name: 'cijbr',type: 'string'},

{name: 'cilxfs',type: 'string'},

{ name: 'zcbh',type: 'string'},

{ name: 'zljg',type: 'string'},

{name: 'qsrq',type: 'string'},

{name: 'jzrq',type: 'string'},

{name: 'bz',type: 'string'}

]),
 items: [{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'lsh',name:'lsh',border:false,anchor:'70%',fieldLabel: '申请单号',readOnly:false}]}] },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'zcbh',name:'zcbh',border:false,anchor:'70%',fieldLabel: '资产编号',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'zljg',name:'zljg',border:false,anchor:'70%',fieldLabel: '租赁价格',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'codw',name:'codw',border:false,anchor:'70%',fieldLabel: '出租方',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'cidw',name:'cidw',border:false,anchor:'70%',fieldLabel: '承租方',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'cojbr',name:'cojbr',border:false,anchor:'70%',fieldLabel: '出租方经办人',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'cijbr',name:'cijbr',border:false,anchor:'70%',fieldLabel: '承租方经办人',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'colxfs',name:'colxfs',border:false,anchor:'70%',fieldLabel: '出租方联系方式',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'textfield',id:'cilxfs',name:'cilxfs',border:false,anchor:'70%',fieldLabel: '承租方联系方式',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'datefield',id:'qsrq',name:'qsrq',border:false,anchor:'70%',fieldLabel: '租赁起始日期',readOnly:false}]
      }]
     },{
      layout: 'column',
      border:false,
      padding: 0,

      items: [{
       columnWidth: 0.99,
       layout: 'form',
       border:false,
       items: [{xtype: 'datefield',id:'jzrq',name:'jzrq',border:false,anchor:'70%',fieldLabel: '租赁截止日期',readOnly:false}]
      }]
     },{
      border:false,
      items: [{
       layout: 'form',
       border:false,
       items: [{xtype: 'textarea',id:'bz',name:'bz',border:false,anchor:'80%',fieldLabel: '备注',readOnly:false}]
      }]
     }]
    

二、图片效果如图：
  });