动态设置Ext.form.FormPanel控件里子控件的显示和隐藏

动态设置Ext.form.FormPanel控件里子控件的显示和隐藏

标签： layoutborderfunction

2010-12-20 10:25  11992人阅读  评论(1)  收藏  举报

  分类：

Extjs（11） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

 

[javascript]  view plain  copy

1. var flag = 0;  
2. function createProjectInfoForm(){  
3.     var body = new Ext.form.FormPanel({  
4.         id:'tab-'+'root',  
5.         labelWidth: 70,   
6.         title: 'tab信息',  
7.         border: false,  
8.         bodyStyle:'padding:10px',  
9.         layout : 'form',  
10.         items: [{  
11.                 // line A  
12.                 id : 'aline',  
13.                 name : 'aline',  
14.                 xtype:'fieldset',  
15.                 title:'A端信息',  
16.                 layout: 'column',  
17.                 columnWidth:.9,  
18.                 items : [{  
19.                     columnWidth:.4,  
20.                     layout: 'form',  
21.                     border: false,  
22.                     items:[  
23.                         {  
24.                             xtype:'hidden',  
25.                             fieldLabel: 'id',  
26.                             name: 'id',  
27.                             anchor:'95%'  
28.                         },  
29.                            {  
30.                         xtype:'textfield',  
31.                         fieldLabel: '名称',  
32.                         name: 'name',  
33.                         anchor:'95%'  
34.                     },{  
35.                         xtype:'textfield',  
36.                         fieldLabel: '单位',  
37.                         name: 'designer',  
38.                         anchor:'95%'  
39.                     }  
40.                     ]  
41.                 },{  
42.                     columnWidth:.4,  
43.                     layout: 'form',  
44.                     border: false,  
45.                     items:[{  
46.                         xtype:'textfield',  
47.                         fieldLabel: '编码',  
48.                         name: 'code',  
49.                         anchor:'95%'  
50.                     },{  
51.                         xtype:'numberfield',  
52.                         fieldLabel: '数量',  
53.                         name: 'polecount',  
54.                         anchor:'95%'  
55.                     }  
56.                     ]  
57.                 }]  
58.             },{  
59.                 // line Z  
60.                 id : 'zline',  
61.                 name : 'zline',  
62.                 xtype:'fieldset',  
63.                 title:'Z端信息',  
64.                 layout: 'column',  
65.                 columnWidth:.9,  
66.                 items : [{  
67.                     columnWidth:.4,  
68.                     layout: 'form',  
69.                     border: false,  
70.                     items:[  
71.                         {  
72.                             xtype:'hidden',  
73.                             fieldLabel: 'id',  
74.                             name: 'id',  
75.                             anchor:'95%'  
76.                         },  
77.                            {  
78.                         xtype:'textfield',  
79.                         fieldLabel: '名称',  
80.                         name: 'name',  
81.                         anchor:'95%'  
82.                     },{  
83.                         xtype:'textfield',  
84.                         fieldLabel: '单位',  
85.                         name: 'designer',  
86.                         anchor:'95%'  
87.                     }  
88.                     ]  
89.                 },{  
90.                     columnWidth:.4,  
91.                     layout: 'form',  
92.                     border: false,  
93.                     items:[{  
94.                         xtype:'textfield',  
95.                         fieldLabel: '编码',  
96.                         name: 'code',  
97.                         anchor:'95%'  
98.                     },{  
99.                         xtype:'numberfield',  
100.                         fieldLabel: '数量',  
101.                         name: 'polecount',  
102.                         anchor:'95%'  
103.                     }  
104.                     ]  
105.                 }]   
106.         }]  
107.     });  
108.     if (flag == 0){  
109.         body.findById('zline').setDisabled(true);  
110.         body.findById('zline').setVisible(false);  
111.     }else if(flag == 1){  
112.         body.findById('aline').setDisabled(true);  
113.         body.findById('aline').setVisible(false);  
114.     }  
115.     return body;  
116. }  

这里是根据传递过来的flag，动态设置两行的显示问题。

若flag=0，将zline隐藏掉

若flag=1，则将aline隐藏掉

当然，还可以设置控件的显示，那只是更改FALSE或TRUE的问题了。

简单吧？