常用窗体表单布局

  1 Ext.define(‘PMS.view.whm.dailyWarehouseManagement.suppliesInventoryPlan.EditSuppliesInventoryPlan‘, {
  2     extend: ‘Ext.window.Window‘,
  3     alias: ‘widget.editSuppliesInventoryPlan‘,
  4     border: false,
  5     modal: true,
  6     autoScroll: true,
  7     width: 580,
  8     height: 250,
  9     layout: ‘fit‘,
 10     title: ‘新建物资盘点计划‘,
 11     initComponent: function () {
 12         var me = this;
 13         var record = me.record;
 14         Ext.applyIf(me, {
 15             items: [{
 16                 xtype: ‘form‘,
 17                 name: ‘addPlanForm‘,
 18                 layout: ‘vbox‘,
 19                 frame: true,
 20                 border: true,
 21                 bodyPadding: 20,
 22                 items: [
 23                    {
 24                        xtype: ‘fieldcontainer‘,
 25                        layout: ‘hbox‘,
 26                        defaults: {
 27                            labelWidth: 80,
 28                            width: 240,
 29                            margin: ‘5 0 5 0‘,
 30                            msgTarget: ‘side‘,
 31                            autoFitErrors: false,
 32                            labelAlign: ‘right‘
 33                        },
 34                        items: [{
 35                            //第一行
 36                            //1.1 计划名称-编制说明
 37                            xtype: ‘textfield‘,
 38                            fieldLabel: ‘计划名称‘,
 39                            name: ‘InventoryPlanName‘,
 40                            allowBlank: false,
 41                            blankText: "plann name cannot be empty.",
 42                            value: me.edit ? record.get(‘InventoryPlanName‘) : null
 43                        }, {
 44                            xtype: ‘textfield‘,
 45                            fieldLabel: ‘编制说明‘,
 46                            name: ‘PrepareState‘,
 47                            value: me.edit ? record.get(‘PrepareState‘) : null
 48                        }]
 49                    }, {
 50                        xtype: ‘fieldcontainer‘,
 51                        layout: ‘hbox‘,
 52                        defaults: {
 53                            labelWidth: 80,
 54                            width: 240,
 55                            margin: ‘5 0 5 0‘,
 56                            msgTarget: ‘side‘,
 57                            autoFitErrors: false,
 58                            labelAlign: ‘right‘
 59                        },
 60                        items: [{
 61                            //第二行
 62                            //2.编制人 2.编制人部门
 63                            xtype: ‘textfield‘,
 64                            fieldLabel: ‘编制人‘,
 65                            name: ‘Preparer‘,
 66                            disabled: true,
 67                            value: me.edit ? record.get(‘Preparer‘) : ‘Admin‘
 68                        }, {
 69                            xtype: ‘textfield‘,
 70                            fieldLabel: ‘部门‘,
 71                            name: ‘Depart‘,
 72                            disabled: true,
 73                            value: me.edit ? record.get(‘Depart‘) : ‘机动部‘
 74                        }]
 75                    }, {
 76                        xtype: ‘fieldcontainer‘,
 77                        layout: ‘hbox‘,
 78                        defaults: {
 79                            labelWidth: 80,
 80                            width: 240,
 81                            margin: ‘5 0 5 0‘,
 82                            msgTarget: ‘side‘,
 83                            autoFitErrors: false,
 84                            labelAlign: ‘right‘
 85                        },
 86                        items: [{
 87                            //第三行 编制日期  备注
 88                            xtype: ‘datefield‘,
 89                            anchor: ‘100%‘,
 90                            fieldLabel: ‘编制日期‘,
 91                            maxValue: new Date(),
 92                            name: ‘PrepareDate‘,
 93                            disabled:true,
 94                            value: me.edit ? record.get(‘PrepareDate‘) : new Date()
 95                        }, {
 96                            xtype: ‘textfield‘,
 97                            anchor: ‘100%‘,
 98                            fieldLabel: ‘备注‘,
 99                            name: ‘Remark‘,
100                            value: me.edit ? record.get(‘Remark‘) : null
101                        }]
102                    }]
103             }],
104             dockedItems: [{
105                 xtype: ‘toolbar‘,
106                 dock:‘bottom‘,
107                 items: [‘->‘, {
108                     xtype: ‘button‘,
109                     name: ‘saveBtn‘,
110                     iconCls: ‘save‘,
111                     text: ‘保存‘
112                 }, {
113                     xtype: ‘button‘,
114                     name: ‘cancelBtn‘,
115                     iconCls: ‘delete‘,
116                     text: ‘取消‘,
117                     margin: ‘0 10 0 10‘
118                 }]
119             }]
120         });  //Ext.applyIf
121         me.callParent(arguments);
122     } // 构造函数
123
124
125 });     //定义window

常用窗体表单布局,布布扣,bubuko.com