extJs 드롭다운 상자 연결 구현 code_extjs

코드 복사 코드는 다음과 같습니다.

// 첫 번째 드롭다운 상자
var parentStore = new Ext .data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext .data.JsonReader ({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{ name: 'mc', mapping: 'name'}
])
})
// 두 번째 드롭다운 상자
var childStore = new Ext.data.Store({
proxy: new Ext .data.HttpProxy({
//여기에 쓸 수 있는 매개변수가 있습니다. 이 데이터 소스는 첫 번째 드롭다운 상자가 선택되면 로드됩니다.
url: 'loadByParentid .action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{이름: 'id', 매핑: 'id'},
{이름: 'mc', 매핑: '이름'}
])
});
fieldLabel: '카테고리를 선택하세요' ,
xtype:'combo',
store: parentStore,
valueField: "id",
displayField: "mc",
mode : 'local',
forceSelection: true ,//하나의 항목을 선택해야 합니다
emptyText: '카테고리를 선택하세요...',//기본값
hiddenName:'interviewsDetail.parent_category',// HiddenName은 백그라운드에 제출된 입력의 이름입니다.
editable: false,//입력이 허용되지 않습니다
triggerAction: 'all',//이 드롭다운은 선택만 가능하므로 속성을 설정해야 합니다. 그렇지 않으면 옵션을 선택할 때 드롭다운에 옵션 값 텍스트와 일치하는 선택 항목만 표시되고 다른 선택 항목은 더 이상 표시되지 않으므로 다른 옵션을 변경할 수 없습니다.
//allowBlank:false,//이 옵션 값은 비워둘 수 없습니다
id: 'parent_id',
name: 'parent',
width: 400,
listeners:{
select : function(combo, Record,index){
childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' 콤보.값})
childStore.load( );
}
}
},{
xtype:'combo',
store: childStore,
valueField: "id",
displayField: "mc",
//데이터가 로컬입니다
mode: 'local',
forceSelection: true,//하나의 항목을 선택해야 합니다
emptyText: '하위 카테고리를 선택하세요...',//기본값 value
hiddenName:'interviewsDetail.child_category', //hiddenName은 백그라운드에 제출된 입력의 이름입니다.
editable: false, //입력이 허용되지 않습니다.
triggerAction: 'all', //because 이 드롭다운은 선택만 가능하므로 TriggerAction 속성을 모두로 설정해야 합니다. 그렇지 않으면 옵션을 선택할 때 드롭다운에 옵션 값 텍스트와 일치하는 옵션만 표시되고 다른 옵션은 표시되지 않습니다. 이 방법으로 다른 옵션을 변경할 수 없습니다.
//allowBlank:false,//이 옵션 값은 비워둘 수 없습니다.
fieldLabel: 'select',
id: 'child_id',
name: 'child',
width: 400
}