html - ExtJs TreePanel对象中的CSS Div float 问题

我在ExtJs中使用treepanel对象，并且想在treepanel项内并排创建两个div。是否可以设置其中一个的宽度流体而另一个设置为自动宽度？实际上，html和css代码可以正常工作，但是当我将它们放入treepanel项目的text属性中时，它将无法工作。我在哪里做错了？

这是我的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">
		<div class="countSide"><span>12121212</span></div>
		<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>
	</div>

我怎样才能做到这一点。谢谢你的协助。

最佳答案

您的输入有些不清楚。根据我的理解，如果要将标题减少到几个字符，可以使用以下方法。

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

Ext.util.Format.ellipsis