외부 콤보박스에서 DOM의 요소로 제안된 값 렌더링

StackOverflow https://stackoverflow.com/questions/74266

  •  09-06-2019
  •  | 
  •  

문제

사용자가 입력할 때 저장소를 사용하여 사용자에게 값을 제안하는 확장 콤보 상자가 있습니다.

그 예는 여기에서 찾을 수 있습니다: 콤보박스 예

그렇게 만드는 방법이 있나요? 추천 텍스트 목록 DOM의 요소로 렌더링됩니다."applyTo" 구성 옵션을 의미하는 것은 아닙니다. 이렇게 하면 텍스트 상자를 포함한 전체 컨트롤이 DOM 요소에 렌더링됩니다.

도움이 되었습니까?

해결책

플러그인 내에서 개인 메소드를 호출하거나 재정의할 수 있으므로 이를 위해 플러그인을 사용할 수 있습니다.

var suggested_text_plugin = {

    init: function(o) {

        o.onTypeAhead = function() {
            // Original code from the sources goes here:

            if(this.store.getCount() > 0){
                var r = this.store.getAt(0);
                var newValue = r.data[this.displayField];
                var len = newValue.length;
                var selStart = this.getRawValue().length;
                if(selStart != len){
                    this.setRawValue(newValue);
                    this.selectText(selStart, newValue.length);
                }
            }

         // Your code to display newValue in DOM
         ......myDom.getEl().update(newValue);
        };
    }
};


// in combobox code:

var cb = new Ext.form.ComboBox({
    ....
    plugins: suggested_text_plugin,
    ....
});

내 생각엔 전체 메소드 체인을 생성하여 원래 메소드를 이전 또는 이후에 호출하는 것도 가능하다고 생각하지만 아직 시도하지 않았습니다.

또한 비표준 플러그인 정의 및 호출 방법(문서화되지 않음)을 사용한다고 나에게 강요하지 마세요.그것은 단지 사물을 보는 나의 방식일 뿐입니다.

편집하다:

나는 메소드 체인이 다음과 같이 구현될 수 있다고 생각합니다(테스트되지 않음).

....
o.origTypeAhead = new Function(this.onTypeAhead.toSource());
// or just
o.origTypeAhead = this.onTypeAhead;
....

o.onTypeAhead = function() {
    // Call original
    this.origTypeAhead();
    // Display value into your DOM element
    ...myDom....
};

다른 팁

@qui

고려해야 할 또 다른 사항은 initList가 API의 일부가 아니라는 것입니다.해당 메서드는 사라지거나 향후 Ext 릴리스에서 동작이 크게 변경될 수 있습니다.업그레이드할 계획이 전혀 없다면 걱정할 필요가 없습니다.

따라서 선택한 텍스트가 텍스트 입력 바로 아래 이외의 다른 위치에 렌더링되기를 원한다는 점을 명확히 하십시오.옳은?

ComboBox는 단지 Ext.DataView, 텍스트 입력 및 선택적 트리거 버튼이 있습니다.원하는 것에 대한 공식적인 옵션은 없으며 원하는 대로 작동하도록 해킹하는 것은 정말 고통스러울 것입니다.따라서 가장 쉬운 작업 과정(원하는 것을 정확히 수행하는 구성 요소가 포함된 다른 라이브러리를 찾아 사용하는 것 제외)은 위의 구성 요소를 사용하여 직접 빌드하는 것입니다.

  1. 텍스트 상자를 만듭니다.당신은 사용할 수 있습니다 Ext.form.TextField 원한다면 keyup 이벤트를 관찰하세요.
  2. 스토어에 바인딩된 DataView를 생성하여 원하는 DOM 요소로 렌더링합니다.원하는 것에 따라 'selectionchange' 이벤트를 듣고 선택에 응답하여 필요한 조치를 취하십시오.예를 들어 Ext.form.Hidden(또는 일반 HTML 입력 유형="hidden" 요소)의 setValue입니다.
  3. keyup 이벤트 리스너에서 저장소의 필터 메서드를 호출합니다(참조: 문서), 필드 이름과 텍스트 필드의 값을 전달합니다.예: store.filter('name',new RegEx(value+'.*'))

조금 더 많은 작업이 필요하지만 처음부터 자신만의 구성 요소를 작성하거나 원하는 대로 작동하도록 ComboBox를 해킹하는 것보다 훨씬 짧습니다.

@테브스

나는 당신이 올바른 길을 가고 있다고 생각합니다.

내가 한 일은 Combobox의 initList 메서드를 재정의하는 것이었습니다.

    Ext.override(Ext.form.ComboBox, {
    initList : function(){

코드를 보면 제안 목록을 데이터 뷰에 렌더링하는 비트를 볼 수 있습니다.따라서 원하는 dom 요소에 적용을 설정하십시오.

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",

@qui

좋아요.(기존 콤보 필드 외에) 추가 DOM 필드를 원한다고 생각했습니다.

하지만 귀하의 솔루션은 ComboBox 클래스의 메서드를 재정의할 것입니다. 그렇지 않습니까?그러면 모든 콤보 상자가 동일한 DOM으로 렌더링됩니다.플러그인을 사용하면 하나의 특정 인스턴스만 재정의됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top