从数据库中加载数据，实现两个comboBox与gridpanel的联动（comboBox默认加载第一项值）

/**不知道怎么插入图片，代码保证正确。下拉列表名分别是：贷方凭证类型 ，本方科目

*图片放在下面的附件里了

 * 细节的东西，自己慢慢看，肯定写的有点粗糙。

*/

  Ext.namespace('speedy.cm.tcmVoucherOppSet');
  speedy.cm.tcmVoucherOppSet.MainPanel = function(config) {
   Ext.applyIf(this, config);
   this.initUIComponents();

   speedy.cm.tcmVoucherOppSet.MainPanel.superclass.constructor.call(this);
  };
 Ext.extend(speedy.cm.tcmVoucherOppSet.MainPanel, Ext.Panel, {
             firstValue :'',
 tcmvoucheroppsettingId :'',    //tcm_voucheroppsetting表的主键vId
    tcmVoucherSettingId :'',   //tcm_VoucherSetting表的主键vId
 initUIComponents : function() {
  
  this.st3= new Ext.data.Store({
   baseParams : {limit:50},
   reader : new Ext.data.JsonReader({
     totalProperty:'totalCount',
     id : "id",
     root : "result"},
     [
    {name : 'vId',          mapping : 'vId'},
    {name : 'vVouId',       mapping : 'vVouId'},
    {name : 'vOppAccCode',  mapping : 'vOppAccCode'}, 
    {name : 'vOppAccName',  mapping : 'vOppAccName'}, 
    {name : 'nIssum',       mapping : 'nIssum'}, 
    {name : 'nIsusing',     mapping : 'nIsusing'},  
    {name : 'vAbstract',    mapping : 'vAbstract'}, 
    {name : 'vCustomer',    mapping : 'vCustomer'}, 
    {name : 'vFlowCode',    mapping : 'vFlowCode'}
    
    ]),
   proxy : this.proxy||new Ext.data.HttpProxy({
    
    url:'ui/modules/speedy/cm/VoucherOppSet/getAllTcmVoucherOppSetByVouId.action'

    })
   
  });
  
  this.accStore= new Ext.data.Store({
   baseParams : {limit:50},
   reader : new Ext.data.JsonReader({
     totalProperty:'totalCount',
     id : "id",
     root : "result"},
     [
    {name : 'vId',           mapping : 'vId'},
    {name : 'vOppId',        mapping : 'vOppId'},
    {name : 'vBankAccount',  mapping : 'vBankAccount'}, 
    {name : 'vCostCenter',   mapping : 'vCostCenter'}, 
    {name : 'vRemark',       mapping : 'vRemark'}
    
    ]),
   proxy : this.proxy||new Ext.data.HttpProxy({
    
    url:'ui/modules/speedy/cm/VoucherOppSet/getAllTcmVoucherOppAccountByOppId.action'

    })
   
  });
  
  //加载accStore数据源
   this.accStore.load();
  
  
  this.oppGridPanel = new Ext.grid.GridPanel({
   
   bbar :  new Ext.PagingToolbar({
      xtype   : 'paging',
      pageSize : 50,
      store  : this.st3,
      displayInfo : true,
            displayMsg : '显示记录从 {0} 到 {1} 总共 {2}',
            emptyMsg : '没有记录'
     }),
   height :100,
   store : this.st3,
   border : false,
   loadMask: {msg:'正在取数,请稍等！'},
   listeners : {
       click : {
    fn : function() {
        var record=this.oppGridPanel.selModel.getSelected();
     if( record!= null)
     {
      this.accStore.baseParams.vOppId=record.get('vId');
      
      this.accStore.load();
     }
    }.createDelegate(this)
   }
   },
   columns : [
   new Ext.grid.RowNumberer(),
   {
    width   :  150,
    header   :  '唯一ID',
    dataIndex  :  'vId',
    sortable  :  true,
    hidden  : true
   },
   {
    width   :  150,
    header   :  '对应本方信息表中唯一ID ',
    dataIndex  :  'vVouId',
    sortable  :  true,
    hidden  : true
   },
   {
    width   :  150,
    align  : 'Left',
    header   :  '对方科目编号',
    dataIndex  :  'vOppAccCode',
    sortable  :  true,
    hidden  : false
   }
   ,
   {
    width   :  250,
    align  : 'Left',
    header   :  '对方科目名称',
    dataIndex  :  'vOppAccName',
    sortable  :  true,
    hidden  : false
   }
   ,
   {
    width   :  150,
    align  : 'Left',
    header   :  '是否汇总',
    dataIndex  :  'nIssum',
    sortable  :  true,
    hidden  : false,
    renderer : this.isWhether
   }
   ,
    {
    width   :  150,
    align  : 'Left',
    header   :  '是否有效',
    dataIndex  :  'nIsusing',
    sortable  :  true,
    hidden  : false,
    renderer : this.isValid
   }    
   ,
    {
    width   :  250,
    align  : 'Left',
    header   :  '凭证摘要',
    dataIndex  :  'vAbstract',
    sortable  :  true,
    hidden  : false
   }
   ,
    {
    width   :  150,
    align  : 'Left',
    header   :  '现金流量',
    dataIndex  :  'vFlowCode',
    sortable  :  true,
    hidden  : false
   }
   ,
    {
    width   :  150,
    align  : 'Left',
    header   :  '客户编号',
    dataIndex  :  'vCustomer',
    sortable  :  true,
    hidden  : false
   }
   ],
   scrollable:true,
   cm : this.columns,
   selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
  });
  
  this.accountGridPanel = new Ext.grid.GridPanel({
   store : this.accStore,
   height : 100,
   border : false,
   loadMask: {msg:'正在取数,请稍等！'},
   listeners : {
    click : {
    fn : function() {
       var record=this.oppGridPanel.selModel.getSelected();
    if( record!= null)
    {
     this.tcmvoucheroppsettingId=record.get('vId');
     this.accStore.baseParams.vOppId=this.tcmvoucheroppsettingId;
    }
    
   }.createDelegate(this)
    }
   },
   columns : [
   new Ext.grid.RowNumberer(),
   {
    width   :  150,
    header   :  '唯一ID',
    dataIndex  :  'vId',
    sortable  :  true,
    hidden  : true
   },
   {
    width   :  150,
    align  : 'Left',
    header   :  '对应对方信息唯一ID',
    dataIndex  :  'vOppId',
    sortable  :  true,
    hidden  : true
   }
   ,
   {
    width   :  400,
    align  : 'Left',
    header   :  '银行账户',
    dataIndex  :  'vBankAccount',
    sortable  :  true,
    hidden  : false
   }
   ,
    {
    width   :  250,
    align  : 'Left',
    header   :  '成本中心',
    dataIndex  :  'vCostCenter',
    sortable  :  true,
    hidden  : false
   }
   ,
    {
    width   :  150,
    align  : 'Left',
    header   :  '备注',
    dataIndex  :  'vRemark',
    sortable  :  true,
    hidden  : false
   }
   ],
   scrollable:true,
   cm : this.columns,
   selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
  });
  
  this.onAddClick  = function(){
   var oppEditPanel = new speedy.cm.tcmVoucherOppSet.ModifyWindow({
                    fOppSetId: this.tcmVoucherSettingId,
                    faStore  :this.st3,
          title   :'新增',
          type    :0
      })
   oppEditPanel.show();
   
  };
       this.onAccAddClick  = function(){
   var accountEditPanel = new speedy.cm.tcmVoucherOppSet.AccountModifyWindow({
                 fOppSetId  : this.tcmvoucheroppsettingId,      
                    fStore  :this.accStore,
          title   :'新增',
             type    :0
     })
   accountEditPanel.show();
  
 };
  this.onModifyClick  = function(){
   var record = this.oppGridPanel.selModel.getSelected();
   if( record == null)
   {
    Ext.Msg.alert('提示', '请选择一条记录！');
    return;
   }
   var ModifyWindow = new speedy.cm.tcmVoucherOppSet.ModifyWindow({
    fStore  :this.st3,
    title   :'修改',
    type    :1
   })
   ModifyWindow.on('beforeshow',function(dialog){
      Ext.getCmp('speedy.cm.tcmVoucherOppSet.ModifyWindow').getForm().loadRecord(record);
     });
   ModifyWindow.show();
  };
  
  this.onAccModifyClick  = function(){
   var record = this.accountGridPanel.selModel.getSelected();
   if( record == null)
   {
    Ext.Msg.alert('提示', '请选择一条记录！');
    return;
   }
   var accountModifyWindow = new speedy.cm.tcmVoucherOppSet.AccountModifyWindow({
    fStore  :this.accStore,
    title   :'修改',
    type    :1
   })
   accountModifyWindow.on('beforeshow',function(dialog){
      Ext.getCmp('speedy.cm.tcmVoucherOppSet.AccountModifyWindow').getForm().loadRecord(record);
     });
   accountModifyWindow.show();
  };
  this.onDeleteClickSure  = function(record){
   var box = Ext.MessageBox.show(
   {
    msg :'正在删除,请稍候...',
    progressText: '',
    width : 200,
    height:100,
    progress:false,
       closable:false,
    wait : false 
   });
   
   Ext.Ajax.request
      (
          {
              url:'ui/modules/speedy/cm/VoucherOppSet/deleteTcmVoucherOppSet.action',           
     params:
     {
            vId:record.get('vId'),
            version:record.get('version')
           },
     success:function(response, optional)
     {  
            var ret = Ext.util.JSON.decode(response.responseText);
      if(ret.success == false){
       Ext.Msg.alert('错误',ret.err);
       return;
      }
      
      box.hide();
      var o = {start: 0};
      this.st3.reload({params:o});
           }.createDelegate(this),
     failure:function(response,optional)
     {
      Ext.Msg.alert('错误',"删除操作失败！");
      box.hide();
     }
    }
   )
  };
  this.onDeleteClick  = function(){
   var record = this.oppGridPanel.selModel.getSelected();
   if(!record)
   {    
    Ext.Msg.alert('提示', "请选择一条记录!");
    return;
   }
   
   Ext.MessageBox.confirm('提示', "确定要删除所选记录？", function(btn)
   {
    if(btn == 'yes')
    {
     this.onDeleteClickSure(record);
    }
   }.createDelegate(this))
  };
  this.onAccDeleteClickSure  = function(record){
   var box = Ext.MessageBox.show(
   {
    msg :'正在删除,请稍候...',
    progressText: '',
    width : 200,
    height:100,
    progress:false,
       closable:false,
    wait : false 
   });
   
   Ext.Ajax.request
      (
          {
              url:'ui/modules/speedy/cm/VoucherOppSet/deleteTcmVoucherOppAccount.action',           
     params:
     {
            vId:record.get('vId'),
            version:record.get('version')
           },
     success:function(response, optional)
     {  
            var ret = Ext.util.JSON.decode(response.responseText);
      if(ret.success == false){
       Ext.Msg.alert('错误',ret.err);
       return;
      }
      
      box.hide();
      var o = {start: 0};
      this.accStore.reload({params:o});
           }.createDelegate(this),
     failure:function(response,optional)
     {
      Ext.Msg.alert('错误',"删除操作失败！");
      box.hide();
     }
    }
   )
  };
  this.onAccDeleteClick  = function(){
   var record = this.accountGridPanel.selModel.getSelected();
   if(!record)
   {    
    Ext.Msg.alert('提示', "请选择一条记录!");
    return;
   }
   
   Ext.MessageBox.confirm('提示', "确定要删除所选记录？", function(btn)
   {
    if(btn == 'yes')
    {
     this.onAccDeleteClickSure(record);
    }
   }.createDelegate(this))
  };
    
  
  this.st = new Ext.data.Store({
   
   proxy : this.proxy||new Ext.data.HttpProxy({url:'ui/modules/speedy/cm/VoucherSet/getTcmVoucherTypeSetIdAndTypeName.action'}),
   reader : new Ext.data.JsonReader({                                              
     totalProperty:'totalCount',
     id : "id",
     root : "result"},
     [{name : 'vId',     mapping : 'vId'},
     {name : 'vTypeName',mapping : 'vTypeName'}]
     )
  });

 this.st2 = new Ext.data.Store({
 
 proxy : this.proxy||new Ext.data.HttpProxy({url:'ui/modules/speedy/cm/VoucherSet/getAllTcmVoucherSetByTypeId.action'}),
 reader : new Ext.data.JsonReader({
   totalProperty:'totalCount',
   id : "id",
   root : "result"},
   [{name : 'vId',     mapping : 'vId'},
   {name : 'vAccCode',mapping : 'vAccCode'},
   {name : 'vAccName',mapping : 'vAccCodeAndvAccName'}]
   )
  });

  this.vouTypeChang = new Ext.form.ComboBox({
   store         : this.st,
   fieldLabel    : '凭证类型',
   mode          : 'local',
   triggerAction : 'all',
   id            :  'vTypeId',
   name          :  'speedy.cm.tcmVoucherOppSet.vTypeId',
   displayField  : 'vAccCode',
   valueField    : 'vId',
   displayField  : 'vTypeName',
   hiddenName    : 'Id',
   forceSelection: true,
   readOnly      : true,
   width         : 200

       
  });
  
  this.accCodeChange = new Ext.form.ComboBox({
   store         : this.st2,
   fieldLabel    : '本方科目',
   mode          : 'local',
   triggerAction : 'all',
   id            :  'vAccCode',
   name          :  'speedy.cm.tcmVoucherOppSet.vAccCode',
   displayField  : 'vAccName',
   valueField    : 'vId',
   displayField  : 'vAccName',
   hiddenName    : 'AccId',
   forceSelection: true,
   readOnly      : true,
   width         : 400

       
  });
  
  this.st.load();//加载数据源
  
  //设置下拉列表的默认值

  this.st.on('load',function(store,record,opts){

   //这种方法可以获得第一项的值

    var vId=store.getRange()[0].data.vId;
       this.firstValue =store.getRange()[0].data.vTypeName;
      
       this.vouTypeChang.setValue(vId);
       this.st2.baseParams.vTypeId=vId;
//      Ext.Msg.alert('load',vId);
       this.st2.load();
       this.st3.load();

     }.createDelegate(this)  );
  
  this.st2.on('load',function(store,record,opts){
   
   //tcmVoucherSetting表的vId
   this.tcmVoucherSettingId = store.getRange()[0].data.vId;
     
       this.st3.baseParams.vVouId=this.tcmVoucherSettingId;

       this.accCodeChange.setValue(this.tcmVoucherSettingId);
      
       this.st3.load();
       this.accStore.load();
      
     }.createDelegate(this));
   
  //弹出每次下拉列表选择的值
  this.vouTypeChang.on('select',function(store,record,options){
   
   //获取下拉列表中凭证类型vTypeName对应的vTypeId
   var selectValue=Ext.fly('vTypeId').dom.value;
   
   //对应vTypeId的vId<即tcm_voucherTypeSet表的主键值>
   var id=Ext.fly('Id').dom.value;
   
   this.st2.on('beforeload',function(store,record,opts){
       //将下拉列表的值赋给vTypeId
     store.baseParams.vTypeId=id;
    });
         this.accCodeChange.setValue('');
   this.st2.reload();
     }.createDelegate(this));

  
        this.accCodeChange.on('select',function(store,record,options){
         
   //设定过滤参数
         this.tcmVoucherSettingId=Ext.get('AccId').dom.value;
   this.st3.baseParams.vVouId=this.tcmVoucherSettingId;
   
   this.st3.load();
   
     }.createDelegate(this));

  
  Ext.apply(this, {
   layout : "border",
   items:[{
   tbar : new Ext.Toolbar([
    '贷方凭证类型 :',                     
    this.vouTypeChang,   
    {
     xtype : "tbseparator"
    },
    '本方科目 :',                     
     this.accCodeChange,   
     {
      xtype : "tbseparator"
     },
                          
      {text : "新增",
    iconCls : "btn_add",
    handler : function() {
     this.onAddClick();
     this.st3.load();
    }.createDelegate(this)
   }, {
    xtype : "tbseparator"
   }, {
    text : "修改",
    iconCls : "btn_modify",
    handler : function() {
     this.onModifyClick();
    }.createDelegate(this)
   }, {
    xtype : "tbseparator"
   }, {
    text : "删除",
    iconCls : "btn_delete",
    handler : function() {
     this.onDeleteClick();
    }.createDelegate(this)
   }]),
   items : [this.oppGridPanel],
   split : true,
//   height :100,
   layout : "fit",
   region : "center",
   border : false,
   closable :true,
   title : "贷方凭证分类设置1"
   },{
    tbar : new Ext.Toolbar([                         
              
             {text : "新增",
           iconCls : "btn_add",
           handler : function() {
            this.onAccAddClick();
           }.createDelegate(this)
          }, {
           xtype : "tbseparator"
          }, {
           text : "修改",
           iconCls : "btn_modify",
           handler : function() {
            this.onAccModifyClick();
           }.createDelegate(this)
          }, {
           xtype : "tbseparator"
          }, {
           text : "删除",
           iconCls : "btn_delete",
           handler : function() {
            this.onAccDeleteClick();
           }.createDelegate(this)
          }]),
          items : [this.accountGridPanel],
          layout : "fit",
          split : true,
          height :200,
          region : "south",
          border : false,
          closable :true,
          title : "贷方凭证分类设置2"
   }
   ]
  });
 },
 
 
 isWhether:function(val)
 {
  if(val == '0')
  {
   return '否';
  }
  else if(val == '1')
  {
   return '是';
  }
 },
 isValid: function(val)
 {
  if(val == '0')
  {
   return '无效';
  }
  else if(val == '1')
  {
   return '有效';
  }
 }
 

 
});
Ext.reg('speedy.cm.tcmVoucherOppSet.MainPanel', speedy.cm.tcmVoucherOppSet.MainPanel);