当前位置: 代码迷 >> Web前端 >> Ext中combobox在EditorGridPanel中带参数的显示有关问题
  详细解决方案

Ext中combobox在EditorGridPanel中带参数的显示有关问题

热度:131   发布时间:2012-11-04 10:42:41.0
Ext中combobox在EditorGridPanel中带参数的显示问题
功能说明:首先是根据一个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的作用主要是匹配根据国家获取的都市的名称。
  相关解决方案