功能说明:首先是根据一个GridPanel中的一列数据在另一个EditorGridPanel显示对应的这一列的子菜单的显示。
一、首先定义一个ColumnModel:
var clm_CM = new Ext.grid.ColumnModel({ columns:[ {header:'<center>编号</center>',dataIndex:'CODE'}, {header:'<center>公司名称</center>',dataIndex:'NAME'}, {header:'<center>英文名称</center>',dataIndex:'EN'}, {header:'<center>所属国家</center>',dataIndex:'COUNTRY_NAME'}, {header:'<center>code</center>',dataIndex:'COUNTRY_CODE',hidden:true } ]});
二、定义GridPanel,一些事件的逻辑处理也在这里:
var grd_WestGridPanel = new Ext.grid.GridPanel({ title : '公司列表', cm : clm_CM, //sm : rsm_Navigate, width : 600, loadMask : true, region : 'west', store : sto_Store, enableColumnResize : false, enableColumnMove : true, viewConfig : { forceFit : true }, listeners:{ 'cellclick':function(grid, rowIndex, columnIndex, e){ var rec = grid.getStore().getAt(rowIndex); txtf_Code.setValue(rec.get('CODE')); txtf_Name.setValue(rec.get('NAME')); txtf_En.setValue(rec.get('EN')); cmb_Country.setRawValue(rec.get('COUNTRY_NAME')); cmb_Country.setValue(rec.get('COUNTRY_CODE')); MODIFY_NO = rec.get('MODIFY_NO'); btn_Applicable.enable(); btn_AddLocalContact.enable(); btn_Commit.disable(); sto_AddressGridPanel_Store.load({ params : { 'COUNTRY_CODE' : rec.get('COUNTRY_CODE'), 'CODE' : txtf_Code.getValue(), 'funcId' : params.funcId } }); sto_cmb_CityByCountryCode_Store.load({ params : { 'COUNTRY_CODE' : rec.get('COUNTRY_CODE'), 'funcId' : params.funcId } }); } } });
三、定义上面的store:
var sto_Store =new Gt.common.engine.JsonStore({ url :...,//根据情况自己设置 root : 'navigate', fields : [ 'CODE', 'NAME', 'EN', 'COUNTRY_NAME', 'COUNTRY_CODE', 'MODIFY_NO' ], autoLoad : false, autoDestroy : true });
四、定义另外的一个EditorGridPanel:
var grd_AddressGridPanel = new Ext.grid.EditorGridPanel({ title: '当前联络地址', cm : clm_AddressCm, //sm : rsm_AddressSm, plugins:[chb_delete], clicksToEdit:1, tbar: tlb_AddLocalContact, loadMask : true, region : 'center', store : sto_AddressGridPanel_Store, enableColumnResize : false, enableColumnMove : true, viewConfig : { scrollOffset : 20, forceFit : true } });
五、定义EditorGridPanel的ColumnModel:
var clm_AddressCm = new Ext.grid.ColumnModel([ {header:'<center>'都市名称'</center>',dataIndex:'CITY_CODE', editor:new Ext.form.ComboBox({ store: sto_cmb_CityByCountryCode_Store, valueField:'CITY_CODE', displayField:'CITY_NAME', mode: 'local', triggerAction: 'all' }), renderer:function(value){ if(value==''){ return Gt.common.util.getMessage('PJ0022.PAG007.LABEL.021'); } else{ cmb_City.setValue(value); return cmb_City.getRawValue(); } } }, {header:'<center>地址</center>',dataIndex:'ADDRESS',editor:new Ext.form.TextField({allowBalank:false})}, {header:'<center>电话</center>',dataIndex:'TEL_NO',editor:new Ext.form.TextField({allowBalank:false})}, {header:'<center>电话类型</center>',dataIndex:'TEL_NO_TYPE',editor: cmb_Type, renderer: func_type}, chb_delete ]);
六、定义EditorGridPanel中的store:
var sto_AddressGridPanel_Store =new Gt.common.engine.JsonStore({ url : '...',//根据情况自己设置 root : 'LocalContact', fields : [ 'COUNTRY_CODE', 'CODE', 'BRANCH_NO', 'CITY_CODE', 'CITY_NAME', 'ADDRESS', 'TEL_NO', 'TEL_NO_TYPE', 'DELETE_FLG', 'MODIFY_NO' ], autoLoad : false, autoDestroy : true });
七、定义EditorGridPanel中combobox的store(根据国家获取都市):
// 都市名 ComboBoxのStore byCountryCode var sto_cmb_CityByCountryCode_Store =new Gt.common.engine.JsonStore({ url : ...,//根据情况自己设置 root : 'getCityByCountryCode', fields : [ 'CITY_CODE', 'CITY_NAME' ], autoLoad : false, autoDestroy : true });
八、定义一个隐藏的combobox(显示所有都市名称):
// 都市 ComboBox var cmb_City = new Ext.form.ComboBox({ hidden : true, store : sto_cmb_City_Store, valueField : 'CITY_CODE', displayField : 'CITY_NAME' });
九、隐藏combobox的store:
var sto_cmb_City_Store =new Gt.common.engine.JsonStore({ url :...,//根据情况自己设置 root : 'getCity', fields : [ 'CITY_CODE', 'CITY_NAME' ], autoLoad : true, autoDestroy : true });
特别说明:用隐藏的combobox的作用主要是匹配根据国家获取的都市的名称。