ExtJS 4.1.1：マルチ選択コンボボックスのカスタム表示テキスト

Question

私は、表示値が特定のスキーマ "Selections [x]"の後に設定する必要がある複数選択コンボボックスを持っています。ここでxは選択されたアイテム。残念なことに、さまざまなアプローチを使用して試した結果、希望の結果を達成する方法を見つけることができませんでした。 fieldSubTplの設定を使用するか、valueToRaw（）メソッドを上書きすることは、私にとって最も有望なアプローチのようです。しかし、私はどちらかを働かせることができませんでした。

私は、ExtJS 6 hereの望ましい動作の実例を見出しました。複数の値を選択すると、選択した値を単純に連結するのではなく、選択した "x値"がコンボボックスに表示されます。

ExtJS 4.1.1でどのように同じ結果を達成できますか？

Answer 1

comboにはdisplayTplの設定が必要です。このFIDDLEで

あなたはExtJSの6.xのに提供して、私は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; 
        } 
       });*/ 
      } 
     } 
    }] 
});