如何在标记字段编辑器中放置cls

时间:2017-01-23 07:25:42

标签: javascript css extjs tags

我正在使用tagfield并希望在字段中应用crooss Icon,我可以将其用于删除或某些事件。 我的标记字段代码是

{
    xtype: 'tagfield',
    growMax  : 10,
    valueField: 'title',
    displayField: 'title',
    parentGrid : me,
    dataIndex:header.getAttribute("DATAINDEX"),
    queryMode: 'local',
    multiSelect: true,
    isFilterDataLoaded: false,
    //cls : 'button-Cross',
    disabled: true,
    listeners:{}
}

我正在使用此css类来应用cross(X)图标,但它不会出现。此外,我确信如何点击该事件将更加激烈。我正在尝试actionCls但是没有那么多

.button-Cross {
    line-height: 12px;
    width: 18px;
    font-size: 8pt;
    font-family: tahoma;
    margin-top: 1px;
    margin-right: 2px;
    position:absolute;
    top:0;
    right:0;
}

任何人都能告诉我我需要做什么。我做错了什么我需要的图像是这样的。在黑盒子里我想要(X)。 enter image description here

注意:我的tagfield是小部件列。

1 个答案:

答案 0 :(得分:2)

您可以使用triggers添加其他触发器,例如:

{
   xtype: 'tagfield',
   growMax: 10,
   valueField: 'title',
   displayField: 'title',
   queryMode: 'local',
   multiSelect: true,
   isFilterDataLoaded: false,
   disabled: true,
   triggers: {
       clear: {
           weight: -2,
           cls: 'button-cross',
           handler: function(){}
       },
       picker: {
           handler: 'onTriggerClick',
           scope: 'this'
       }
   }
}

工作示例:https://fiddle.sencha.com/#view/editor&fiddle/1on7