EXTJS 4 hiển thị HTML của giá trị đã chọn trong hộp tổ hợp

Question

Xin chào Tôi có vấn đề tiếp theo, tôi muốn hiển thị html giá trị hiển thị của tôi trong combobox, tại thời điểm này tôi tải một cửa hàng với html đã sẵn sàng, nó hiển thị html khi tôi hiển thị tất cả chúng, nhưng khi tôi chọn một, nó sẽ hiển thị html.

Tôi có thể làm gì để hiển thị html khi mục đã được chọn?

Dưới đây là một số hình ảnh để giúp giải thích sự bất tiện:

Đây là khi Im sẽ chọn một

http://i.stack.imgur.com/TcfRA.jpg

Đây là khi tôi chọn một

http://i.stack.imgur.com/Kzi9r.jpg

Html rằng tôi render là tiếp theo một:

<img class="io_img" src="/files/images/io-P.gif"/><div class="io_desc">hola</div></div> 

Cảm ơn trước.

PD: Rất tiếc không hiển thị hình ảnh và chỉ liên kết, nhưng tôi không có đủ danh tiếng để hiển thị hình ảnh trực tiếp.

Answer 1

Điều này yêu cầu vài bước. Vấn đề là ComboBox có trường nhập bên dưới và đầu vào không thể hiển thị html. Vì vậy, bước đầu tiên là thay đổi mẫu mà thay thế đầu vào bằng div. Ví dụ:

fieldSubTpl: [ 
    '<div class="{hiddenDataCls}" role="presentation"></div>', 
    '<div id="{id}" type="{type}" ', 
     '<tpl if="size">size="{size}" </tpl>', 
     '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>', 
     'class="{fieldCls} {typeCls}" autocomplete="off"></div>', 
    '<div id="{cmpId}-triggerWrap" class="{triggerWrapCls}" role="presentation">', 
     '{triggerEl}', 
     '<div class="{clearCls}" role="presentation"></div>', 
    '</div>', 
    { 
     compiled: true, 
     disableFormats: true 
    } 
] 

Sau đó, thay đổi mẫu đó cho thấy chọn giá trị:

displayTpl: Ext.create('Ext.XTemplate', [ 
    '<tpl for=".">', 
    '<img src="http://phpbb3.pl/adm/images/icon_edit.gif" />', 
    '{[typeof values === "string" ? values : values["title"]]}', 
    '</tpl>' 
]) 

Một điều nữa là để tạo mới danh sách mẫu-item. Ví dụ:

listConfig: { 
    getInnerTpl: function() { 
     return '<div class="search-item">' + 
      '<h3><img src="http://phpbb3.pl/adm/images/icon_edit.gif" /><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' + 
      '{excerpt}' + 
     '</div>'; 
    } 
} 

Và điều cuối cùng - bạn phải đảm bảo rằng giá trị được đặt chính xác vào div. Cho rằng bạn nên ghi đè setRawValue phương pháp:

setRawValue: function(value) { 
    var me = this; 
    value = Ext.value(value, ''); 
    me.rawValue = value; 

    // Some Field subclasses may not render an inputEl 
    if (me.inputEl) { 
     // me.inputEl.dom.value = value; 
     // use innerHTML 
     me.inputEl.dom.innerHTML = value; 
    } 
    return value; 
} 

ý rằng mẫu mới không chứa bất kỳ lĩnh vực input, vì vậy giá trị sẽ không được đệ trình. Nếu bạn cần sử dụng kết hợp như vậy với biểu mẫu, bạn nên thêm đầu vào bị ẩn ở đâu đó trong số fieldSubTpl và đặt giá trị cho nó trong setRawValue.

mẫu làm việc: http://jsfiddle.net/lolo/8Xs5h/1/

Answer 2

Chúng tôi có nhiệm vụ tương tự để hiển thị màu đã chọn. Giải pháp của chúng tôi là ghi đè mẫu combobox:

var store = new Ext.data.SimpleStore({ 
    fields: ['num','id', 'color'] 
}); 

var tplColor = new Ext.XTemplate(
    '<tpl for="."><div id = "seriesColor_{num}" class="combo-result-item">', 
     '<div class="combo-texture" style="background-color:{color};">&nbsp;</div>', 
    '</div></tpl>' 
); 

new Ext.form.ComboBox({ 
    tpl: tplColor, 
    store: store, 
    ... 
}; 

Bạn có thể làm điều gì đó tương tự nhưng sử dụng hình ảnh thay vì màu nền.