Ext3.4 Column layout 设置form表单组件隐藏

因为工作要求，需要按照Combo的下拉值来显示或者隐藏部分的页面表单信息。以前用Ext4的时候，直接用table layout,然后调用组件的hide()方法就没啥问题了。不过这个Ext3.4在chrome下面工作的好好的，切换到IE的时候悲剧了。效果见下图:

我的写法是这样滴:

1 2 3 4 5 6 7 8 9 10 11

buttons: [{          text:  'Hide' ,          handler: function (form){              Ext.get( 'v_sex' ).hide();          }      },{          text:  'Show' ,          handler: function (form){              Ext.get( 'v_sex' ).show();          }      }]

关键问题是Ext.get(id) 这样的办法，如果是调用hide()的话，这个页面的位置还是会占着，就有上面的效果了。改为用

Ext.getCmp(id) 这个方法就解决了。

下面是修改后的完整代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

Ext.onReady( function (){ Ext.QuickTips.init();   // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget =  'side' ;   var  bd = Ext.getBody();   var  addr_store =  new  Ext.data.ArrayStore({      fields: [ 'id' ,  'text' ],      data : [[ 'F' , 'Female' ],[ 'M' , 'Male' ]] }); var  addr_combo =  new  Ext.form.ComboBox({      store: addr_store,      displayField: 'text' ,      typeAhead:  true ,      mode:  'local' ,      forceSelection:  true ,      triggerAction:  'all' ,      emptyText: 'Select a sex...' ,      selectOnFocus: true ,      anchor:  '95%' });   /*   * ================  Form 3  =======================   */ bd.createChild({tag:  'h2' , html:  'Form 3 - A little more complex' });     var  top =  new  Ext.FormPanel({      labelAlign:  'top' ,      frame: true ,      title:  'Multi Column, Nested Layouts and Anchoring' ,      bodyStyle: 'padding:5px 5px 0' ,      width: 600,      items: [{          layout:  'column' ,          items: [{              id:  'v_frist_name' ,              columnWidth: .5,              layout:  'form' ,              items:[{                  xtype:  'textfield' ,                  fieldLabel:  'First Name' ,                  name:  'firstName' ,                  anchor:  '95%'              }]          },{              id:  'v_last_name' ,              columnWidth: .5,              layout:  'form' ,              items:[{                  xtype:  'textfield' ,                  fieldLabel:  'Last Name' ,                  name:  'lastName' ,                  anchor:  '95%'              }]          },{              id:  'v_sex' ,              columnWidth: .5,              layout:  'form' ,              hideMode:  'offsets' ,              items:[addr_combo]          },{              id:  'v_birthday' ,              columnWidth: .5,              layout:  'form' ,              items:[{                  xtype:  'datefield' ,                  fieldLabel:  'Birthday' ,                  name:  'birthday' ,                  anchor:  '95%' ,                  format:  'Y-m-d'              }]          }      ]},{          xtype: 'htmleditor' ,          id: 'bio' ,          fieldLabel: 'Biography' ,          height:200,          anchor: '98%'      }],        buttons: [{          text:  'Hide' ,          handler: function (form){              Ext.get( 'v_sex' ).hide();              //Ext.getCmp('v_sex').hide();          }      },{          text:  'Show' ,          handler: function (form){              Ext.get( 'v_sex' ).show();              //Ext.getCmp('v_sex').show();          }      }] });   top.render(document.body);