2015-01-08 3 views
1

actioncolumn 및 iconCls와 폰트 라이브러리에서 아이콘을 렌더링 할 수 없습니다 :나는 FontAwesome에 대한 index.html을에 다음 한

{ 
    text: 'Add', 
    xtype: 'actioncolumn', 
    flex: 1, 
    align: 'center', 
    items: [{ 
     iconCls: 'icon-circle-up', 
     tooltip: 'above this' 
    },{ 
     iconCls: 'icon-circle-down', 
     tooltip: 'below this' 
    }] 
} 

그리고 마지막으로 관련하는 SCS : 같은 그리드

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 

아이템 다음과 같이 변경합니다.

그리드가 렌더링되면 아이콘과 툴팁의 자리 표시자가 보이지만 아이콘은 렌더링되지 않습니다.

<img role="button" alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-action-col-icon x-action-col-0 icon-circle-up" data-qtip="above this"> 

여기에 어떤 문제가 있습니까 : 아이콘의 하나는 렌더링 될 때 다음이있다? 글꼴 스타일 시트에서 아이콘을 가져올 수 없습니까? 아이콘을 어떻게 얻을 수 있습니까?

페이지의 다른 "이미지"구성 요소는 FontAwesome을 사용하여 '글리프'와 잘 작동합니다.

+0

컴파일 된 CSS는 어떻게 생겼습니까? 가능한 복제 : http://stackoverflow.com/questions/25677306/sass-3-4-1-escaping-a-270e-into-270e-which-breaks-a-font-icon – cimmanon

+0

렌더링 된 소스로 업데이트되었습니다. 그것은 : Rajat

+0

그건 CSS가 아니에요. – cimmanon

답변

2

AFAIK 이것은 ExtJS가 작업 버튼을 'img'태그로 렌더링하기 때문에 불가능합니다. '아이콘'매개 변수를 제공하지 않으면 HTML 코드에서 볼 수있는 이미지가 1x1 픽셀의 빈 gif입니다.

그러나 @qdev 여기에 해결 방법을 발견 Font-Awesome ExtJS ActionColumn

대신

icon: ..., 

의 당신은

glyph: '[email protected]', 

난 그냥 그것에 대해 ExtJS로 4.2 바이올린을 만든 물품. 꽤 좋은 작품 : http://jsfiddle.net/mmfs3678/3/