DevExpress/Extreme dxSelectBox

Question

私はdevExpress dxSelectBoxに2つの問題があります。

1. アイテムフォームを選択すると、ドロップダウンリストの入力ボックスが編集可能になります。それはページの読み込みではなく、私は理由を知らない。

2. は、メインボックス内のフラグアイコンを表示することはできませんが、ドロップダウンリストの項目で を行うことができますこれは、この次のようになります。ここでは

コードです： のjavascript：

var langs = [{ 
    'Name': 'English', 
    "ImageSrc": '/static/img/flags/United-States-icon.png', 
    'value': 'en' 
}, { 
    'Name': '中文', 
    "ImageSrc": '/static/img/flags/China-icon.png', 
    'value': 'zh' 
}] 

$(function(){ 
    $("#language").dxSelectBox({ 
      dataSource: langs, 
      displayExpr: "Name", 
      valueExpr: "value", 
      value: langs[0].value, 
      acceptCustomValue: false, 
      fieldEditEnabled: false, 
      height: 'auto', 
      width: '100', 
      fieldTemplate: function(data, container) { 
       var result = $("<div class='custom-item'><div class='lang'>" + 
        "<img src='" + data["ImageSrc"] + 
        "' /></div></div>"); 
       result.find(".lang").dxTextBox({ value: data['Name'] }); 
       container.append(result); 
      }, 
      itemTemplate: function(data) { 
       return "<div class='custom-item'>" + "<div class='lang'>" + 
        data['Name'] + "<img src='" + 
        data['ImageSrc']+ "' /></div></div>"; 
      }, 
      valueChangeEvent: function(data) { 
       window.location.replace('https://www.google.com') 
      } 
    }); 
}); 

CSS：

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content { 
    padding-left: 7px; 
    padding-right: 7px; 
} 

.custom-item { 
    position: relative; 
    min-height: 30px; 
} 

.custom-item .language { 
    display: inline-block; 
    padding-left: 10px; 
    text-indent: 0; 
    line-height: 30px; 
    font-size: 12px; 
} 

/*.custom-item > img {*/ 
    /*left: 1px;*/ 
    /*position: absolute;*/ 
    /*top: 50%;*/ 
    /*!*margin-top: -15px;*!*/ 
/*}*/ 

.custom-item .dx-texteditor-buttons-container { 
    display: none; 
} 
.current-value { 
    padding: 10px 0; 
} 

.current-value > span { 
    font-weight: bold; 
} 

Answer 1

最初のポイント：

あなたはあるfieldEditEnabledオプションを使用しています。代わりにのacceptCustomValueオプションのみを使用してください。

第二の点：

あなたは.lang要素内の画像をレンダリングしようとしています。 .lang divにdxTextBoxを作成します。したがって、すべての内部マークアップはdxTextBoxマークアップに置き換えられます。私もfiddleを作成しました

var result = $("<div class='custom-item'><div class='lang'></div></div>"); 
result.find(".lang").dxTextBox({ value: data['Name'] }); 
result.append("<img class='selected-item-image' src='" + data["ImageSrc"] + "' />"); 
container.append(result); 

：まあ、あなただけ.lang div要素の隣に自分の画像を置くことができます。