从数据库中加载数据，实现两个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);
?