Question

如何在ExtJs Combo中显示Icon以及显示字段。是否有extjs组合的任何扩展名。请提供一些样品。

Answer 1

对于ExtJS4，将一个带有getInnerTpl方法的listConfig添加到组合框中：

xtype: 'combobox',
anchor: '100%',
listConfig: {
  getInnerTpl: function(displayField) {
    return '<img src="/images/icons/{id}.png" class="icon"/> {' + displayField + '}';
  }
},
name: 'type',
fieldLabel: 'Group Type',
displayField: 'label',
hiddenName: 'type',
queryMode: 'local',
store: 'group.Types',
valueField: 'id'

Answer 2

参考：

Workaround-Image-in-Combobox-options

Country selector with flag images in ExtJS

Answer 3

另一种方式，我认为可以改进它，但对我来说没问题：

  ,store: new Ext.data.ArrayStore({
              id: 0,
              fields: [
                'lang', 'desc','url'
             ],
             data: [['CA','Spanish','es.gif'],['VA','Valencian','va.gif']]
 })

 ,tpl : '<tpl for=".">'+
                 '<tpl if="0==0"><div class="x-combo-list-item" ><img src="../img/{url}">       {desc}</div></tpl>'+
                '</tpl>'

Answer 4

在这里您可以看到如何显示具有可点击功能的图标。我正在使用getInnerTpl更改组合中的tpl行。创建新的tpl时，我可以更改html，以便它将包括一个CSS类，该类在运行时加载我想要的图标

var http = require('http');  
url = require('url');   
fs = require('fs');  
events = require('events');  
eventEmitter = new events.EventEmitter 
formidable = require('formidable');
form = new formidable.IncomingForm() 

http.createServer(function (req, res) {
    var content;

    if (req.url == '/fileupload') {
        form.parse(req, function (err, field, file) {
            if (err) {                                 
                throw err;
            }

            var oldpath = file.filetoupload.path;      
            var newpath = 'C:/Users/RT Owner/' + file.filetoupload.name; 

            fs.rename(oldpath, newpath, function (err) {
                if (err) {
                    throw err;
                }
                res.write('File uploaded and moved!');
                res.end();
            });
        });
    }
    else {
        //creating a HTML form to enable the user to upload a file
        res.writeHead(200, { 'Content-Type': 'text/html' });  
        res.write('<form action="fileupload" method="post" enctype="multipart/form-data">'); //creating an HTML form for user input
        res.write('<input type="file" name="filetoupload"><br>');
        res.write('<input type="submit">');
        res.write('</form>');

        res.end();
    }


}).listen(8080);

Css：

comboBox = Ext.create('Ext.form.ComboBox', {
            cls: 'fancy',
            itemId: 'itemId',
            store: store,
            displayField: 'displayField',
            valueField: 'InstanceId',
            editable: false,
            padding: '5 4 0 0',
            queryMode: 'local',
            lastQuery: '',
            listConfig: {
                maxHeight: 85,
                getInnerTpl: function (displayField) {
                    scope: me;
                    var tpl = '<tpl for=".">'
                                + '<div data-qtip={' + displayField + '}>'
                                    + '<div class="ItemClickSigh">{' + displayField + '}</div>'
                                    + '<div style="display: inline-block; float: right;">'
                                        + '<div class="EditIcon"></div>&nbsp;'
                                    + '</div>'
                                + '</div>'
                            + '</tpl>';

                    return tpl;
                },
                listeners: {
                    itemclick: function (list, record, item, index, e) {
                        scope: me;
                        me.hendlerComboItemClicked(record, e);
                    },
                    itemmouseenter: function (cmb, record, item, index, e, eOpts) {
                        scope: me;
                        me.hendlerComboItemMouse(item, 'visible');
                    },
                    itemmouseleave: function (cmb, record, item, index, e, eOpts) {
                        scope: me;
                        me.hendlerComboItemMouse(item, 'hidden');
                    }
                }
            }
        });

}

ExtJs组合中的图标

4 个答案: