0

我需要在字段标签之后显示图像。我想看看我是否可以使用 afterLabelTextTpl。但是没有在网上找到如何使用它的示例。

这是我想要做的事情的一个想法。有人可以在语法上纠正我吗..

                                {
                                    xtype: 'combobox',
                                    fieldLabel: 'Role',
                                    editable:false,
                                    store: roles_store, 
                                    triggerAction:'all',
                                    name: 'role_id',
                                    valueField: 'role_id',
                                    displayField:'role_name',
                                    afterLabelTextTpl : function() {

                                        {
                                            xtype: 'image',
                                            src:'../www/css/slate/btn/question.png',
                                            padding: '5 0 0 0',
                                            cls:'pointer',
                                            listeners: {
                                                el:{
                                                    click: function() {
                                                        Ext.create('Ext.tip.Tip', {
                                                            closable:true,
                                                            padding: '0 0 0 0',
                                                            maxWidth:300,
                                                            html: "<b>read-only</b>: Has read access to all pages, but can make no changes.<br><br><b>user</b>: Can edit rules and commit to production.<br><br><b>admin</b>: Can edit rules, commit to production, and add/delete users.<br><br> "+supertext
                                                        }).showAt([810, 340]);
                                                    }
                                                }
                                            }


                                        }
                                    }
4

2 回答 2

1

它是一个 XTemplate 实例或一个字符串。

从文档：

要在标签文本之后的字段标记中插入的可选字符串或 XTemplate 配置。如果使用 XTemplate，组件的渲染数据将用作上下文。

所以一个字符串 "Hello" 会做，或者XTemplate会接受的任何东西

于 2012-12-14T18:49:06.697 回答
1

这afterLabelTextTpl是一个模板配置，这意味着它需要一个字符串、一个字符串数组或一个实例Ext.XTemplate并使用它来生成 HTML。

没有通过 XTemplate 创建组件的内置方法（尽管论坛成员创建了一个名为CTemplate的扩展来允许这样做）。所以如果你想使用纯 Ext JS，你需要做更多的工作。

注意：我无法访问 Ext JS 4.1.3，所以下面是一个近似值，基于我对 4.1.0 的经验。您可能需要调整代码以使其恰到好处，但它应该提供足够的起点。

第 1 步：设置您的 afterLabelTextTpl。尝试这样的事情：

afterLabelTextTpl:'<img id="combo_icon" style="padding-top:5px" class="pointer" src="../www/css/slate/btn/question.png"/>'

那应该会显示您的图标。

第 2 步：添加点击监听器。有两种方法可以解决这个问题。这两种方法都假定您有一个名为My.Name.Space.onImageClick. 显然，您可以用您想要的任何名称替换此名称。这是功能：

My.Name.Space.onImageClick = function(){
    Ext.create('Ext.tip.Tip', {
        closable: true,
        padding:  0,
        maxWidth: 300,
        html:     '<b>whatever you want here</b>'
    }).showAt([810, 340]);
};

一种方法是将侦听器直接添加到 DOM。

'<img onclick="My.Name.Space.onImageClick();" /* the rest of the HTML here */ />'

另一种方法是添加监听器，Ext.dom.Element这可能是更好的选择。你的组合框配置中需要这样的东西：

listeners: {
    afterrender: function(me){
        var imgEl = Ext.get("combo_icon");
        if(imgEl){
            imgEl.on("click", My.Name.Space.onImageClick);
        }
    }
}

如果您在使其正常工作时遇到具体问题，请发表评论，我会帮助澄清我能做的。

于 2012-12-14T19:01:24.663 回答