Ext教程-一起Ext

Ext.onReady(function(){
               tempStore1 = new Ext.data.SimpleStore({
                    fields: ['value', 'label'],
                    data : [['businessonly', 'Business'], ['businessleisure', 'Business & Leisure']]
               });
               tempStore2 = new Ext.data.SimpleStore({
                    fields: ['value', 'label'],
                    data : [['1', 'Yes'], ['0', 'No']]
               });
               new Ext.FormPanel({
                    id: 'quotationForm',
                    renderTo: 'fxpage-body-content2-placeholder',
                    labelWidth: 105,
                    domUrl: 'quotation-results',
                    width: 326,
                    defaults: {labelSeparator: ''},
                    defaultType: 'textfield',
                    bodyStyle: 'padding: 0 0 0 3px;',
                    baseCls: 'contactform',
                    standardSubmit: true,
                    items: [
                         {xtype: 'hidden',name: 'fxeventtarget',value: 'SaveProspect'},
                         {xtype: 'hidden',name: 'fxprocesspointid',value: 'quotation/quotation-results'},
                         {width: 205,fieldLabel: 'Name*',name: 'Name',allowBlank:false},
                         {width: 205,fieldLabel: 'Company*',name: 'Company',allowBlank:false},
                         {width: 205,fieldLabel: 'Email*',name: 'Email',vtype:'email',allowBlank:false},
                         {width: 205,fieldLabel: 'Phone*',name: 'Phone',allowBlank:false}, 
                         {xtype: 'combo',id: 'InsuranceType',width: 205,name: 'InsuranceType',allowBlank:false,store: tempStore1, fieldLabel: 'Insurance Type*', editable: false, valueField: 'value', displayField: 'label', triggerAction: 'all', labelSeparator: '',mode: 'local',value: 'businessonly',listeners: {select:{fn:function(combo,value){
                              var objQtyPanel1 = Ext.getCmp('QtyPanel1');
                              var objQtyPanel2 = Ext.getCmp('QtyPanel2');
                              var objQtyPanel3 = Ext.getCmp('QtyPanel3');
                              Ext.getCmp('QtyEmployees').setValue('0');
                              Ext.getCmp('QtySingle').setValue('0');
                              Ext.getCmp('QtyMarried').setValue('0');
                              Ext.getCmp('QtySingleParent').setValue('0');
                              Ext.getCmp('QtyFamily').setValue('0');
                              if(Ext.getCmp('InsuranceType').getValue() == 'businessonly')
                              {
                                   objQtyPanel1.show();
                                   objQtyPanel2.hide();
                                   objQtyPanel3.hide();
                              }
                              else
                              {
                                   objQtyPanel1.hide();
                                   objQtyPanel2.show();
                                   objQtyPanel3.show();
                              }
                         }}}},
                         {xtype: 'panel', id: 'QtyPanel1',border: false, layout: 'column', baseCls: 'panel', items: [
                              {xtype: 'fieldset', border: false, items: [{xtype: 'numberfield',id: 'QtyEmployees',width: 60,allowBlank: false,fieldLabel: 'No. Employees',name: 'QtyEmployees',labelSeparator: '',value: '0'}]}
                         ]},
                         {xtype: 'panel', id: 'QtyPanel2',border: false, layout: 'column', baseCls: 'panel', items: [
                              {xtype: 'fieldset', border: false, items: [{xtype: 'numberfield',id: 'QtySingle',width: 60,fieldLabel: 'Single',name: 'QtySingle',labelSeparator: '',value: '0'}]},
                              {xtype: 'fieldset', border: false, labelWidth: 80, labelAlign: 'right', items: [{xtype: 'numberfield',id: 'QtyMarried',width: 60,fieldLabel: 'Married',name: 'QtyMarried',labelSeparator: '',value: '0'}]}
                         ]},
                         {xtype: 'panel', id: 'QtyPanel3',border: false, layout: 'column', baseCls: 'panel', items: [
                              {xtype: 'fieldset', border: false, items: [{xtype: 'numberfield',id: 'QtySingleParent',width: 60,fieldLabel: 'Single Parent',name: 'QtySingleParent',labelSeparator: '',value: '0'}]},
                              {xtype: 'fieldset', border: false, labelWidth: 80, labelAlign: 'right', items: [{xtype: 'numberfield',id: 'QtyFamily',width: 60,fieldLabel: 'Family',name: 'QtyFamily',labelSeparator: '',value: '0'}]}
                         ]},
                         {xtype: 'combo', id: 'CurrentInsurance',width: 80,name: 'CurrentInsurance',store: tempStore2, fieldLabel: 'Current Insurance', editable: false, valueField: 'value', displayField: 'label', triggerAction: 'all', labelSeparator: '',mode: 'local',value: '0',listeners: {select:{fn:function(combo,value){
                              Ext.getCmp('RenewalDate').setValue('');
                              if(Ext.getCmp('CurrentInsurance').getValue() == 1)
                              {
                                   Ext.getCmp('RenewalDatePanel').show();
                              }
                              else
                              {
                                   Ext.getCmp('RenewalDatePanel').hide();
                              }
                         }}}},
                         {xtype: 'panel', id: 'RenewalDatePanel',border: false, layout: 'column', baseCls: 'panel', items: [
                              {xtype: 'fieldset', border: false, items: [{xtype: 'datefield',id: 'RenewalDate',width: 205,fieldLabel: 'Renewal Date',name: 'RenewalDate',cls: 'datefield', selectOnFocus: true,format: 'd/M/Y',labelSeparator: ''}]}
                         ]}
                    ],
                    buttons: [
                         {text: 'Get Quote',handler: function(){
                              var x = this.ownerCt;
                              if (x.getForm().isValid())
                              {
                                   x.getForm().getEl().dom.action=x.domUrl;
                                   x.getForm().submit()
                              }
                              else
                              {
                                   alert("Please complete all marked fields");
                              }
                         }}
                    ]
               });
               Ext.getCmp('QtyPanel2').hide();
               Ext.getCmp('QtyPanel3').hide();
               Ext.getCmp('RenewalDatePanel').hide();
          });
          
          function toggleInsuranceType(f){
               alert(f.getValue());
          alert(f);
               var x = this.ownerCt;
               alert(x);
               x.getForm().setValues({QtyEmployees: '0',QtySingle: '0',QtySingleParent: '0',QtyMarried: '0',QtyFamily: '0'});
          }