Ext.Button 在Ext.form.FormPanel中的定位

我会带着你远行 2021-09-10 06:48 334阅读 0赞

主要原理：   
**利用\{html : '<pre> </pre>'\}填充空格：**

Java代码   ![收藏代码][icon_star.png]

1.  var Text1 = **new** Ext.form.TextField(\{  
2.              fieldLabel : 'Text1',  
3.              name : 'creator',  
4.              width : 100  
5.          \});  
6.    
7.  var Text2 = **new** Ext.form.NumberField(\{  
8.              fieldLabel : 'Text2',  
9.              name : 'orderId',  
10.             width : 100  
11.         \});  
12. var Text3 = **new** Ext.form.DateField(\{  
13.             fieldLabel : '到',  
14.             name : 'Text3',  
15.             width : 100,  
16.             value : **null**,  
17.             format : 'Y-m-d'  
18.         \});  
19.   
20. var searchBtn2 = **new** Ext.Button(\{  
21.             text : '查询2'  
22.         \});  
23.   
24. var resetBtn2 = **new** Ext.Button(\{  
25.             text : '重置2'  
26.         \})  
27.   
28. var formPanel = **new** Ext.form.FormPanel(\{  
29.     height : 100,  
30.     layout : 'table',  
31.     layoutConfig : \{  
32.         columns : 2  
33.     \},frame : **true**,  
34.     defaults : \{  
35.         bodyStyle : 'padding: 0px;',  
36.         border : **false**  
37.     \},  
38.     labelAlign : 'right',  
39.     labelWidth : 100,  
40.     items : \[\{  
41.                 layout : 'form',  
42.                 items : \[Text1\]  
43.             \}, \{  
44.                 layout : 'form',  
45.                 items : \[Text2\]  
46.             \}, \{  
47.                 layout : 'form',  
48.                 items : \[Text3\]  
49.             \}, \{  
50.                 layout : 'table',  
51.                 items : \[\{html : '<pre>   </pre>'\}, searchBtn2, resetBtn2\]  
52.             \}\]  
53. \});

若按钮紧挨着一个输入框:   
\{   
   layout : 'table',   
   items : \[\{layout : 'form',items : \[txt1\]\},   
            \{layout : 'form',items : \[btn1\]\}   
           \]   
\}

[icon_star.png]: /images/20210726/306e59ef07b84bd0ac35535536d1aea8.png