在ExtJs中，如何使用圖標作為“顯示字段”的“值”？

Question

我希望將一個圖標顯示為表單“顯示字段”的“值”。 這是為了顯示諸如true / false和yes / no之類的只讀值，並帶有諸如“ tick mark / cross mark”之類的圖標。 怎么做？ 標簽上有很多帖子，但這不是我想要的。 我需要一個“ fieldLabel”，然后是一個圖標（盡管使用表單不是強制性的，為此我可以使用任何組件）。

Answer 1

是的，我們可以嘗試使用我的示例，我也將附加屏幕截圖。

            Ext.onReady(function () {
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 150,
            bodyPadding: 10,
            title: 'Final Score',
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'home ',
                name: 'home_score',
                value: '<img src="home.png"></img> '
            }, {
                xtype: 'displayfield',
                fieldLabel: 'Visitor ',
                name: 'visitor_score',
                value: '<img src="visitor.png"></img>'
            }],
            buttons: [{
                text: 'Update'
            }]
        });
        });

只需在代碼中更改圖像的路徑即可。如果您不使用表單，請在標簽字段中應用相同的內容。

Answer 2

最后，我在表單面板項中進行了以下操作以使其起作用：

        {
            xtype: 'fieldcontainer',
            fieldLabel: 'Label 1',
            flex: 1,
            name: 'Name 1',
            items: [{
                xtype: 'image',
                glyph: 'something@FontAwesome'
            }]
        },{
            xtype: 'fieldcontainer',
            fieldLabel: 'Label 2',
            flex: 1,
            name: 'Name 2',
            items: [{
                xtype: 'image',
                glyph: 'something@FontAwesome'
            }]
        }

我將Ext.Img放在表單面板類的“ requires”中。