ExtJs TreePanel对象中的Css Div浮动问题

Question

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

这是我的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>

我该怎么做？谢谢你的帮助。

Answer 1

你的输入有点不清楚。根据我的理解，如果你想将标题缩小为几个字符，你可以使用以下方法。

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

Ext.util.Format.ellipsis