[JavaScript] ExtJS - ComboBox
ITWeb/개발일반 2013. 5. 15. 16:49ExtJS API : http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.ComboBox
html form 요소 중 <select> 요소를 만들어 줍니다.
그렇다고 실제 <select> 객체가 들어가지는 않으니 유의 하세요.
사용 예)
indices[0] = {"optText":"all", "optValue":"all"};
ESDataIndexListControl.indiceStore = Ext.create("Ext.data.Store", {
fields: ["optText", "optValue"],
data: indices
});
Ext.create("Ext.form.ComboBox", {
id: "indicesCombo",
fieldLabel: "Index List",
store: ESDataIndexListControl.indiceStore,
queryMode: "local",
displayField: 'optText',
valueField: 'optValue',
typeAhead: true,
editable: false,
triggerAction: "all",
value: ESDataIndexListControl.indiceStore.getAt(0).get('optValue'),
renderTo: "esDataIndexSelectionViewPanel", // esDataIndexAliasSelectionViewPanel
listeners:{
'select': function(combo, record, index) {
ESDataListControl.indiceName = record[0].data.name;
ESDataListControl.currPage = 1;
ESDataListControl.getIndiceSearchMatchAll();
Ext.getCmp("aliasesCombo").setValue(ESDataIndexListControl.aliasStore.getAt(0).get('optValue'));
}
}
});
API 간단 설명)
- optText 는 selectbox 에서 options.text 에 해당.
- optValue 는 selectbox 에서 options.value 에 해당.
- data.Store 에서 fields 부분은 combobox 에서 사용할 이름으로 selectbox 의 value 와 text 로 구분 함.