Ext 메뉴 연동을 위한 완벽한 솔루션

4726 단어 ext
상황 설명:
성 드롭다운 상자와 도시 드롭다운 상자를 연결합니다.
formpanel 편집할 때 사용합니다.
form.getForm().load({
				waitMsg : ' ',
				waitTitle : ' ',
				url : '/webmaster/admin/userAction.do?method=getUserInfoWithJson',
				method : 'POST',
				success : function(frm, action) {
					// Ext.Msg.alert(' ', ' ');
					var pname = action.result.data.provinceName;// 
					var cname = action.result.data.cityName;// 
					Ext.getCmp('webmasterprovinceCmp').setRawValue(pname);
					Ext.getCmp('webmastercityCmp').setRawValue(cname);
				},
				failure : function(frm, action) {
					Ext.Msg.alert(' ', ' :' + action.result.errors.info);
				}
			});

성 드롭다운 상자 코드:
{
											xtype : 'combo',
											store : new Ext.data.Store({
												proxy : new Ext.data.HttpProxy(
														{
															url : '/webmaster/admin/globalAction.do?method=getProvinceList'
														}),
												reader : new Ext.data.JsonReader(
														{
															root : 'rows',
															totalProperty : 'total'
														}, [{
																	name : 'id'
																}, {
																	name : 'name'
																}])
											}),
											displayField : 'name',
											valueField : 'id',
											fieldLabel:' ',
//											hideLabel : true,
											width : 100,
											editable : false,
											mode : 'remote',
											triggerAction : 'all',
											forceSelection : true,
											typeAhead : true,
											name : 'provinceID',
											id:'webmasterprovinceCmp',
											hiddenName : 'provinceID',
											emptyText : '-- --',
//											pageSize : 10,
//											disabled : true,
											listeners : {
												'select' : {
													fn : function(combo,
															record, index) {
														Ext.getCmp('webmastercityCmp').change = true;//
														Ext.getCmp('webmastercityCmp').reset();// 
													},
													scope : this
												}
											}
											// allowBlank : false
										}

주요 코드:
성 ComboBox의 select 이벤트에서 도시 ComboBox의 사용자 정의 속성 change=true를 설정하고 도시 ComboBox를 리셋합니다
도시 ComboBox 코드:
{
											xtype : 'combo',
											store : new Ext.data.Store({
												proxy : new Ext.data.HttpProxy(
														{
															url : '/webmaster/admin/globalAction.do?method=getCityByProvinceId'
														}),
												reader : new Ext.data.JsonReader(
														{
															root : 'rows',
															totalProperty : 'total'
														}, [{
																	name : 'id'
																}, {
																	name : 'name'
																}])
											}),
											listeners:{
												'beforequery':function(queryEvent){
													var provinceId =  Ext.getCmp('webmasterprovinceCmp').getValue();
													if(provinceId>0&&queryEvent.combo.change){
														var province = Ext.getCmp('webmasterprovinceCmp').getRawValue();
														queryEvent.combo.store.load({params:{provinceName:province}});
														queryEvent.combo.change = false;
													}
													return true;
												}
											},
											change:true,
											displayField : 'name',
											valueField : 'id',
											fieldLabel:' ',
											width : 100,
											editable : false,
											mode : 'local',
											triggerAction : 'all',
											forceSelection : true,
											typeAhead : true,
											name : 'cityId',
											id:'webmastercityCmp',
											hiddenName : 'cityId',
											valueNotFoundText:'-- --',
											emptyText : '-- --'
										}

주요 코드:
1. 도시ComboBox에 사용자 정의 속성 change를 추가하여 성이 바뀌었는지 여부를 표시합니다.
2. 도시 ComboBox의 mode=local
3. 도시ComboBox의 beforequery 이벤트 응답 함수에 데이터를 불러와true로 되돌려줍니다.

좋은 웹페이지 즐겨찾기