'combobox'에 해당되는 글 1건

  1. 2013.05.15 [JavaScript] ExtJS - ComboBox

[JavaScript] ExtJS - ComboBox

ITWeb/개발일반 2013.05.15 16:49

ExtJS 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 로 구분 함.

신고
tags : ,
Trackback 0 : Comment 0