afterLabelTextTpl在extjs4中的用法

我需要在字段標籤後顯示圖像。我想看看我是否可以使用afterLabelTextTpl。但沒有找到一個例子在線作爲如何使用它。afterLabelTextTpl在extjs4中的用法

這是我想要做的一個想法。有人可以糾正我..

       { 
            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]); 
                } 
               } 
              } 


             } 
            }

來源

2012-12-14 Micheal

的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-14 19:01:24 Eric

這真的有幫助..謝謝！ – Micheal

其XTemplate實例或字符串。

從docs：

一個可選的字符串或XTemplate配置標籤文本後場標記插入。如果使用XTemplate，則組件的呈現數據將用作上下文。

因此，一個字符串「Hello」會做，或任何XTemplate將採取

來源

2012-12-14 18:49:06 dbrin

afterLabelTextTpl在extjs4中的用法

回答

相關問題