【弹窗系列】如何写一个表单弹窗，字段怎么写？

guoguo

一、实现效果
1、如图1所示，是一个表单弹窗。


二、实现思路
文字描述，可以配图。
三、具体操作
1、如图2所示，配置好表单的高和宽后，表单内部是一个items数组，往该数组里面丢对象即可。

2、如图3所示，先在普通表单上设置好对应的配置，之后点击编码，将这部分直接丢进items里面即可达到与表单相同的效果。

四、相关代码（可选）

1. function(btn,event,eOpts){
   
2.     JE.formWin({
   
3.             title:'主项计划',
   
4.             bodyStyle:"padding:4px",
   
5.             width:500,
   
6.             height:180,
   
7.             lablewidth:60,
   
8.             defaults:{xtype:"textfield",width:100},
   
9.             autoShow:true,
   
10.             useButton:true,
    
11.         items:[
    
12.             {
    
13.                 xtype:'treessfield',
    
14.                 fieldLabel:'责任部门',
    
15.                 name:'ZXJH_DEPARTMENT_NAME',
    
16.                 configInfo : 'JE_RBAC_DEPARTMENT,ZXJH_DEPARTMENT_NAME~ZXJH_DEPARTMENT_CODE,text~code,S',
    
17.                 allowBlank:false
    
18.             },
    
19.             {
    
20.                 xtype:'hidden',
    
21.                 fieldLabel:'责任部门编码',
    
22.                 name:'ZXJH_DEPARTMENT_CODE'
    
23.             },
    
24.             {
    
25.                 xtype:'gridssfield',
    
26.                 fieldLabel:'责任人',
    
27.                 name:'ZXJH_LEADER',
    
28.                 configInfo : 'JE_CORE_ENDUSER_JH,ZXJH_LEADER~ZXJH_ZRR_ID,USERNAME~USERID,S',
    
29.                 allowBlank:false
    
30.             },
    
31.             {
    
32.                 xtype:'hidden',
    
33.                 fieldLabel:'责任人ID',
    
34.                 name:'ZXJH_ZRR_ID'
    
35.             }
    
36.         ],
    
37.         
    
38.         fn:function(win){
    
39.             var form = win.getCmp('form');
    
40.             var values = form.getValues();
    
41.             if (!form.isValid()) {
    
42.                 return false;
    
43.             }
    
44.             debugger;
    
45.             var deptCode = values.ZXJH_DEPARTMENT_CODE;
    
46.             JE.alert(deptCode);
    
47.         }
    
48.     });
    
49.     return true;
    
50. }

复制代码

五、总结（可选）
弹出表单，可以在任何地方进行操作。
六、关键字

表单弹框