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