ExtJS 4.1.1 : 다중 선택 콤보 박스의 사용자 정의 표시 텍스트

Question

표시 값이 특정 스키마 "Selections [x]"다음에 설정해야하는 다중 선택 콤보 박스가 있습니다. 여기서 x는 선택한 항목. 불행히도, 여러 가지 접근 방식을 사용하여 시도한 후에 원하는 결과를 얻을 수있는 방법을 찾을 수 없었습니다. fieldSubTpl 설정을 사용하거나 valueToRaw() 메소드를 덮어 쓰는 것이 나에게 가장 유망한 접근 방법 인 것 같다. 그러나 나는 그들 중 누구도 일할 수 없었다.

ExtJS 6 here에 대해 원하는 동작의 작동 예제를 발견했습니다. 둘 이상의 값을 선택하면 선택한 값을 간단하게 연결하는 대신 콤보 상자에 "x 값이 선택됨"으로 표시됩니다.

ExtJS 4.1.1에서 어떻게 동일한 결과를 얻을 수 있습니까?

Answer 1

combo에 displayTpl 구성을 사용해야합니다. 당신이 의 ExtJS 6.x에서에서 제공하기 때문에이 FIDDLE에서

, 나는 의 ExtJS 4.x의에서 같은 예제를 만들었습니다. 잘 작동합니다. 희망이 당신을 안내하거나 필요한 솔루션을 달성하는 데 도움이됩니다.

Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'Multiple Seletion Example in ExtJS 4.x for combo box', 
    items: [{ 
     xtype: 'combo', 
     margin: 20, 
     fieldLabel: 'Character Name', 
     store: Ext.create('Ext.data.Store', { 
      fields: ['id', 'name'], 
      data: [{ 
       id: 0, 
       name: 'John Snow' 
      }, { 
       id: 1, 
       name: 'Tyrion Lannister' 
      }, { 
       id: 2, 
       name: 'Morgan Dexter' 
      }, { 
       id: 3, 
       name: 'Lannister' 
      }, { 
       id: 4, 
       name: 'Silicon Vally' 
      }] 
     }), 
     displayField: 'name', 
     /* 
     If you use using this then initially you will see {0 values selected} 
      displayTpl: new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}'), 
     */ 
     valueField: 'id', 
     queryMode: 'local', 
     multiSelect: true, 
     filterPickList: true, 
     listeners: { 
      render: function (combo) { 
       //Use propery {displayTpl} 
       //The template to be used to display selected records inside the text field. An array of the selected records' data will be passed to the template. 
       combo.displayTpl = new Ext.XTemplate('{[values instanceof Array ? values.length === 1 ? values[0]["' + combo.displayField + '"] : values.length + " values selected" : values]}'); 
       /* 
       you can also use like below function 
       combo.displayTpl = new Ext.XTemplate('{[this.getDisplayField(values)]}', { 
        getDisplayField: function (values) { 
         if (Ext.isArray(values)) { 
          var len = values.length; 
          return len == 1 ? values[0].name : (len + ' values selected'); 
         } 
         return values; 
        } 
       });*/ 
      } 
     } 
    }] 
});