Css Div Floating Issue in ExtJs TreePanel Object

Question

ExtJs에서 treepanel 객체를 사용하고 있는데 treepanel 항목 내에 두 개의 div를 나란히 만들고 싶습니다. 그들 중 하나의 너비 유체와 다른 하나의 너비 자동 설정할 수 있습니까? 사실, html과 css 코드는 제대로 작동하지만 treepanel item의 텍스트 속성 안에 넣으면 작동하지 않습니다. 내가 실수를 저지르고있는 곳?

여기 내 Extjs 코드의 일부입니다.

{ 
xtype: 'treepanel', 
cls: 'wikiTreePanel', 
root: { 
    text: 
    '<div class="treeItemTitleWrapper">'+ 
     '<div class="countSide"><span>12</span></div>'+ 
     '<div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title</div>'+           
    '</div>', 
    expanded: true, 
}} 

여기 내 HTML 및 CSS 코드입니다.

.treeItemTitleWrapper{ 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 26px; 
 
    overflow: hidden; 
 
} 
 

 
.treeItemTitleWrapper .titleSide{ 
 
    background: orange; 
 
    line-height: 26px; 
 
    height: 26px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
} 
 

 
.treeItemTitleWrapper .countSide{ 
 
    float: right; 
 
    height: 26px; 
 
    background: pink; 
 
}

<div class="treeItemTitleWrapper"> 
 
\t \t <div class="countSide"><span>12121212</span></div> 
 
\t \t <div class="titleSide">Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title Main Wiki Title</div> \t \t \t \t \t \t \t \t \t \t \t 
 
\t </div>

어떻게 그렇게 할 수 있습니다. 도움을 주셔서 감사합니다.

Answer 1

입력이 약간 불확실합니다. 몇 가지 문자로 제목을 줄이려는 경우 내 이해에 따라, 당신은 아래의 방법을 사용할 수 있습니다.

Ext.util.Format.ellipsis('Custom Title', 6); 

Ext.util.Format.ellipsis