2017-01-23 1 views
3

나는 tagfield를 사용하고 있는데, 제거 또는 일부 이벤트에 사용할 수있는 필드 안에 crooss 아이콘을 적용하고 싶습니다. 내 tagfield 코드는 제가 크로스 (X) 아이콘을 적용하려면이 CSS 클래스를 사용하고 있지만,이 오지 않아태그 필드 편집기 안에 cls를 넣는 방법

{ 
    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:{} 
} 

입니다. 또한 나는 그 사건의 클릭이 어떻게 치열해질 지 확신하고있다. 나는 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; 
} 

어떤 몸은 내가해야 할 일을 저를 제안 할 수 있습니다 얻을 did'nt. 그리고 내가 뭘 잘못하고 있는지. 내 필요한 이미지는 이와 같습니다. 블랙 박스에서 (X)를 원해. enter image description here

참고 : 내 은 위젯 열입니다.

답변

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

+0

덕분에 많이. 매력처럼 작동 – David

+0

''button-cross'' 만 잘못된 CSS 일 수 있습니다. 그러나 나는 바꿀 수있다. 나는 삽입하는 법만 알 필요가 있었다. :) – David

+0

십자가 아이콘 대신 아이콘을 내려 놓습니다. 나는 바이올린으로 검사했지만 결과는 동일합니다. 이런 일이 일어나는 이유. – David

관련 문제