Làm cách nào để có được hộp tổ hợp extjs hoạt động như một hộp chọn html bình thường?

Question

ExtJS cung cấp hộp kết hợp ưa thích có nhiều tính năng - nhập trước, cho phép nhập văn bản ngẫu nhiên, ẩn tất cả các mục trong danh sách thả xuống không gắn dấu sao với văn bản đã được nhập.

Tôi không muốn các tính năng này. Tôi muốn một hộp chọn mà cư xử khá nhiều chính xác như người ta mong đợi một hộp chọn bình thường sẽ trong vanilla html.

Tôi muốn nó bị ràng buộc vào một cửa hàng dữ liệu và tôi muốn tất cả các tiện ích cấu hình extjs khác đi kèm với hộp tổ hợp. Tôi chỉ không muốn người dùng/người thử nghiệm cảm thấy bối rối khi họ gặp phải một hộp chọn phá vỡ mô hình tinh thần hiện tại của họ về cách những thứ này hoạt động.

Vậy làm cách nào để có được hộp tổ hợp extjs hoạt động giống hộp chọn hơn? Hoặc tôi đang sử dụng các phụ tùng sai hoàn toàn?

Answer 1

Bạn có thể nhận hành vi đó chỉ bằng cách sử dụng cấu hình thích hợp khi bạn khởi tạo đối tượng Ext.form.ComboBox:

var selectStyleComboboxConfig = { 
    fieldLabel: 'My Dropdown', 
    name: 'type', 
    allowBlank: false, 
    editable: false, 
    // This is the option required for "select"-style behaviour 
    triggerAction: 'all', 
    typeAhead: false, 
    mode: 'local', 
    width: 120, 
    listWidth: 120, 
    hiddenName: 'my_dropdown', 
    store: [ 
     ['val1', 'First Value'], 
     ['val2', 'Second Value'] 
    ], 
    readOnly: true 
}; 
var comboBox = new Ext.form.ComboBox(selectStyleComboboxConfig); 

Thay luận mode: 'local' và store trong trường hợp của bạn nếu bạn muốn nó được liên kết với một ví dụ Ext.data.JsonStore.

Answer 2

Bạn đã thử typeAhead = false? Không quá chắc chắn nếu điều này là gần với những gì bạn muốn.

var combo = new Ext.form.ComboBox({ 
    typeAhead: false, 

    ... 

}); 

Answer 3

var buf = []; 
buf.push('<option>aA1</option>'); 
buf.push('<option>aA2</option>'); 
buf.push('<option>bA3</option>'); 
buf.push('<option>cA4</option>'); 

var items = buf.join(''); 
new Ext.Component({ 
    renderTo: Ext.getBody(), 
    autoEl: { 
     tag:'select', 
     cls:'x-font-select', 
     html: items 
    } 
}); 

Answer 4

Các giải pháp chấp nhận hiện nay hoạt động tuyệt vời, nhưng nếu có ai muốn một ComboBox mà cũng xử lý đầu vào bàn phím giống như một hộp chọn HTML đơn giản (ví dụ, mỗi lần bạn nhấn "P" được chọn mục tiếp theo trong danh sách bắt đầu với "P"), sau đây có thể hữu ích:

{ 
    xtype: 'combo', 
    fieldLabel: 'Price', 
    name: 'price', 
    hiddenName: 'my_dropdown', 
    autoSelect: false, 
    allowBlank: false, 
    editable: false, 
    triggerAction: 'all', 
    typeAhead: true, 
    width:120, 
    listWidth: 120, 
    enableKeyEvents: true, 
    mode: 'local', 
    store: [ 
     ['val1', 'Appaloosa'], 
     ['val2', 'Arabian'], 
     ['val3', 'Clydesdale'], 
     ['val4', 'Paint'], 
     ['val5', 'Palamino'], 
     ['val6', 'Quarterhorse'], 
    ], 
    listeners: { 
     keypress: function(comboBoxObj, keyEventObj) { 
      // Ext.Store names anonymous fields (like in array above) "field1", "field2", etc. 
      var valueFieldName = "field1"; 
      var displayFieldName = "field2"; 

      // Which drop-down item is already selected (if any)? 
      var selectedIndices = this.view.getSelectedIndexes(); 
      var currentSelectedIndex = (selectedIndices.length > 0) ? selectedIndices[0] : null; 

      // Prepare the search criteria we'll use to query the data store 
      var typedChar = String.fromCharCode(keyEventObj.getCharCode()); 
      var startIndex = (currentSelectedIndex == null) ? 0 : ++currentSelectedIndex; 

      var matchIndex = this.store.find(displayFieldName, typedChar, startIndex, false); 

      if(matchIndex >= 0) { 
       this.select(matchIndex); 
      } else if (matchIndex == -1 && startIndex > 0) { 
       // If nothing matched but we didn't start the search at the beginning of the list 
       // (because the user already had somethign selected), search again from beginning. 
       matchIndex = this.store.find(displayFieldName, typedChar, 0, false);         
       if(matchIndex >= 0) { 
        this.select(matchIndex); 
       } 
      } 

      if(matchIndex >= 0) { 
       var record = this.store.getAt(matchIndex); 
       this.setValue(record.get(valueFieldName)); 
      } 
     } 
    } 
} 

Answer 5

Chỉ cần sử dụng chức năng Ext.merge

Từ doc: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext-method-merge